Your first project with Claude Code

You'll build a small web page about something you care about, just by describing it. Then you'll change it, break it on purpose, and undo the damage. That loop (describe, check, change, undo) is the whole skill, and it's the same whether you're building a page or a tool for your job.

It takes about 20 minutes. You don't need to write any code.

What you're building

A one-page website about anything you like: your rec league, your dog, your side hustle, a trip you're planning. It's a single file called index.html that opens when you double-click it. No internet setup, and nothing new to install.

Along the way you'll learn what a web page actually is. Every web page is made of two main ingredients:

• HTML is the content and structure: the headings, paragraphs, lists, and links. It looks like this:

  HTMLCopy

  <h1>Tuesday Night Rec League</h1>
  <p>Next game: October 7</p>
  

• CSS is the look: colors, sizes, and spacing. It looks like this:

  CSSCopy

  h1 { color: navy; }
  

Your browser reads those instructions and draws the page. That's all a web page is.

There's a third ingredient, JavaScript, which makes pages do things, like buttons that react when you click them. We'll leave it out today on purpose and get to it in a later lesson.

1Step 1: Make a folder for this project

Open Terminal. Make a new folder inside your Projects folder, then go into it:

mkdir ~/Projects/first-page

cd ~/Projects/first-page

Your prompt should now end in first-page %.

Why a new folder? Claude works inside the folder you start it in. One project, one folder. It keeps each project's files together, and it keeps Claude away from everything else.

2Step 2: Start Claude

claude

If it asks whether you trust the files in this folder, say yes. The folder is empty, and it's yours.

3Step 3: Describe what you want, in a paragraph

This is the most important step, so here's the difference between a weak request and a strong one.

Weak:

make me a website

Claude will make something, but it has to guess almost everything.

Strong: a short paragraph that answers four questions: what it is, where it goes, what's in it, and what "done" looks like. Copy this, then replace the parts in [brackets] with your own thing:

Make me a single web page about [my Tuesday night rec league]. Use only HTML and CSS, no JavaScript, and put everything in one file called index.html so I can open it by double-clicking. Include [the schedule, the team names, and a big "next game" date at the top]. Keep it simple and easy to read on a phone. When you're done, tell me how to open it.

Paste it into Claude and press Return.

This is the real skill you're learning on this site. The clearer the paragraph, the better the result. It's the same skill a good manager uses to hand off work to a new hire.

4Step 4: Watch what it does

Claude shows you what it's doing as it works. You'll usually see:

• a short note about its plan,
• a line saying it's writing index.html,
• then a summary of what it made and how to open it.

If Claude stops and asks for permission (it will if you switched to Manual mode), it's showing you exactly what it wants to do. Choose Yes to let it go ahead.

It usually takes less than a minute.

5Step 5: Open your page

Open Finder, go to your Projects folder, open first-page, and double-click index.html. Your page opens in your web browser.

Or, in a new Terminal window (Claude is busy in the first one), run:

open ~/Projects/first-page/index.html

Take a look. It won't be perfect, and that's the point of the next step.

If you didn't give Claude real details (the actual team names, the real dates), it made some up so the page wouldn't be empty. That's normal. Give it the real ones in the next step.

6Step 6: Ask for a change, specifically

Go back to Claude and say what you want different. Be specific. Compare:

• Vague: "make it better"
• Specific: "Make the next-game date twice as big, and use our team colors, blue and gold."

Make the next-game date twice as big, and use our team colors, blue and gold.

When Claude finishes, go back to your browser and refresh the page (press Cmd + R). Browsers don't update on their own. You have to reload to see the new version.

Now give it your real details, the same way:

The real teams are [the Bears, the Owls, the Foxes, and the Hawks], and the next game is [Tuesday, October 7 at 7pm]. Update the page.

Keep going. Ask for two or three more changes: add a section, change the wording, rearrange things. Each request is a new round of the same loop.

7Step 7: Break it on purpose, then undo

This is the step that makes the rest of this site less scary. Ask for something ridiculous:

Redesign the whole page to look like a 1999 GeoCities website, with flashing colors and Comic Sans.

Refresh your browser and enjoy the chaos. Now undo it:

1. In Claude, make sure the typing box is empty, then press Esc twice.
2. A list of everything you've asked for appears. Use the arrow keys to pick the GeoCities request, and press Return.
3. Choose Restore code.

Refresh your browser. Your page is back the way it was before the GeoCities request.

Everything you ask for creates a save point you can go back to. Mistakes are cheap, so you can try things.

8Step 8: Look inside the file

You don't have to write code, but you should know what you're looking at. Ask Claude:

Explain what's in index.html like I've never coded. Point out which parts are HTML and which parts are CSS, and show me the line that sets the main color.

Then try changing something through what you just learned:

Change the main color to dark green. Tell me which line you changed.

Refresh the browser, and you'll see that line's effect. That's the connection between the code and the page.

9Step 9: Leave, and come back later

When you're done, type /exit.

Tomorrow, or next week, go back into the folder and pick up the same conversation, so Claude remembers what you were doing:

cd ~/Projects/first-page

claude -c

The -c means "continue". Plain claude starts a fresh conversation instead.

You just did the whole loop: describe, check, change, undo. Every project on this site is that same loop with a bigger idea. Next, pick a project to build this week, or use the same loop on a real problem at work.