add prerequisite after intro

Author: yyx990803

src/guide/introduction.md

@@ -5,6 +5,7 @@ footer: false
 # Introduction
 
 :::info You are reading the documentation for Vue 3!
+
 - Vue 2 documentation has been moved to [v2.vuejs.org](https://v2.vuejs.org/).
 - Upgrading from Vue 2? Check out the [Migration Guide](https://v3-migration.vuejs.org/).
   :::
@@ -50,24 +51,28 @@ const count = ref(0)
 
 The above example demonstrates the two core features of Vue:
 
-- **Declarative Rendering**: Vue extends standard HTML with templating syntax that allows us to declaratively describe HTML output based on JavaScript state.
+- **Declarative Rendering**: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
 
 - **Reactivity**: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
 
 You may already have questions - don't worry. We will cover every little detail in the rest of the documentation. For now, please read along so you can have a high-level understanding of what Vue offers.
 
+:::tip Prerequisites
+The rest of the documentation assumes basic familiarity with HTML, CSS and JavaScript. If you are totally new to front development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
+:::
+
 ## The Progressive Framework
 
 Vue is a framework and ecosystem that covers most of the common features needed in frontend development. But the web is extremely diverse - the things we build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:
 
-- Enhancing backend-rendered HTML without a build step
+- Enhancing static HTML without a build step
 - Embedding as Web Components on any page
 - Single-Page Application (SPA)
 - Fullstack / Server-Side-Rendering (SSR)
 - JAMStack / Static-Site-Generation (SSG)
 - Targeting desktop, mobile, WebGL or even the terminal
 
-If you are a beginner and find these concepts intimidating, don't worry! The guide and tutorial only require basic HTML and JavaScript knowledge, and you should be able to follow along without being an expert in any of these.
+If you find these concepts intimidating, don't worry! The tutorial and guide only require basic HTML and JavaScript knowledge, and you should be able to follow along without being an expert in any of these.
 
 If you are an experienced developer interested in how to best integrate Vue into your stack, or you are curious about what these terms mean, we discuss them in more details in [Ways of Using Vue](/guide/extras/ways-of-using-vue).
 
@@ -206,14 +211,14 @@ Check out our [FAQ](/about/faq).
 Different developers have different learning styles. Feel free to pick a learning path that suits your preference - although we do recommend going over all content if possible!
 
 <div class="vt-box-container next-steps">
-  <a class="vt-box" href="/guide/quick-start.html">
-    <p class="next-steps-link">Read the Guide</p>
-    <p class="next-steps-caption">The guide walks you through every aspect of the framework in full details.</p>
-  </a>
   <a class="vt-box" href="/tutorial/">
     <p class="next-steps-link">Try the Tutorial</p>
     <p class="next-steps-caption">For those who prefer learning things hands-on.</p>
   </a>
+  <a class="vt-box" href="/guide/quick-start.html">
+    <p class="next-steps-link">Read the Guide</p>
+    <p class="next-steps-caption">The guide walks you through every aspect of the framework in full details.</p>
+  </a>
   <a class="vt-box" href="/examples/">
     <p class="next-steps-link">Check out the Examples</p>
     <p class="next-steps-caption">Explore examples of core features and common UI tasks.</p>