Your First Local File

Time to put your new environment to work! Let's create your first local project and experience the local development workflow.

The Local Development Workflow

Here's how local development works:

Text

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  1. Create/Open project folder in VS Code                   │
│                     ↓                                       │
│  2. Write/Edit code files                                   │
│                     ↓                                       │
│  3. Save files (Ctrl/Cmd + S)                              │
│                     ↓                                       │
│  4. Live Server automatically refreshes browser             │
│                     ↓                                       │
│  5. See changes instantly!                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

The Magic

No uploads, no waiting for servers, no refreshing manually — instant feedback!

Step 1: Create Your Project Folder

Windows

# Windows
 
1. Open File Explorer
2. Navigate to Documents (or Desktop)
3. Right-click → New → Folder
4. Name it: vibe-coding-course

Step 2: Open Folder in VS Code

Method 1: From VS Code

Open VS Code
File → Open Folder (or Open on Mac)
Navigate to your vibe-coding-course folder
Click Select Folder

Method 2: From File Explorer/Finder

Navigate to your folder
Right-click on the folder
Select "Open with Code" (if you enabled this during install)

Method 3: Drag and Drop

Open VS Code
Drag your folder onto the VS Code icon

You Should See:

Text

VS Code
├─────────────────────────┐
│ EXPLORER               │
│                        │
│ ▼ VIBE-CODING-COURSE   │  ← Your folder
│   (empty)              │
│                        │
└─────────────────────────┘

The folder appears in the Explorer sidebar on the left.

Step 3: Create index.html

Create the File:

Hover over your project folder name in the Explorer
Click the New File icon (📄 icon that appears)
Type: index.html
Press Enter

The file opens automatically in the editor.

Step 4: Write Your First Local HTML

Type the following code into your new index.html file:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My First Local Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #4A90D9;
        }
        p {
            color: #666;
            line-height: 1.6;
        }
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>🎉 Hello from my computer!</h1>
    <p>This page is running locally, not in the cloud.</p>
    <p>If you can see this, your development environment is working perfectly!</p>
    
    <div class="success">
        ✅ VS Code is working<br>
        ✅ HTML files are saving<br>
        ✅ Live Server is running
    </div>
    
    <p><small>My first local development page - [Your Name], [Date]</small></p>
</body>
</html>

Customize It:

Replace [Your Name] with your actual name
Replace [Date] with today's date

Step 5: Save the File

Press Ctrl + S (Windows/Linux) or Cmd + S (Mac).

You'll notice:

The white dot on the tab disappears (indicates saved)
The file is now saved on your computer

Step 6: Preview with Live Server

Open Live Server:

Right-click anywhere in the HTML file
Select "Open with Live Server"

What Happens:

Your default browser opens
You see your page at http://127.0.0.1:5500/index.html
The page shows your HTML content!

The Address Explained:

Text

http://127.0.0.1:5500/index.html
│    │           │    │
│    │           │    └── Your file
│    │           └── Port number (Live Server uses 5500)
│    └── 127.0.0.1 means "this computer" (also called localhost)
└── Protocol

Wow!

You're running a web server on your own computer!

Step 7: Experience Live Reload

The magic of Live Server — instant updates!

Try This:

Keep the browser window visible
Go back to VS Code
Change the <h1> text:

HTML

<h1>🎉 This updates automatically!</h1>

Press Ctrl/Cmd + S to save
Watch your browser — it updates instantly!

No manual refresh needed. This is the local development superpower.

The Local Development Loop

You'll use this loop constantly:

Text

Write Code → Save → See Changes → Write Code → Save → See Changes...

It's fast, it's immediate, and it's how professional developers work.

Understanding File Structure

Your project now looks like:

Text

vibe-coding-course/
└── index.html        ← Your first file!

As projects grow:

Text

vibe-coding-course/
├── index.html        ← Main page
├── about.html        ← Another page
├── css/
│   └── style.css     ← Styles
├── js/
│   └── script.js     ← JavaScript
└── images/
    ├── logo.png
    └── hero.jpg

We'll build towards this structure in future lessons.

Experiment Time!

Before moving on, try these modifications:

Stop Live Server

When you're done:

Look at VS Code's status bar (bottom of window)
Click "Port: 5500" (or similar)
Click "Stop Live Server"

Or simply close VS Code — it stops automatically.

First Local File Checklist

✅ First Local Project

0/8

Lesson Summary

What You Accomplished:

✅ Created a project folder
✅ Opened it in VS Code
✅ Created your first HTML file
✅ Used Live Server to preview
✅ Experienced live reload

The Big Difference:

Cloud (Course 1)

Local (Course 2)

Browser → Cloud → Result

Computer → Instant Result

Files on their servers

Files on YOUR computer

Share via their URL

YOUR server (for now)

🎉 Congratulations!

Your First Local File Is Live!

You've officially joined the world of local development!

Next Up

Let's look at how to troubleshoot common setup issues — your reference guide for when things go wrong.