🛠️ Lesson 3: Setting Up Your Tools

Why Visual Studio Code?

Visual Studio Code (VS Code) is a free, open-source code editor made by Microsoft. It's the most popular code editor in the world, used by millions of developers for everything from simple HTML pages to massive applications.

Here's why we're using it:

• Free — no license, no trial period, no hidden costs
• Cross-platform — works on Windows, Mac, and Linux
• Lightweight — installs fast, runs fast
• Extensible — thousands of free extensions add extra features
• Industry standard — learning VS Code is a transferable skill

Installing VS Code

Step 1: Download

1. Go to code.visualstudio.com
2. Click the big blue Download button — it will detect your operating system automatically
3. The download should start within a few seconds

Step 2: Install

Windows:

1. Run the downloaded .exe installer
2. Accept the license agreement
3. On the "Select Additional Tasks" screen, check these boxes:
   • ✅ Add "Open with Code" action to Windows Explorer file context menu
   • ✅ Add "Open with Code" action to Windows Explorer directory context menu
   • ✅ Add to PATH
4. Click Install, then Finish

Mac:

1. Open the downloaded .zip file
2. Drag Visual Studio Code.app to your Applications folder
3. Open it from Applications

Step 3: Launch

Open VS Code. You'll see a Welcome tab with some getting-started options. You can close that tab — we'll walk through everything you need.

The "Aha" Moment

Remember that my-page.html file you created on your Desktop in the last lesson? Let's open it in VS Code.

1. In VS Code, go to File → Open File (or press Ctrl + O)
2. Navigate to your Desktop and select my-page.html
3. Click Open

Look at that. The exact same text you typed in Notepad — but now it has colors:

• Tags like <h1> and <p> are one color
• Attribute names like href are another color
• Attribute values like "https://www.google.com" are yet another color
• The actual text content is a different color from the tags

This is syntax highlighting, and it makes reading HTML infinitely easier. You can instantly see the structure of your document at a glance. No more squinting at a wall of black text.

Now try this: place your cursor after a < character and start typing a tag name like h2. See that dropdown menu that appears? That's auto-complete (also called IntelliSense in VS Code). It suggests tags as you type and can fill them in for you.

Quick Tour of VS Code

Let's get familiar with the interface. VS Code has five main areas:

Essential Keyboard Shortcuts

You don't need to memorize these now, but these will become second nature:

Installing Live Server

Remember the edit-save-refresh cycle from Lesson 2? Let's make it better. Live Server is a free VS Code extension that automatically refreshes your browser every time you save a file.

How to Install It

1. In VS Code, click the Extensions icon in the Activity Bar (it looks like four small squares, or press Ctrl + Shift + X)
2. In the search box, type Live Server
3. Find the one by Ritwick Dey (it'll be the first result with millions of downloads)
4. Click Install

How to Use It

1. Open an HTML file in VS Code
2. Right-click anywhere in the editor and choose "Open with Live Server"
3. Your browser will open with the page — and it will auto-refresh whenever you save

No more manually refreshing. Edit, save, and watch the page update instantly. This small change makes development dramatically faster.

Setting Up Your Project Folder

It's time to get organized. Instead of saving random files to the Desktop, let's create a proper project folder.

Step 1: Create the Folder

1. Open File Explorer (Windows) or Finder (Mac)
2. Navigate to your Documents folder (or wherever you keep projects)
3. Create a new folder called my-website

Step 2: Open It in VS Code

1. In VS Code, go to File → Open Folder
2. Select the my-website folder you just created
3. Click Select Folder

Now look at the Sidebar — you should see your folder name at the top, with an empty explorer below it. This is your workspace. All of your website files will live here.

Step 3: Create Your First File

1. In the Sidebar, hover over the folder name and click the New File icon (a page with a plus sign)
2. Name it index.html
3. Press Enter — the file opens in the editor, ready for you to write

What Your Project Should Look Like

Right now you have just one file:

my-website/
└── index.html

As the course progresses, you'll add more files and folders. By the end, your project will look something like this:

my-website/
├── index.html        (your homepage)
├── about.html        (about page)
├── contact.html      (contact page)
├── styles/
│   └── style.css     (your stylesheet)
└── images/
    ├── hero.jpg
    └── profile.jpg

But for now, one file is all you need. We'll build from here.

Bonus: Browser DevTools

One more tool worth knowing about — your browser has built-in developer tools (DevTools) that let you inspect any web page and see its HTML and CSS in real time.

How to Open DevTools

• Chrome / Edge: Press F12 or Ctrl + Shift + I
• Firefox: Press F12 or Ctrl + Shift + I
• Any browser: Right-click any element on a page and choose "Inspect"

A panel will appear showing you the HTML and CSS behind whatever page you're looking at. This works on any website — you can inspect Google, YouTube, Wikipedia, anything.

We won't use DevTools heavily in this course, but it's an incredibly valuable learning tool. Whenever you see a design you like on a website, you can right-click it, choose Inspect, and see exactly how it was built.

Summary

✅ Your Setup Checklist

Before moving on, make sure you have:

• ✅ VS Code installed and working
• ✅ Live Server extension installed
• ✅ A my-website folder created and opened in VS Code
• ✅ An empty index.html file inside that folder

🚀 What's Next?

Your tools are ready. Your project folder is set up. In the next lesson, you'll learn the proper structure of an HTML document — DOCTYPE, html, head, body, and all the pieces that make a page "correct" (not just something that happens to work). The HTML you typed in Notepad was functional, but it was missing a lot. Time to fix that.