Get comfortable with HTML as a tree of elements, view it in a browser, and inspect it with devtools.
index.html— a minimal page with a heading, an input, a button, and a list
In VS Code, right-click index.html → Open with Live Server. A browser tab opens at http://localhost:5500 (or similar) and auto-reloads on save.
If you're in Codespaces, Live Server will pop up a "open in browser" notification — accept it.
- Open browser devtools (F12), click the Elements tab. You're looking at the live DOM (Document Object Model) — the browser's in-memory tree of your HTML.
- Double-click any text in devtools and edit it. The page updates instantly. This is editing the DOM directly; refresh and your changes vanish.
- Add a new
<li>to the list inindex.html, save, watch the browser reload. - Try wrapping a word in
<strong>or<em>to see inline elements vs block elements.
- HTML is a tree of elements. Each element has a tag, optional attributes (
id="task-input"), and children. - Block elements (
div,ul,h1,p) stack vertically and take full width by default. - Inline elements (
span,a,strong,em) flow horizontally within a line of text. - IDs (
id="task-input") are unique per page. Classes (class="row") can repeat. JS and CSS use these to target elements.
No styling — it looks raw and ugly. No interactivity — the button does nothing. That's the next two parts.