Install the Tools

You need two things to write HTML: a code editor and a browser. This lesson walks through installing both and shows you the two browser tools you will use constantly.

Install VS Code

Visual Studio Code (VS Code) is a free code editor made by Microsoft. It works on Windows, macOS, and Linux.

Download and install it from code.visualstudio.com.

The Live Server extension

After installing VS Code, install the Live Server extension:

1. Open VS Code
2. Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X / Cmd+Shift+X)
3. Search for “Live Server” by Ritwick Dey
4. Click Install

Live Server lets you open your HTML file in a browser and see changes automatically every time you save — without manually refreshing the page. It is highly recommended but optional; you can also open HTML files directly from your file system.

Install a browser

Use any modern browser — Chrome, Edge, Firefox, or Safari. All of them have the developer tools you need. If you do not have a preference, Chrome or Firefox are common choices in web development tutorials.

Two must-know browser tools

These two tools will answer most of your “why is my page doing that?” questions throughout the course.

View Source

Right-click anywhere on a page and choose View Page Source. This shows you the raw HTML file exactly as the browser received it. Use it to inspect how real sites are structured.

DevTools — Elements tab

Press F12 (or right-click and choose Inspect) to open DevTools. The Elements tab shows the live page structure — the HTML as the browser has parsed and rendered it. You can click on any element to see its HTML and highlight it on the page.

DevTools is the single most useful debugging tool in web development. You will use it throughout this course and every course after it.

Exercise

1. Open your browser and navigate to any website.
2. Press F12 to open DevTools.
3. Click the Elements tab.
4. Click on a heading or paragraph on the page — it should highlight in the Elements panel.
5. Expand and collapse a few HTML nodes to see the structure.

You do not need to understand the HTML yet — just get comfortable opening and navigating DevTools.

Recap

• VS Code is the code editor you will use throughout this course. Download it from code.visualstudio.com.
• The Live Server extension automatically refreshes your browser when you save a file.
• Any modern browser works — Chrome, Edge, Firefox, and Safari all have developer tools.
• View Page Source shows the raw HTML file. DevTools → Elements shows the live parsed structure.

Lesson 03 creates your first HTML page.