Tutorial

Set up VS Code the right way

Install Visual Studio Code on Mac or Windows, add the three extensions every web student needs — Live Preview, Code Spell Checker, and a W3C HTML validator — and structure your project folder so everything just works. No folder-buried-in-a-folder headaches.

Step 1

Download & install VS Code

Visual Studio Code is a free code editor from Microsoft. Get it from the official site only — never from a random download mirror.

code.visualstudio.com
macOS.zip → Applications
  1. Click the big blue Download button — it grabs a .zip.
  2. Open your Downloads folder and double-click the zip to unzip it.
  3. Drag Visual Studio Code.app into your Applications folder.
  4. Open it from Applications (or Spotlight: ⌘ Space → "Code").
  5. If macOS warns it's from the internet, click Open.
Windows.exe installer
  1. Click the big blue Download button — it grabs a .exe.
  2. Open your Downloads folder and run the installer.
  3. Accept the agreement. On "Select Additional Tasks", tick Add to PATH and Add "Open with Code".
  4. Click Install, then Finish.
  5. Launch from the Start menu — search "Visual Studio Code".
Tick "Open with Code" on Windows. It lets you right-click any folder and choose Open with Code — the fastest way to start a project. On Mac you'll use File → Open Folder instead.
Step 2

Install the three extensions

Extensions add features to VS Code. Open the Extensions panel with ⌘ Shift X (Mac) or Ctrl Shift X (Windows), type the name in the search box, and click Install. Add these three.

Live Preview

by Microsoft

Shows your page in a live window inside VS Code that refreshes every time you save — no need to keep switching to a browser and hitting reload.

Live Preview

Code Spell Checker

by Street Side Software

Underlines misspelled words in your code and text with a wavy line — catches typos in headings, alt text, and content before anyone else sees them.

Code Spell Checker

W3C Web Validator

by Celian Riboulet

Checks your HTML against the official W3C rules and flags errors — unclosed tags, missing alt text, invalid nesting. Run it with ⌘ Shift P / Ctrl Shift P → "Validate".

W3C Web Validator
How to install: click the Extensions icon in the left sidebar (the four-squares icon), search the name above, confirm the publisher matches, then click the blue Install button. Reload VS Code if it asks.
Step 3

Set up your project folder correctly

Where your project lives matters. The golden rule: one project folder, placed directly inside Downloads, Documents, or Desktop — and no folder buried inside another folder of the same name. A nested folder is the #1 reason Live Preview shows a blank page or links break.

Do this
Desktop/
   my-website/ ← open THIS folder
      index.html
       css/
            style.css
       js/
            script.js
       images/
Not this
Downloads/
   my-website/
     my-website/ ← folder inside a folder!
       index.html ← buried too deep

Why this matters

One folder = one site

VS Code works on a whole folder. Open the folder that has index.html directly inside it — not its parent.

Tidy subfolders

CSS, JS, and images each get their own folder. Links stay clean: href="css/style.css" — not a tangle of ../../.

Easy to find

Desktop, Documents, and Downloads are one click away. Don't bury the project five folders deep where you'll lose it.

Unzipping traps

Unzipping often creates name/name/. Always open the inner folder that actually holds your files.

Do

  • Put the project folder directly in Desktop, Documents, or Downloads
  • Name it in lowercase with hyphens: my-website
  • Keep index.html at the top level of that folder
  • Group the rest into css/, js/, and images/ subfolders
  • Open the folder that contains index.html

Don't

  • Nest a folder inside a same-named folder
  • Use spaces or capitals: My Website
  • Bury the project deep in subfolders
  • Leave files loose on the Desktop with no folder
The naming rule: every file and folder name should be all lowercase with no spaces — use hyphens instead. my-website, style.css, hero-image.jpg ✓  ·  My Website, Hero Image.JPG ✗. Web servers are case-sensitive and spaces break links, so this habit saves you broken pages later.
Step 4

Create your first page

With VS Code open and the project folder ready, make your home page. The home page must be named index.html — browsers and hosts look for that name automatically.

  1. File → Open Folder and choose your my-website folder.
  2. Click the New File icon in the Explorer panel and name it index.html.
  3. Click the New Folder icon and make three folders: css, js, and images.
  4. Inside css create style.css; inside js create script.js.
  5. Open index.html, type ! then press Tab — Emmet writes the HTML skeleton — or paste the starter below.
  6. Save with ⌘ S (Mac) or Ctrl S (Windows).

Starter HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Hello, world!</h1>
  <p>My website is up and running.</p>

  <!-- JS goes just before the closing body tag -->
  <script src="js/script.js"></script>
</body>
</html>
Folders first, then files. Put style.css inside the css folder and script.js inside the js folder. The <link> and <script> tags above already point at css/style.css and js/script.js — so they connect the moment you save.

Emmet — type the abbreviation, press Tab

VS Code has Emmet built in, so you rarely type angle brackets. Type a short abbreviation — usually just the tag name or its first letters — then press Tab, and the full tag drops onto the screen with the cursor already inside it. Start with ! for a whole page, then build from there.

!→ the full HTML5 page skeleton
a→ <a href=""></a> — a link
p→ <p></p> — a paragraph
img→ <img src="" alt="">
ul>li*3→ a list with three <li> items
.card→ <div class="card"></div>
Step 5

What each extension does & how to use it

You installed three extensions in Step 2. Here's exactly what each one does and how to put it to work — with the steps spelled out.

Live Preview — by Microsoft

What it does: opens your web page in a panel inside VS Code that auto-refreshes every time you save — so you never alt-tab to a browser and hit reload.

  1. Open your index.html file.
  2. Open the Command Palette — ⌘ Shift P (Mac) / Ctrl Shift P (Windows) — type Live Preview: Show Preview and press Enter. (Or click the small preview icon, top-right of the editor.)
  3. A live panel opens beside your code.
  4. Edit, save (⌘ S / Ctrl S), and watch it update instantly.

Code Spell Checker — by Street Side Software

What it does: underlines misspelled words in your code and text with a wavy line, so typos in headings, alt text, and content never ship.

  1. Nothing to start — it runs automatically the moment it's installed.
  2. Misspelled words get a wavy underline as you type.
  3. Hover the word and click the lightbulb (or press ⌘ . / Ctrl .) to see suggestions.
  4. Pick the correct spelling — or choose Add to dictionary for names and terms it doesn't know.

W3C Web Validator — by Celian Riboulet

What it does: checks your HTML against the official W3C rules and lists every error — unclosed tags, missing alt, invalid nesting — without leaving the editor.

  1. Open the .html file you want to check.
  2. Open the Command Palette (⌘ Shift P / Ctrl Shift P), type validate, and run the W3C Web Validator command.
  3. Results appear in the Problems panel (open it with ⌘ Shift M / Ctrl Shift M).
  4. Click a problem to jump straight to that line. Fix it, re-run, and repeat until it says zero errors.
Two built-in editor extras (no extension needed): toggle Word Wrap so long lines don't run off-screen — ⌥ Z / Alt Z; and go Full Screen for more room — ⌃ ⌘ F / F11. Both are also under the Command Palette as "View: Toggle…".
The everyday loop: edit → ⌘ S/Ctrl S to save → Live Preview updates → fix any spell-check squiggles → run the W3C validator before you call it done.
Step 6

Use commands, not menus

Hunting through the menu bar is slow. The fastest way to work is the Command Palette and the keyboard. Learn these two moves and you'll fly through VS Code without ever opening the File menu.

The Command Palette

Press ⌘ Shift P / Ctrl Shift P, start typing what you want — "word wrap", "live preview", "full screen", "validate" — and hit Enter. It runs any command without touching a menu.

Right-click for quick actions

Right-clicking a file or folder opens a context menu — new file, rename, reveal in Explorer. On a laptop trackpad you may need to know the gesture (below).

How to right-click on a laptop

Many people don't realize a trackpad can right-click. Here's how on each platform.

Mac trackpad
  • Tap or click with two fingers at the same time
  • Or hold Control and click
  • Turn it on under System Settings → Trackpad → Secondary click
Windows trackpad
  • Press the bottom-right corner of the trackpad
  • Or tap with two fingers
  • Or use the separate right button if your laptop has one
Learn the shortcuts. A handful of keys saves hours over a term. For the full Mac & PC reference — copy, paste, screenshots, switching windows and more — see the Keyboard Shortcuts tutorial.
Cheat Sheet

Shortcuts & extension names

Mac and Windows side by side, plus exactly what to search in the Extensions panel.

macOS shortcuts
  • Command Palette · ⌘ Shift P
  • Open folder · Palette → "Open Folder"
  • Save · ⌘ S
  • Extensions · ⌘ Shift X
  • Word Wrap · ⌥ Z
  • Full Screen · ⌃ ⌘ F
  • Live Preview · Palette → "Show Preview"
  • Quick fix · ⌘ .
Windows shortcuts
  • Command Palette · Ctrl Shift P
  • Open folder · Ctrl K Ctrl O
  • Save · Ctrl S
  • Extensions · Ctrl Shift X
  • Word Wrap · Alt Z
  • Full Screen · F11
  • Live Preview · Palette → "Show Preview"
  • Quick fix · Ctrl .

Search these in the Extensions panel

Live Preview — Microsoft Code Spell Checker — Street Side Software W3C Web Validator — Celian Riboulet