HTML · Quick Reference

Lesson 3 — Setting Up Your Environment Cheat Sheet

HTML

In one line: 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...

Key Ideas

1Choosing 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 af...

2Installing 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):

3Creating 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:

4Live 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 f...

5Browser 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).

Code Examples

<!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>
    <!-...

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/ fold...