Lesson 0: Setup - Getting Your Development Environment Ready

What You'll Learn

  • How to install Visual Studio Code (VS Code)
  • How to install a web browser (if needed)
  • How to set up your workspace for web development
  • How to create and open HTML files

Why This Matters

Before you can start creating websites, you need the right tools. This lesson will get you set up with everything you need to write HTML and CSS code and see your websites in action.

What You Need

1. A Code Editor: Visual Studio Code (VS Code)

VS Code is a free, powerful editor made by Microsoft that's perfect for web development.

2. A Web Browser

Any modern browser works:

  • Safari (already on your Mac)
  • Chrome
  • Firefox
  • Edge

Part 1: Installing Visual Studio Code

Step 1: Download VS Code

  1. Open Safari (or your preferred browser)
  2. Go to: https://code.visualstudio.com
  3. Click the big "Download Mac Universal" button
  4. Wait for the download to complete

Step 2: Install VS Code

  1. Open your Downloads folder
  2. Find VSCode-darwin-universal.zip (or similar)
  3. Double-click to unzip it
  4. Drag the Visual Studio Code app to your Applications folder
  5. Open Launchpad and click Visual Studio Code to launch it

Step 3: First Launch

  1. If you see a security warning saying "VS Code is an app downloaded from the internet", click Open
  2. VS Code will open with a Welcome screen

You're ready to code! 🎉

Part 2: Setting Up Your Workspace

Create Your Project Folder

  1. Open Finder
  2. Go to your Documents folder
  3. Create a new folder called web-projects
  4. Inside web-projects, create a folder called lesson-01

Your folder structure should look like:

Documents/
└── web-projects/
    └── lesson-01/

Opening Your Workspace in VS Code

  1. In VS Code, click File → Open Folder...
  2. Navigate to Documents/web-projects
  3. Click Open

Now you'll see your workspace in the left sidebar!

Part 3: Installing Helpful VS Code Extensions

Extensions add extra features to VS Code. Let's install some helpful ones:

How to Install Extensions

  1. Click the Extensions icon in the left sidebar (it looks like four squares)
  2. Or use the keyboard shortcut: Cmd+Shift+X

Recommended Extensions

1. Live Server

This lets you see your website update automatically as you code.

  • Search for: "Live Server"
  • Find the one by Ritwick Dey
  • Click Install

2. Prettier - Code Formatter

This automatically formats your code to look clean and consistent.

  • Search for: "Prettier - Code formatter"
  • Find the one by Prettier
  • Click Install

3. HTML CSS Support

This gives you helpful autocomplete suggestions.

  • Search for: "HTML CSS Support"
  • Find the one by ecmel
  • Click Install

These extensions will make your coding experience much better!

Part 4: Creating Your First HTML File

Let's make sure everything works:

Step 1: Create a New File

  1. In VS Code, make sure you have the web-projects folder open
  2. Right-click on the lesson-01 folder in the left sidebar
  3. Select New File
  4. Name it: index.html
  5. Press Enter

Step 2: Write Some HTML

Type this into your new file:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page!</p>
</body>
</html>

Step 3: Save the File

  • Press Cmd+S to save
  • Or click File → Save

Step 4: View in Browser

Method 1: Using Live Server (Recommended)
  1. Right-click anywhere in your HTML file
  2. Select Open with Live Server
  3. Your default browser will open showing your page!
Method 2: Manual Opening
  1. In Finder, navigate to your lesson-01 folder
  2. Double-click index.html
  3. It will open in your default browser

You should see:

  • A large heading saying "Hello, World!"
  • A paragraph saying "This is my first web page!"

Congratulations! You've created your first website! 🎉

Part 5: Understanding Your Tools

VS Code Layout

┌─────────────────────────────────────┐
│  File  Edit  View  ...       [Menu] │
├──┬──────────────────────────────────┤
│  │                                   │
│ 📁 │  [Your code appears here]       │
│  │                                   │
│  │                                   │
└──┴──────────────────────────────────┘
 Sidebar    Editor Area

Sidebar: Shows your files and folders

Editor Area: Where you write code

Bottom Panel: Shows terminal, problems, etc.

Useful Keyboard Shortcuts

Action Shortcut
Save file Cmd+S
Open file Cmd+O
New file Cmd+N
Find Cmd+F
Replace Cmd+Option+F
Toggle terminal Ctrl+`
Command palette Cmd+Shift+P

Browser Developer Tools

These tools help you inspect and debug websites:

Open Developer Tools:
  • Safari: Cmd+Option+I (you may need to enable in Preferences)
  • Chrome/Edge: Cmd+Option+I or F12
  • Firefox: Cmd+Option+I or F12

Part 6: Best Practices for Organization

Folder Structure for Projects

web-projects/
├── lesson-01/
│   └── index.html
├── lesson-02/
│   └── index.html
├── my-portfolio/
│   ├── index.html
│   ├── about.html
│   ├── css/
│   │   └── style.css
│   └── images/
│       └── photo.jpg
Tips:
  • One folder per project or lesson
  • Use lowercase for file names
  • Use hyphens instead of spaces: my-project.html not my project.html
  • Keep related files together

Naming Conventions

✅ Good file names:

  • index.html
  • about-us.html
  • style.css
  • main-photo.jpg

❌ Avoid:

  • My Page.html (spaces)
  • PAGE1.HTML (all caps)
  • page!!!.html (special characters)

Troubleshooting Common Issues

Issue 1: VS Code Won't Open

Solution:
  • Make sure you dragged it to Applications folder
  • Try right-clicking and selecting "Open"
  • Check System Preferences → Security & Privacy

Issue 2: Can't See File Extension (.html)

Solution:
  • In Finder, go to Preferences
  • Click "Advanced"
  • Check "Show all filename extensions"

Issue 3: Live Server Not Working

Solution:
  • Make sure the extension is installed
  • Try closing and reopening VS Code
  • Right-click directly in the HTML file
  • Alternatively, just open the HTML file directly in a browser

Issue 4: Changes Not Showing in Browser

Solution:
  • Make sure you saved the file (Cmd+S)
  • Refresh the browser (Cmd+R)
  • If using Live Server, it should auto-refresh
  • Check you're editing the right file

Quick Reference: File Types

Extension Type Purpose
.html HTML Structure and content of web pages
.css CSS Styling and appearance
.js JavaScript Interactivity (future lessons)
.jpg, .png Images Photos and graphics

Practice Exercise

Let's make sure your setup is working:

  1. Create a new folder called test-project
  2. Inside it, create a file called hello.html
  3. Write HTML that displays:

- A heading with your name

- A paragraph about your favorite hobby

  1. Open it in your browser
  2. Make a change and see it update

What You Learned

  • ✅ How to install VS Code on macOS
  • ✅ How to install useful extensions
  • ✅ How to create and organize project folders
  • ✅ How to create HTML files
  • ✅ How to view your web pages in a browser
  • ✅ Basic VS Code keyboard shortcuts
  • ✅ How to use Live Server for development

What's Next?

Now that your development environment is ready, you're prepared to start learning HTML!

In the next lesson, you'll learn what HTML is and how to create the structure of web pages.