HTML Zero → Mastery — Lesson 4: Install a Code Editor (VS Code)

Learning Goals

Install Visual Studio Code on your OS (Windows, macOS, or Linux).
Tour the core UI: Activity Bar, Explorer, Editor, Panel, Status Bar, Command Palette.
Set up essential extensions: Live Server and Prettier.
Configure Auto Save and Format on Save.
Create a workspace folder for this course and run your first local preview.

Download VS Code Validate this page

Part 1 — Install VS Code

Steps (all OSes)

Go to code.visualstudio.com.
Download the installer for your OS and run it.
Launch Visual Studio Code.

Tip: During install on Windows, enable “Add to PATH” so you can run code . from the terminal.

First-run checklist

Open Command Palette (Ctrl/Cmd + Shift + P).
Search “Settings: Open Settings (UI)”.
Set Auto Save to “afterDelay”.

Part 2 — VS Code UI Tour

Main areas

Activity Bar — icons for Explorer, Search, Source Control, Run, Extensions.
Side Bar — changes with the active activity (Explorer shows files).
Editor — where you type code (tabs across the top).
Panel — Problems, Output, Terminal, Debug Console.
Status Bar — info + quick toggles (encoding, line endings, formatter, etc.).

Command Palette

Press Ctrl/Cmd + Shift + P and type a command name (e.g., “Toggle Word Wrap”).

Pro move: You can run any command from the Palette without hunting menus.

Part 3 — Create Your Workspace

Create a folder named lesson-04 (put it next to your other lesson folders).
Open the folder in VS Code: File → Open Folder… (or run code lesson-04 from a terminal).
Create files: index.html, styles.css, app.js.

Starter HTML (copy/paste)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lesson 4 — VS Code Setup</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>VS Code is ready!</h1>
  <p>Live Server + Prettier installed.</p>
  <button id="ping">Ping Console</button>
  <script src="app.js" defer></script>
</body>
</html>

Starter CSS

body{font-family:system-ui;margin:1.25rem;line-height:1.6}
button{padding:.5rem .75rem;border:1px solid #ccc;border-radius:.5rem;cursor:pointer}

Starter JS

document.getElementById('ping').addEventListener('click', () => {
  console.log('VS Code ping ok!');
  alert('Hello from Lesson 4!');
});

Part 4 — Extensions: Live Server + Prettier

Install “Live Server”

Open Extensions view (Ctrl/Cmd + Shift + X).
Search Live Server and install.
Open index.html, then click Go Live (Status Bar).

Result: Your browser opens and auto-refreshes whenever you save.

Install “Prettier”

In Extensions, search Prettier - Code formatter and install.
Open Settings and set Editor: Default Formatter → Prettier.
Enable Editor: Format On Save.

Result: Your HTML/JS/CSS will auto-format on save—clean and consistent.

Part 5 — Core Settings to Toggle

Files: Auto Save → afterDelay
Editor: Format On Save → On
Editor: Word Wrap → On (optional)
Editor: Tab Size → 2 (course default)
Default Formatter → Prettier

JSON (optional) — drop into settings.json

{
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Part 6 — Integrated Terminal

Open with View → Terminal (or Ctrl + `). It starts in your workspace folder.

# create a new lesson folder and open it
mkdir lesson-04 && cd lesson-04
code .

Tip: Keep the terminal docked at the bottom (Panel) so you can run commands without leaving VS Code.

Part 7 — Emmet Basics (built into VS Code)

Type ! + Tab → HTML boilerplate.
Type ul>li*3 + Tab → 3 list items inside a <ul>.
Type .card.profile + Tab → <div class="card profile"></div>.

Practice Tasks

Open lesson-04/index.html and start Live Server. Confirm your page updates when you save.
Break your formatting, then save; confirm Prettier fixes it.
Add a <nav> with two links using Emmet, then style it in styles.css.
Use the Command Palette to toggle word wrap and open settings.

Quick Quiz

What does the Command Palette do?
What’s the benefit of Format on Save with Prettier?
Which extension provides auto-refresh in your browser while you edit?
Where do you find the integrated Terminal in VS Code?

Sample answers

It lets you run any VS Code command by name.
Consistent, clean code formatting without manual effort.
Live Server.
In the Panel (View → Terminal or Ctrl + `).

Lesson 4 Dictionary

A
Activity Bar: Left-hand icon rail to switch VS Code views (Explorer, Search, SCM, Run, Extensions).
Auto Save: A setting that saves files automatically after a short delay.
C
Command Palette: Global launcher for VS Code commands (Ctrl/Cmd + Shift + P).
E
Editor: The main area where you edit files; supports tabs and split views.
Emmet: Abbreviation engine built into VS Code for fast HTML/CSS authoring.
Extension: A plugin that adds features to VS Code (e.g., Live Server, Prettier).
Explorer: The file tree view showing your workspace folders and files.
I
Integrated Terminal: A built-in terminal inside VS Code (View → Terminal or Ctrl + `).
L
Live Server: An extension that serves your page locally and auto-reloads on save.
P
Panel: Bottom region with Problems, Output, Terminal, and Debug Console.
Prettier: A code formatter used to enforce consistent style across files.
S
Settings: VS Code preferences accessible via UI or settings.json.
Status Bar: The bottom bar showing language mode, formatter, line endings, and more.
T
Tab Size: Number of spaces that a tab represents (course default: 2).
V
Visual Studio Code (VS Code): A cross-platform code editor used throughout this course.
W
Workspace: Your project folder(s) opened in VS Code; holds settings and files for the lesson.
Word Wrap: A setting that visually wraps long lines instead of horizontal scrolling.