improve tutorial early steps per feedback

Author: yyx990803

Diff for: src/tutorial/TutorialRepl.vue

@@ -209,10 +209,21 @@ footer a {
   margin: 1em 0;
 }
 
+.vt-doc :deep(h2) {
+  font-size: 1.1em;
+  margin: 1.2em 0 0.5em;
+  padding: 0;
+  border-top: none;
+}
+
 .vt-doc :deep(.header-anchor) {
   display: none;
 }
 
+.vt-doc :deep(summary) {
+  cursor: pointer;
+}
+
 .hint {
   padding-top: 1em;
 }

Diff for: src/tutorial/src/step-1/description.md

@@ -2,12 +2,25 @@
 
 Welcome to the Vue tutorial!
 
-The goal of this tutorial is to quickly give you an experience of what it feels like to work with Vue, right in the browser. It does **not** aim to be comprehensive, so after you complete it, make sure to also read the <a target="_blank" href="/guide/introduction.html">Guide</a> which covers each topic in more details.
+The goal of this tutorial is to quickly give you an experience of what it feels like to work with Vue, right in the browser. It does not aim to be comprehensive, and you don't need to understand everything before moving on. However, after you complete it, make sure to also read the <a target="_blank" href="/guide/introduction.html">Guide</a> which covers each topic in more details.
 
-Vue offers two API styles: Options API and Composition API. This tutorial is designed to work for both - you can choose your preferred style using the **API Preference** switches at the top. <a target="_blank" href="/guide/introduction.html#api-styles">Learn more about API styles</a>.
+## Prerequisites
 
-You can also switch between SFC-mode or HTML-mode. The former will show code examples in <a target="_blank" href="/guide/introduction.html#single-file-components">Single-File Component</a> (SFC) format, which is what most developers use when they use Vue with a build step. HTML-mode shows usage without a build step.
+The tutorial 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.
+
+## How to Use This Tutorial
 
 You can edit the code <span class="wide">on the right</span><span class="narrow">below</span> and see the result update instantly. Each step will introduce a core feature of Vue, and you will be expected to complete the code to get the demo working. If you get stuck, you will have a "Show me!" button that reveals the working code for you. Try not to rely on it too much - you'll learn faster by figuring things out on your own.
 
+If you are an experienced developer coming from Vue 2 or other frameworks, there are a few settings you can tweak to make the best use of this tutorial. If you are a beginner, it's recommended to go with the defaults.
+
+<details>
+<summary>Tutorial Setting Details</summary>
+
+- Vue offers two API styles: Options API and Composition API. This tutorial is designed to work for both - you can choose your preferred style using the **API Preference** switches at the top. <a target="_blank" href="/guide/introduction.html#api-styles">Learn more about API styles</a>.
+
+- You can also switch between SFC-mode or HTML-mode. The former will show code examples in <a target="_blank" href="/guide/introduction.html#single-file-components">Single-File Component</a> (SFC) format, which is what most developers use when they use Vue with a build step. HTML-mode shows usage without a build step.
+
+</details>
+
 Ready? Click "Next" to get started.

Diff for: src/tutorial/src/step-2/description.md

@@ -1,10 +1,16 @@
 # Declarative Rendering
 
-The core feature of Vue is **declarative rendering**: using a template syntax that extends HTML, we can keep the HTML view in sync with the JavaScript state, automatically.
+<div class="sfc">
+
+What you see in the editor is a Vue Single File Component (SFC). An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a `.vue` file.
+
+</div>
+
+The core feature of Vue is **declarative rendering**: using a template syntax that extends HTML, we can describe how the HTML should look like based on JavaScript state. When the state changes, the HTML updates automatically.
 
 <div class="composition-api">
 
-We can declare reactive state using `reactive()`. Objects created from `reactive()` are proxies that work just like normal objects:
+State that can trigger updates when changed are considered **reactive**. We can declare reactive state using Vue's `reactive()` API. Objects created from `reactive()` are JavaScript [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that work just like normal objects:
 
 ```js
 import { reactive } from 'vue'
@@ -32,13 +38,13 @@ Details on `reactive()` and `ref()` are discussed in <a target="_blank" href="/g
 
 <div class="sfc">
 
-Variables declared in the `<script setup>` block can be used directly in the template. This is how we can render dynamic text based on the value of the `state` object and `message` ref, using mustaches syntax:
+Reactive state declared in the component's `<script setup>` block can be used directly in the template. This is how we can render dynamic text based on the value of the `state` object and `message` ref, using mustaches syntax:
 
 </div>
 
 <div class="html">
 
-A component's state should be declared inside its `setup()` function, and returned using an object:
+The object being passed to `createApp()` is a Vue component. A component's state should be declared inside its `setup()` function, and returned using an object:
 
 ```js{2,5}
 setup() {
@@ -51,7 +57,7 @@ setup() {
 }
 ```
 
-Properties in the returned object will be exposed to the template. This is how we can render dynamic text based on the value of `message`, using mustaches syntax:
+Properties in the returned object will be made available in the template. This is how we can render dynamic text based on the value of `message`, using mustaches syntax:
 
 </div>
 
@@ -66,7 +72,9 @@ Notice how we did not need to use `.value` when accessing the `message` ref in t
 
 <div class="options-api">
 
-We can declare reactive state using the `data` option, which should be a function that returns an object:
+State that can trigger updates when changed are considered **reactive**. In Vue, reactive state is held in components. In the example code, the object being passed to `createApp()` is a component.
+
+We can declare reactive state using the `data` component option, which should be a function that returns an object:
 
 <div class="sfc">