1.3

Building Something Small

Creating your first real project with Claude Code

🏗️ Hands-On ⏱️ ~20 minutes

You've talked to Claude Code. Now let's build something you can actually see—a simple webpage. This exercise will show you the full loop: asking for something, reviewing it, and iterating.

🎯 What We're Building

A personal "Hello World" page. Nothing fancy—just an HTML file that you can open in a browser. The goal isn't the page itself; it's experiencing the workflow.

🏗️

Project Starter Kit

3 simple project ideas with full prompts to copy and paste

📄 Preview PDF
Download PDF

🚀 Complete Project Walkthrough

Follow these steps exactly—don't skip ahead. Each step builds on the previous one.

🎯 Activity: Build Your First Webpage

Create a project folder
In Terminal, run:
cd ~/Documents/Projects
mkdir hello-world
cd hello-world
This creates and navigates to your new project folder
Start Claude Code
Run: claude
You should see Claude Code start up with a prompt waiting
Request your webpage
Copy and paste this prompt (or write your own):
Create a simple HTML page called index.html. It should have: - A title that says "Hello from Claude Code" - A heading with my name (use "Your Name" as a placeholder) - A short paragraph introducing myself - A nice, clean style (centered, with a pleasant font and subtle background color)
Press Enter to send the prompt
Review Claude's proposal
Claude will show you the HTML code it wants to create. Read through it:
• Does it have all the elements you requested?
• Do you like the styling?
• Want any changes?
If it looks good, type yes or press Enter. If not, say what to change.
Approve the creation
Type: yes
Claude will create index.html and confirm it's done
Open in your browser
Ask Claude: How do I open this in my browser?
Or just run: open index.html
Your default browser should open showing your webpage!
Make your first change
In Claude Code, request: Add a list of three hobbies to the page
Claude will show the changes, you approve, then refresh your browser to see the update
Experiment with more changes
Try these prompts (one at a time):
• "Change the background color to light gray"
• "Add a footer with today's date"
• "Make the heading navy blue"
After each change, refresh your browser to see it
Ask a learning question
Request: Explain the CSS in this file. What does each part do?
Claude will break down the styling for you—this is learning while building
Exit and verify
Type: /exit
Open Finder, navigate to Documents/Projects/hello-world
You'll see index.html—a real file you can double-click or edit

✅ Success Check

You'll know you've got this when: you have an HTML file that opens in a browser, displays your content with styling, and you made at least 3 iterative changes to it through Claude Code.

✨ You Just Built Something

That's a real HTML file. You could upload it to a web server and it would work. You didn't write the code—but you directed its creation, reviewed it, and now it exists. This is the power of AI-assisted development.

🔄 Understanding the Workflow

This exercise demonstrated the core Claude Code workflow:

The Build-Review-Iterate Loop

Request: Tell Claude what you want in clear, specific language
Review: Claude shows you what it will do before doing it
Approve: You say yes, no, or request modifications
Execute: Claude makes the changes
Verify: You see the results (refresh browser, check files)
Iterate: Request more changes, ask questions, refine

🎓 Learning While Building

Claude Code isn't just for building—it's for learning. Here are questions you can ask about your webpage:

📚 Educational Prompts

Understanding the code:
"Explain what the CSS does in this file"
"What's the purpose of the <head> section?"

Exploring alternatives:
"What other ways could I center this content?"
"What would happen if I removed the CSS?"

Best practices:
"Is this following HTML best practices?"
"How could I make this more accessible?"

⚡ Pro Tip: The ID Advantage

As an instructional designer, you're used to asking clarifying questions and requesting explanations. Do the same with Claude Code. "Why did you do it that way?" and "What would happen if we changed X?" are great questions that help you learn the underlying concepts.

🚀 Challenge Extensions

If you want more practice, try these extensions:

Challenge 1: Add an Image

Ask Claude to add an image placeholder or icon to your page. Learn about the <img> tag and how images work in HTML.

Challenge 2: Make it Responsive

Request: "Make this page look good on mobile devices." See what Claude does to make the page responsive.

Challenge 3: Add Interactivity

Ask: "Add a button that shows an alert when clicked." This introduces you to JavaScript without needing to learn it first.

Challenge 4: Create Multiple Pages

Request: "Create an about.html page and link to it from index.html." Learn about navigation and multiple-page sites.

📋 What You Learned

In this exercise, you:

  • Created a project folder and started Claude Code in it
  • Described what you wanted and let Claude build it
  • Reviewed Claude's work before approving
  • Iterated with follow-up requests
  • Saw real results in your browser
  • Asked questions to understand the code
  • Experienced the complete build-review-iterate loop

This is the core workflow. Everything else—whether you're building apps, processing data, or automating tasks—builds on this foundation.

A realization:

You just built a webpage without writing any HTML yourself. But more importantly, you could have written it—Claude showed you exactly what it was doing. The AI isn't hiding the work; it's doing it alongside you, teaching you as it goes.

📚 Resources & Further Reading

💭 Pause & Reflect

Before moving on, take a moment to consider:

  • What surprised you most about this building process?
  • At what point did you feel like you understood what was happening?
  • What would you want to build next with Claude Code?
  • How does seeing the code help (or not help) your understanding?

🎯 First Build Complete!

You've created something real. Next, let's understand how this differs from chatting with Claude in a browser.

Topic 1.3 Complete • Up Next: 1.4 – Claude.ai vs Claude Code