Setting Up Your Editor and Browser DevTools

Before you write a single tag, it pays to spend ten minutes setting up the two tools you will use in every HTML lesson from here on: a code editor and your browser's built-in DevTools. A good setup turns "edit, save, alt-tab, refresh, look" into a fast, almost invisible loop, which matters enormously when you are learning by trial and error.

This lesson does not assume any prior tooling experience. It walks through installing an editor, adding one extension that removes the need to manually refresh your browser, and opening the DevTools panel that lets you inspect and debug the page you just built.

Why it matters

Every web developer spends the day in two tools: an editor and the browser's DevTools. DevTools shows the page as the browser actually built it, the styles that apply to an element, and the errors your script raised. Learning to open the Console and the Elements panel now saves hours of guessing later.

Choosing and Configuring an Editor

Visual Studio Code (VS Code) is the de facto standard code editor for web development: it is free, cross-platform, has excellent HTML/CSS/JavaScript support out of the box, and has a massive extension ecosystem. Install it, then add the "Live Server" extension.

• Download VS Code from the official site and install it for your operating system.
• Open the Extensions panel (the square-icon sidebar) and search for "Live Server" by Ritwick Dey — install it.
• Open a folder (not just a single file) in VS Code so relative links between your HTML, CSS, and image files resolve correctly.
• Right-click any .html file in the editor and choose "Open with Live Server" to launch it in your default browser on a local address like http://127.0.0.1:5500.

The Edit-Save-Refresh Workflow

With Live Server running, the workflow becomes: edit your HTML file, save it (Ctrl+S / Cmd+S), and the browser tab reloads automatically to show your change — no manual refresh needed. This tight feedback loop is what makes learning HTML by experimentation practical instead of tedious. Without Live Server you would need to double-click the HTML file to open it as a plain file:// URL and manually refresh after every change, which still works for very simple pages but breaks down once you add features that expect a real server (like fetch requests).

Opening and Using Browser DevTools

Every modern browser (Chrome, Firefox, Edge, Safari) ships with a DevTools panel. Open it with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac), or by right-clicking any element on the page and choosing "Inspect."

• Elements tab — shows the live DOM tree and the exact CSS applied to whatever element you select; you can edit HTML/CSS here temporarily to experiment without touching your files.
• Console tab — shows errors (like a broken image path or a JavaScript exception) and lets you run JavaScript directly against the loaded page.
• Network tab — shows every file the page requested (HTML, CSS, images, scripts) along with status codes, so you can immediately spot a 404 for a mistyped filename.

Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Setup Check</title>
</head>
<body>
  <h1 id="greeting">Hello, Webnest!</h1>
  <p>If Live Server is working, editing this text and saving should refresh the page automatically.</p>
</body>
</html>

The browser opens a page showing a heading "Hello, Webnest!" followed by a paragraph. Editing the heading text and saving the file causes the browser tab to reload automatically within about a second, without you switching windows or pressing refresh.

// Typed directly into the DevTools Console tab, not saved in a file
document.getElementById('greeting').style.color = 'crimson';

The heading text "Hello, Webnest!" immediately turns crimson red in the rendered page, and the Console echoes the string "crimson" as the return value of the assignment — confirming DevTools has live access to the page.

Exercise

The script should change the heading to DevTools works, but nothing happens. Run the page, open the Console in DevTools (or the playground's console) and read the error. Then fix the one mistake in the markup.

Expected result: the heading on the page reads DevTools works.

<h1 id="tittle">Hello</h1>

<script>
  document.getElementById("title").textContent = "DevTools works";
</script>

<h1 id="title">Hello</h1>

<script>
  document.getElementById("title").textContent = "DevTools works";
</script>

Quick quiz

Interview questions