Lesson 01 — How the Web Works 🌐
In the last lesson (lessons/00-start-here.md) you toured the repo. Nice work. Now let’s understand what a web page actually is, before you build one.
Every web page you have ever seen — YouTube, a game site, your school portal — is made of just three parts working together. Once you can spot those three parts, the whole web stops feeling like magic and starts feeling like something you can build.
Still no typing today. Just one idea at a time.
The house analogy
The easiest way to remember the three parts is to picture building a house.
-
HTML is the structure. Like the walls, floors, and rooms of a house — the frame that holds everything in place. HTML (short for “HyperText Markup Language,” but you do not need to memorize that) is the structure of a page: the headings, the paragraphs, the buttons. It decides what is on the page.
-
CSS is the paint and furniture. They decide how the house looks: the colors, the style, whether it feels plain or bold. CSS decides how the page looks: the colors, the fonts, the spacing. Same house, a whole new look.
-
JavaScript is the electricity. The wiring makes things happen when you flip a switch. JavaScript makes the page do things. When you click a button and something happens, that is JavaScript.
Notice the order. First you build the structure. Then you paint and furnish it. Then you wire it up so things work. That is exactly the order you will build in.
Quick reference table
| Part | House analogy | Its job | Example |
|---|---|---|---|
| HTML | Structure 🏗️ | Structure: what is on the page | A heading that says “Hello” |
| CSS | Paint & furniture 🎨 | Style: how it looks | Making that heading blue |
| JavaScript | Electricity ⚡ | Behavior: what it does | A button that shows a message when clicked |
Keep this table in your back pocket. For the rest of these lessons, whenever you look at a page, you can quietly ask yourself: “Is this structure, style, or wiring?”
Your task: see all three at once
Let’s watch the three parts team up in one tiny example. You will not type anything yet. You are just going to look, and let MILO point out which part is which.
Copy this prompt and paste it to MILO. In Claude Code, that is the project chat. In any other assistant, the same prompt works — this one does not need the assistant to see your files.
Show me the smallest possible web page that uses all three: HTML, CSS,
and JavaScript together. Keep it tiny. Then label each part and tell me,
in plain words, whether it is the "structure" (HTML), the "style" (CSS),
or the "wiring" (JavaScript), and what that part is doing. I am a
complete beginner.
When MILO’s answer comes back, read it slowly and match each labeled part to the table above. You are not memorizing anything. You are just training your eye to spot structure, style, and wiring.
Fun connection: GetAdvice — MILO’s friendly face, the public app you’ll practice feedback on later — is built from these same three parts, just a lot more of them, stacked together. Every big app starts from exactly what you are looking at right now.
🎉 Milestone: you know what a web page is made of
You now know the secret that every web page shares: HTML is the structure, CSS is the style, JavaScript is the wiring. Structure, style, behavior. That one mental model will carry you through everything that comes next.
Next up: open lessons/02-your-first-web-page.md, where you will type your very first line of HTML and watch it appear in a real browser. This is where it gets fun. 🚀