Orientation: from "I know JS" to "I can build a web page"

1. The promise

You already write JavaScript. By the end of this chapter you'll write JavaScript that moves a web page — clicks change content, forms validate, lists rebuild, data survives a refresh. You'll ship a working to-do app with zero frameworks. That's the artifact this chapter exists to produce.

2. The mental model

Ch 6 gave you a sharp knife. This chapter teaches you what to cook.

The kitchen is the browser. The ingredients are the elements on the page. The recipes are events. By the end, you're running your own restaurant — a working app, your code, your name on it.

Three new ideas appear in this chapter, and you'll meet each one early:

• The DOM (Document Object Model) is the tree of JavaScript objects the browser builds from the HTML on the page. When you change a DOM object, the page updates.
• An event is something the user (or the browser) does — a click, a keystroke, a page load — that JavaScript can react to.
• Storage is a place in the browser where the page can save data that survives the next page load.

You'll meet each in detail. For now, that's the vocabulary.

(DIAGRAM: the chapter as a single arc — Mermaid flowchart — 7.1 DOM → 7.2-7.6 manipulate → 7.7-7.9 events → 7.10 forms → 7.11 storage → 7.12 network → 7.13-7.14 security → 7.assign ship)

3. You do it, with me

Open VSCode. Create a new folder called todo-app somewhere you can find it. Inside that folder, create three empty files: index.html, styles.css, and app.js.

(SCREENSHOT: VSCode with the three starter files open in tabs — index.html, styles.css, app.js — full window — Live Server status bar visible at the bottom)

Right-click index.html in the VSCode Explorer panel and pick Open with Live Server. A browser tab opens on http://localhost:5500 (or similar). It's blank. That's fine — the files are empty.

Keep this project open for the whole chapter. Every unit drops one more piece into one of these three files. By unit 7.assign, the three files are a working app.

Here's the project you're going to build:

• Type a task, press Enter, see it appear.
• Click a task to mark it done.
• Click an X to delete it.
• Show "3 of 5 remaining" at the top.
• Refresh the page — the tasks are still there.

Zero frameworks. Three files. Yours from scratch.

(SCREENSHOT: the to-do app at the end of the chapter, running in Chrome — three tasks visible, one marked done — full window — the finished artifact you're building toward)

A short tour of the units:

• 7.1 — What the DOM actually is.
• 7.2–7.6 — Find, change, create, remove, and label elements.
• 7.7–7.9 — Events: how the browser talks to your JavaScript.
• 7.10 — Forms: read what the user typed.
• 7.11 — Storage: keep the data between visits.
• 7.12 — Fetch from JavaScript: call an API, render the result.
• 7.13–7.14 — CORS and the browser's security rules.
• 7.assign — Ship the to-do app.

(SCREENSHOT: the chapter unit list page on the Click to Career platform — full window — units 7.0 through 7.assign visible)

One policy for this chapter: you write every line by hand. You can ask Claude why something works after you wrote it. You don't ask Claude to write it for you. This chapter builds the mental model every later AI-assisted unit relies on. Skip the typing and you skip the learning.

This chapter doesn't teach React. It teaches the foundation React is built on. A student who skips this chapter and jumps to React learns React badly. Ch 10 is where React enters; this chapter is why React makes sense when it does.

4. What you should be seeing

A folder called todo-app with three empty files in it. Live Server running on a blank page. VSCode open with all three files in tabs. The browser tab and the editor on the same screen so you can flip between them.

If your screen doesn't look like that, stop and fix it before unit 7.1. The whole chapter assumes this setup.

5. Common stumbles

• You skip this orientation and jump to 7.1. You'll lose the throughline and rebuild it from scratch later. Read this one.
• You don't set up Live Server. You open index.html by double-clicking it, and the browser shows a file:// URL. CORS and storage behave weirdly on file://. Right-click in VSCode and use Live Server instead.
• You install the Live Server extension and don't see "Open with Live Server" in the right-click menu. Reload VSCode after install (Cmd+Shift+P → "Developer: Reload Window"). The menu item appears.

6. You should know