🌐 Phase 1 · Web Foundations 🟢 Beginner Module 01

Setting Up Your Environment

⏱ 20 min setup 📖 6 sections 🧩 5-question quiz 🏆 1 challenge

Course Progress9% complete

A good development environment makes coding faster, catches errors before they matter, and previews your work instantly. In this lesson you'll install VS Code, configure the essential extensions, create your first HTML project, and learn to use browser DevTools — the most important debugging tool you'll ever have.

Section 1

Choosing a Text Editor

A text editor is where you write code. Unlike Microsoft Word, text editors save plain text — no formatting, no hidden characters. Your choice of editor dramatically affects your productivity.

Editor	Platform	Cost	Best For
VS Code ✅ Recommended	Win/Mac/Linux	Free	Everything — the industry standard
Sublime Text	Win/Mac/Linux	Free trial / $99	Speed, minimalist workflow
Notepad++	Windows only	Free	Lightweight editing
WebStorm	Win/Mac/Linux	$69/yr	Large JS projects (overkill for HTML)
Notepad/TextEdit	Built-in	Free	Learning (but upgrade ASAP)

💡

Use VS Code — it's the industry standard

Over 73% of professional developers use VS Code (Stack Overflow Survey 2023). It has the largest extension marketplace, built-in Git, integrated terminal, and incredible HTML tooling. Everything in this course assumes VS Code.

Section 2

Installing VS Code & Essential Extensions

Download VS Code from code.visualstudio.com (it's free and open source). After installing, add these extensions from the Extensions panel (Ctrl/Cmd + Shift + X):

⚡

Live Server MUST INSTALL

Launches a local development server with instant browser auto-refresh whenever you save. Search "Live Server" by Ritwick Dey. This is non-negotiable.

🎨

HTML CSS Support MUST INSTALL

Adds CSS class and ID autocomplete inside HTML files. Saves you from typos in class names. By ecmel.

✨

Prettier RECOMMENDED

Auto-formats your code on save. Keeps indentation consistent. Enable "Format on Save" in settings. Becomes indispensable.

🔍

Auto Rename Tag RECOMMENDED

When you rename an opening HTML tag, the closing tag updates automatically. Prevents mismatched tag bugs.

🌈

Indent Rainbow RECOMMENDED

Colours each indentation level differently, making nested HTML much easier to read at a glance.

Section 3

Creating Your First HTML Project

Good file organisation from day one saves enormous pain later. Follow this setup every time you start a new web project:

Create a project folder

Make a folder called my-first-website on your Desktop or Documents. Give folders meaningful names — never leave spaces in folder names (use hyphens).

Open the folder in VS Code

Open VS Code → File → Open Folder → select your folder. Or drag the folder onto the VS Code icon. This sets the workspace root.

Create index.html

Click the new file icon in the Explorer panel (or Ctrl/Cmd + N). Name it index.html. The homepage of any website is always index.html — servers look for this file first.

Type ! and press Tab

Emmet abbreviation: typing ! then Tab in a .html file instantly generates the full HTML5 boilerplate. VS Code ships with Emmet built in. Magic.

Save with Ctrl/Cmd + S

Get into the habit of saving constantly. VS Code shows a dot on the tab when a file has unsaved changes. Enable Auto Save: File → Auto Save.

HTMLEmmet ! boilerplate output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- your content goes here -->
</body>
</html>

Section 4

Live Server — Instant Preview

Live Server is the single most useful extension for HTML development. It launches a local web server and automatically refreshes the browser every time you save your file — no manual refreshing needed.

Right-click your HTML file

In the VS Code Explorer panel, right-click on index.html → "Open with Live Server"

Or click "Go Live"

The blue "Go Live" button in VS Code's bottom status bar launches Live Server for the current file.

Browser opens automatically

Your browser opens at http://127.0.0.1:5500/index.html — a local server address only you can see.

Edit and save → browser updates

Make a change in VS Code, press Ctrl/Cmd + S, and the browser refreshes instantly. No manual F5 needed.

⚠️

Always use Live Server, not file:// URLs

Double-clicking an HTML file opens it with a file:// URL, which blocks some browser features (fonts, fetch API, modules). Always use Live Server's http://127.0.0.1:5500 address for accurate results.

Section 5

Browser DevTools

DevTools is the built-in browser inspector. Every serious web developer has it open constantly. Open it with F12 (or right-click → "Inspect" on any page element).

🏗️

Elements Panel

See the live HTML and CSS. Click any element on the page to inspect it. Edit HTML/CSS directly and see changes instantly.

📡

Network Panel

See every request: HTML, CSS, JS, images. Check load times, file sizes, and HTTP status codes. Essential for debugging slow pages.

🖥️

Console Panel

JavaScript errors appear here. Run JS commands. Log messages. Your debugging HQ when JS misbehaves.

📱

Device Toolbar

Toggle Ctrl/Cmd+Shift+M to simulate mobile devices. Test your layout on different screen sizes without a real device.

💾

Application Panel

Inspect localStorage, cookies, service workers, and cached files. Used in later lessons for advanced topics.

🔍

Sources Panel

View and debug your source files. Set breakpoints in JavaScript to pause execution at any line.

🚀

Pro tip: Edit CSS in DevTools first

When experimenting with styles, try them in the DevTools Elements panel first. Changes don't persist on reload, but it's the fastest way to test ideas. Once happy, copy the values into your actual CSS file.

Section 6

Organising Your Project Files

Even a simple website benefits from a consistent folder structure. Here's the standard organisation most projects follow:

FOLDERStandard Project Structure

my-website/
├── index.html          # Homepage (always index.html)
├── about.html          # Additional pages at root
├── contact.html
├── css/
│   └── style.css       # Stylesheets in css/ folder
├── js/
│   └── main.js         # Scripts in js/ folder
├── images/
│   ├── logo.png
│   └── hero.jpg        # All images in images/ folder
└── fonts/              # Optional: self-hosted fonts

📄

index.html = homepage

Web servers serve index.html automatically when a directory is requested. Never name your homepage anything else.

🔡

Lowercase filenames only

Servers are case-sensitive. About.html ≠ about.html. Always use lowercase and hyphens, never spaces.

🗂️

Group by type

Separate CSS, JS, and images into their own folders. This keeps the root clean and paths predictable.

🔗

Relative paths

Link to files using relative paths: css/style.css or ../images/logo.png. Absolute paths break when you move the project.

🧩 Quick Check — Lesson 3

5 questions · instant feedback · no penalty for wrong answers

1. What is the standard filename for a website's homepage?

2. What does the Live Server extension do?

3. What shortcut opens Browser DevTools?

4. What Emmet shortcut generates the HTML5 boilerplate in VS Code?

5. Why should you avoid opening HTML files with a file:// URL (double-clicking)?

🏆

Quiz Complete!

Your environment is set up. Now let's write real HTML structure!

🏆

Lesson 3 Challenge

Setup exercise · 15 min · hands-on

Set up your first HTML development environment from scratch.

Complete ALL of these steps:

1. Install VS Code from code.visualstudio.com (if not already installed)
2. Install the Live Server extension (search in Extensions panel)
3. Create a folder called html-course on your Desktop
4. Open it in VS Code and create index.html
5. Type ! + Tab to generate the boilerplate
6. Add an <h1> tag with "Hello from VS Code!" inside the body
7. Launch Live Server and see your page in the browser
8. Change the h1 text, save, and watch the browser update automatically
9. Open DevTools (F12) and click on your h1 in the Elements panel

Show hints

If Live Server doesn't appear, reload VS Code after installing
"Go Live" button appears in the bottom-right status bar
Your local URL will be http://127.0.0.1:5500/index.html
Right-click → Inspect is the same as F12 for opening DevTools

← Introduction to HTML

Lesson 3 of 35HTML Fundamentals

HTML Structure →