docs: refactor tutorials based on the review

Author: iamAmer

docs/docs/tutorials/building-your-first-app.mdx

@@ -4,7 +4,11 @@ title: Building Your First App
 
 # Building Your First App
 
-Learn how to build a simple color picker app using LiveCodes. This app will let users click a button to generate random background colors.
+Learn how to build a simple color generator app using LiveCodes. This app will let users click a button to generate random background colors.
+
+Try the completed project below, or [open it in a new tab](https://livecodes.io/?x=id/v9dmx2p9z8w).
+
+<iframe src="https://livecodes.io/?x=id/v9dmx2p9z8w" width="100%" height="400px"></iframe>
 
 ## What We'll Build
 
@@ -153,6 +157,14 @@ Try adding these features:
 - Let users save their favorite colors
 - Add different color format options (RGB, HSL)
 
+## Congratulations!
+
+You've just built your color generator app with LiveCodes!
+
+Compare your version with the completed project above. Did you add any personal touches?
+
+**[View the completed project](https://livecodes.io/?x=id/v9dmx2p9z8w)**
+
 ## Next Steps
 
 - [External Resources](/docs/features/external-resources) - Add libraries like color manipulation tools

docs/docs/tutorials/getting-started-guide.mdx

@@ -6,6 +6,10 @@ title: Getting Started Guide
 
 This guide will walk you through creating your first project in LiveCodes.
 
+Try the completed project below, or [open it in a new tab](https://livecodes.io/?x=id/q6k8itvp2dv).
+
+<iframe src="https://livecodes.io/?x=id/q6k8itvp2dv" width="100%" height="400px"></iframe>
+
 ## Prerequisites
 
 - A web browser (Chrome, Firefox, Safari, or Edge)
@@ -15,10 +19,10 @@ This guide will walk you through creating your first project in LiveCodes.
 
 1. Navigate to [livecodes.io](https://livecodes.io)
 2. You'll see the editor interface with three panels:
-   - **HTML** (left)
-   - **CSS** (middle)
-   - **JavaScript** (right)
-   - **Result** (bottom)
+   - **HTML**
+   - **CSS**
+   - **JavaScript**
+   - **Result**
 
 ## Step 2: Create a Simple Page
 
@@ -79,7 +83,7 @@ const greetBtn = document.getElementById('greetBtn');
 greetBtn.addEventListener('click', () => {
   const name = nameInput.value.trim();
   if (name) {
-    greeting.textContent = `Hello, ${name}! `;
+    greeting.textContent = `Hello, ${name}!`;
   } else {
     greeting.textContent = 'Hello, World!';
   }
@@ -95,9 +99,18 @@ The result panel automatically updates as you type. Try:
 
 ## Step 4: Save Your Project
 
-1. Click the "Share" button in the toolbar.
-2. Choose **"Save"** to create a permanent URL
-3. Bookmark or share your project URL
+1. Click on the "Project" menu button in the toolbar.
+2. Click Save to save the project (on this device).
+3. You can open it later from "Project menu > Open".
+4. Use "Project menu > Share" to get a permanent URL to your project that you can share.
+
+## Congratulations!
+
+You've just built your first interactive app with LiveCodes!
+
+Compare your version with the completed project above. Did you add any personal touches?
+
+**[View the completed project](https://livecodes.io/?x=id/q6k8itvp2dv)**
 
 ## Next Steps
 
@@ -111,5 +124,5 @@ Now that you've created your first project, explore:
 
 - Use **Ctrl/Cmd + S** to manually save
 - Press **Ctrl/Cmd + Alt + S** to open share panel
-- Press **Ctrl/Cmd + Shift + P** to open the command menu
+- Press **Ctrl/Cmd + K** to open the command menu
 - Enable **Auto-save** in user settings for automatic saving

docs/sidebars.ts

@@ -13,18 +13,6 @@ const sidebars: SidebarsConfig = {
       items: [
         'why',
         'getting-started',
-        {
-          type: 'category',
-          label: 'Guides & Tutorials',
-          link: {
-            type: 'doc',
-            id: 'tutorials/index',
-          },
-          items: [
-            'tutorials/getting-started-guide',
-            'tutorials/building-your-first-app',
-          ],
-        },
         {
           type: 'category',
           label: 'Features',
@@ -122,6 +110,15 @@ const sidebars: SidebarsConfig = {
             },
           ],
         },
+        {
+          type: 'category',
+          label: 'Guides & Tutorials',
+          link: {
+            type: 'doc',
+            id: 'tutorials/index',
+          },
+          items: ['tutorials/getting-started-guide', 'tutorials/building-your-first-app'],
+        },
         'bookmarklet',
         'gh-action',
         'markdown-to-livecodes',