Your first build: a web page in five minutes

Your mission

Build a personal web page (your own “player profile”) with Claude, open it in your browser, and level it up with a few follow-up requests. Total time: about five minutes of building and ten of understanding what just happened.

Why it’s worth it

The fastest way to understand Claude Code is to watch it build something you actually care about. A web page is perfect for a first build: it’s just a file, it opens in any browser, and you see the result instantly. No servers, no setup.

But the real skill here isn’t the page. It’s learning to read what Claude is doing as it works, so you can steer it. People who approve everything blindly end up with stuff they can’t explain or fix. People who understand the loop can hand Claude bigger and bigger jobs.

How Claude works: the loop

Every time you ask for something, Claude runs the same loop:

1. Look around. It reads files in your folder to understand what’s there.
2. Do something. It creates or edits files, or runs a command.
3. Check. It looks at the result, like an error message or a test, to see if it worked.
4. Repeat until it’s done, then it tells you what it did.

You can watch every step in your terminal as it happens. Lines starting with a dot, like ● Write(index.html), are Claude taking an action. Press Ctrl+O any time to see the full details of each step.

Build it

Open your terminal, go into your practice folder, and start Claude:

cd speedrun-lab
claude

(If you closed everything since the last lesson, you may need the full path to the folder, like cd Documents/speedrun-lab, depending on where you made it.)

1. Ask for the page. Paste this, then swap in your own details:

Make a single-file web page called index.html: a "player profile" for me.
My gamer tag is NovaByte, I'm into rhythm games and drawing, and my current
quest is learning to code. Dark background, one bright accent colour, a big
header with my tag, and three cards: Interests, Current Quest, High Scores
(make up fun placeholder scores). No external files or libraries.

What you’ll see: Claude says what it’s going to build, then asks to create index.html, showing you the code. You don’t need to understand every line. Skim it: does it mention your tag, your interests, three cards? Then choose Yes.

2. Open it. Ask Claude to open it for you:

Open index.html in my default browser.

What you’ll see: Claude asks to run a command (start index.html on Windows, open index.html on a Mac, xdg-open index.html on Linux). Approve it, and your page pops up in the browser.

Boom. That’s a real web page you made. Later in the course you’ll learn to put your projects online for anyone to see (Level 4 does it with your game).

3. Level it up. Now upgrade it, one change at a time. Try any of these, or your own ideas:

Add a glowing hover effect to the cards.

Add an XP bar under the header that fills to 35%, with the label "Level 7".

Make it look good on a phone too.

What you’ll see: each time, Claude edits the same file instead of starting over, because it remembers the whole conversation. Refresh the browser tab (F5, or Cmd+R on a Mac) after each change to see it.

4. Practise steering. Ask for something big, like “Add an animated starfield background”, and while Claude is working, press Esc. Then type: “Actually, make the stars static, no animation.”

What you’ll see: Claude stops where it was and continues with your new instruction. Nothing breaks. Interrupting early is a pro move: correcting one step costs seconds, untangling ten wrong ones costs minutes.

The permission prompt, decoded

When Claude wants to create a file or run a command, it may ask first. You’ll usually see:

• Yes: do it this once.
• Yes, and don’t ask again for this kind of thing: handy for safe stuff you’ll approve every time, like opening the page.
• No: don’t do it, and tell Claude what to do instead.

Whether Claude asks depends on your permission mode, shown at the bottom of the screen. New sessions usually start in auto mode, where safe things like editing files in your folder just happen and a built-in safety check reviews riskier actions. You’ll set this up properly in Level 5. For now: read what Claude is about to do, then decide.

When Claude gets confused

• The page looks nothing like you asked. Claude sometimes guesses when a request is vague. Be more specific about the one thing that’s off: “The cards should be in a row, not stacked.”
• Your change doesn’t show up. The browser is showing the old version: refresh the tab. If it still doesn’t change, ask Claude “Did you save the change to index.html?”
• Claude edited the wrong thing. It happens. Say exactly what went wrong (“You changed the header colour, I meant the card borders”). The next lesson shows how to undo anything in seconds.

Did it work?

• Your index.html profile page opens in the browser
• You made at least two follow-up changes and saw them after refreshing
• You interrupted Claude with Esc and redirected it
• You can explain the loop: look, act, check, repeat