diff --git a/.vitepress/theme/components/ScrimbaLink.vue b/.vitepress/theme/components/ScrimbaLink.vue
new file mode 100644
index 0000000000..5dc1b93c0c
--- /dev/null
+++ b/.vitepress/theme/components/ScrimbaLink.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="scrimba">
+    <a
+      :href="href"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Watch a free interactive tutorial on Scrimba</slot>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    href: { type: String, required: true },
+    title: { type: String, required: true }
+  }
+}
+</script>
+<style scoped>
+.scrimba {
+  margin: 28px 0;
+  background-color: var(--vt-c-bg-soft);
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  position: relative;
+  display: flex;
+  border-radius: 8px;
+}
+.scrimba a {
+  color: var(--c-text);
+  position: relative;
+  padding-left: 36px;
+}
+.scrimba a:before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 30px;
+  height: 30px;
+  top: calc(50% - 15px);
+  left: -4px;
+  border-radius: 50%;
+  background-color: #2B2B2B; /* Scrimba's dark color */
+}
+.scrimba a:after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 5px);
+  left: 8px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid #fff;
+}
+</style> 
\ No newline at end of file
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
index 9be18aba92..2fb1341359 100644
--- a/src/guide/components/v-model.md
+++ b/src/guide/components/v-model.md
@@ -1,5 +1,9 @@
 # Component v-model {#component-v-model}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-v-model" title="Free Vue.js Component v-model Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 ## Basic Usage {#basic-usage}
 
 `v-model` can be used on a component to implement a two-way binding.
diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md
index 651a5f8d9c..3bc43e557d 100644
--- a/src/guide/essentials/component-basics.md
+++ b/src/guide/essentials/component-basics.md
@@ -1,5 +1,9 @@
 # Components Basics {#components-basics}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-component-basics" title="Free Vue.js Components Basics Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. It's common for an app to be organized into a tree of nested components:
 
 ![Component Tree](./images/components.png)
diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md
index cf20d14e5a..8a42bff4dd 100644
--- a/src/guide/essentials/template-syntax.md
+++ b/src/guide/essentials/template-syntax.md
@@ -1,5 +1,9 @@
 # Template Syntax {#template-syntax}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-template-syntax" title="Free Vue.js Template Syntax Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
 
 Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md
index f711eee365..72d596ce96 100644
--- a/src/guide/quick-start.md
+++ b/src/guide/quick-start.md
@@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme'
 
 - If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on [StackBlitz](https://vite.new/vue).
 
+- To get a walkthrough of the recommended setup, watch this interactive [Scrimba](http://scrimba.com/links/vue-quickstart) tutorial that shows you how to run, edit, and deploy your first Vue app.
+
 ## Creating a Vue Application {#creating-a-vue-application}
 
 :::tip Prerequisites
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 2368dc0f78..79c020e5ce 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -1,5 +1,9 @@
 # TypeScript with Composition API {#typescript-with-composition-api}
 
+<ScrimbaLink href="https://scrimba.com/links/vue-ts-composition-api" title="Free Vue.js TypeScript with Composition API Lesson" type="scrimba">
+  Watch an interactive video lesson on Scrimba
+</ScrimbaLink>
+
 > This page assumes you've already read the overview on [Using Vue with TypeScript](./overview).
 
 ## Typing Component Props {#typing-component-props}