Setting Up Your Environment

Opening a page

Double-click an .html file, or drag it onto a browser window. The address bar shows a file:/// URL. After editing the file, save it and press F5 (or Ctrl + R / Cmd + R) to reload.

A local server with live reload

Some features (JavaScript modules, fetch, some embeds) don't work from file:/// URLs. A small local server fixes that, and many reload the page automatically when you save:

• VS Code's Live Server or Live Preview extension.
• From a terminal, if you have Node.js: npx serve in the project folder.
• If you have PHP: php -S localhost:8000.

Developer tools

Every desktop browser has developer tools — press F12 or Ctrl + Shift + I (Cmd + Option + I on macOS):

• Elements / Inspector shows the live element tree (the DOM). Hover an element to highlight it on the page; edit text and attributes to experiment.
• Console shows errors and lets you run JavaScript.
• Network shows every file the page loaded.
• Lighthouse (Chrome) audits performance, accessibility, and SEO.
• The Accessibility panel shows how assistive technology sees an element.

View Source (Ctrl + U) shows the HTML exactly as the server sent it; the Elements panel shows the DOM after the browser parsed and repaired it — and after any JavaScript changed it.

A validator

The Nu Html Checker (validator.w3.org/nu) checks your markup against the standard. Paste code, upload a file, or enter a URL. It is also available as a Java program (vnu.jar) for checking files from the command line. Every example in this course was checked with it.

Formatting

Prettier (a VS Code extension or npx prettier --write index.html) formats HTML consistently. Our Code Beautifier does the same in the browser.