Your Code Editor

You could write a website in Notepad. Technically, it works — Notepad saves text, and HTML is just text.

But nobody does. The reason is the same reason a carpenter uses a proper workshop instead of a kitchen table: the right environment makes you faster, catches your mistakes, and honestly just feels better to work in.

That environment, for a programmer, is a code editor — and we're going to set one up that you'll actually enjoy using.

What Is an IDE?

An IDE (Integrated Development Environment) is a code editor with superpowers. It combines the text editor you write code in with tools that help you understand, navigate, and debug it — all in one window.

You don't need to memorise the acronym. What matters is the idea: instead of switching between ten different apps, everything you need is in one place.

Why Not Just Use Notepad?

Open Notepad and paste some HTML. Everything looks the same — same colour, same font, wall of text. There's nothing to help your eye find where one section ends and another begins.

Now open the same HTML in a real code editor. Suddenly:

• Tags are one colour, attributes are another, and values are another still
• The editor notices when you forget a closing tag
• Typing < suggests the tag you probably want next
• Saving auto-fixes your indentation

The code hasn't changed. The experience of writing it has.

VS Code — The Editor We'll Use

Visual Studio Code (VS Code) is made by Microsoft and is the most widely used code editor in the world. It's free, runs on Windows, Mac, and Linux, and has an enormous library of add-ons.

Download VS Code

A Tour of the VS Code Interface

When you first open VS Code, you'll see five main areas:

┌─────────────────────────────────────────────────┐
│  Activity Bar  │  Explorer / Sidebar             │
│  (icons on     │  (your project files)           │
│   the left)    ├─────────────────────────────────│
│                │  Editor                         │
│                │  (where you write code)         │
│                ├─────────────────────────────────│
│                │  Terminal (at the bottom)       │
└─────────────────────────────────────────────────┘

The Niceties — What Makes VS Code Worth Using

Syntax Highlighting

Code is colour-coded automatically. HTML tags appear in one colour, attribute names in another, and values in another. CSS properties and JavaScript keywords each have their own colour.

This isn't decoration. Your eye learns to scan for colours before reading words. A missing quote or a typo in a tag name stands out instantly because the colours suddenly go wrong.

IntelliSense (Autocomplete)

Start typing an HTML tag or CSS property and VS Code suggests completions. Press Tab or Enter to accept.

Type div → press Tab → VS Code writes <div></div> and puts your cursor in the middle. Type an opening <h → a dropdown lists h1 through h6. This isn't just faster — it also prevents typos.

Auto-closing Tags

Type <section> and VS Code automatically writes the closing </section> for you. This alone saves beginners hours of debugging.

Error Squiggles

Red and yellow underlines appear under code that looks wrong — a missing attribute, an unknown property, mismatched brackets. You'll see the problem before you even run the page.

Multi-cursor Editing

Hold Alt (or Option on Mac) and click in multiple places. Now everything you type appears in all of those places at once. Useful for renaming things that appear multiple times.

Live Server

The Live Server extension (see below) serves your HTML files in a browser and auto-refreshes every time you save. You save, the browser updates instantly — no manual refresh needed.

Extensions — Superpowers You Add Yourself

Click the Extensions icon in the Activity Bar (it looks like four squares, one slightly separated). Search and install anything here.

Extensions worth installing for web dev:

To install: click Extensions → search the name → click Install.

Keyboard Shortcuts Worth Learning Now

You don't need to memorise all of these. Learn one per day and they'll become muscle memory fast.

Make It Yours — Changing Your Theme

You're going to stare at this editor for a long time. It should look the way you want it to look.

VS Code themes change the background colour, the syntax colours, and the overall feel of the editor. There are thousands of them, and switching takes about 30 seconds.

Try a Built-in Theme First

1. Open the Command Palette: Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac)
2. Type Color Theme and select Preferences: Color Theme
3. Use the arrow keys to preview themes live — the editor updates as you scroll
4. Press Enter to apply the one you want

VS Code ships with several built-in themes: Dark+, Light+, Monokai, Solarized, and a few others.

Install a Theme from the Marketplace

The real selection is in the Extensions marketplace. Here are some popular picks to try:

To install any of these: Extensions → search the name → Install → then follow the Change Theme steps above to activate it.

There is no wrong answer. A theme that makes you happy to open VS Code is the right theme.

File Icon Themes

While you're at it, you can also install an icon theme — this gives each file type in the Explorer its own icon (an orange flame for HTML, a blue shield for CSS, etc.) so you can spot file types at a glance.

A popular one: search Material Icon Theme in Extensions and install it.

Other Editors That Exist

VS Code is the standard, but you'll hear about others:

Start with VS Code. If you're still coding in a few years, you'll know enough to have opinions about the others.