Module 4

Building Your First Real Project

Time to build something real from scratch. You'll go from an empty folder to a live website in a single conversation — and learn the workflow that professional developers use with Claude Code every day.

📖 10 min 🌱 Beginner ✎ 2 exercises
Clawd

Start from Nothing

The most magical part of Claude Code is building something from an empty folder. No templates, no tutorials, no boilerplate — just a blank slate and a conversation.

Let’s build a personal portfolio website. Here’s how you start:

Terminal

$ mkdir ~/my-portfolio $ cd ~/my-portfolio $ claude

Welcome to Claude Code v2.x.x Type your message to get started…

That’s it. An empty folder and Claude. Now tell it what you want:

build an entire project from scratch ↓
Build me a personal portfolio website. I want a hero section with my name and a short tagline, an 'About Me' section, a projects grid with 4 placeholder cards, and a contact section with my email. Use a modern dark theme with smooth scroll. Make it a single HTML file with embedded CSS so it's easy to open.

Watch what happens. Claude will create the file, write all the HTML and CSS, and you’ll have a working website in under a minute. Open the file in your browser and see your portfolio.

🔑 Key Concept

You don’t need to know what HTML or CSS means. Claude handles all the technical details. Your job is to describe what you want it to look like and what it should do. Think of yourself as the client, not the builder.

Iterate, Don’t Start Over

Here’s what separates Claude Code from other AI tools: you don’t start a new conversation every time you want a change. You just keep talking.

Built the portfolio but want to tweak it? Just say so:

iterate on what you already have ↓
Now add a projects section with 6 cards in a 3-column grid. Each card should have a project title, a short description, a tech stack list, and a 'View Project' button. Use subtle hover animations on the cards.

Claude remembers the entire conversation. It knows what file it created, what styles it used, and what your site looks like. Each follow-up prompt makes the project better — like an artist adding layers to a painting.

Here are more follow-up prompts you might use during a real build session:

  • “Change the color scheme to navy blue and gold”
  • “The hero section feels too short — make it full-screen height”
  • “Add a dark mode toggle in the top right corner”
  • “The mobile layout is broken — fix the responsive design”
Clawd
Pro Tip

Think of Claude Code like a conversation with a designer. You wouldn’t hand them a complete blueprint on day one. You’d say “build this,” look at it, then say “change that.” That back-and-forth is the natural workflow.

Test in Your Browser

After Claude creates or modifies files, you’ll want to see the result. For simple HTML projects, just open the file:

Terminal

$ open index.html

(browser opens with your site)

Or ask Claude to do it for you:

let Claude open your project ↓
Open the site in my browser so I can see how it looks.

For more complex projects with a development server, Claude will typically start it for you:

Terminal

> Start the development server so I can preview the site

Starting dev server… Server running at http://localhost:3000 Open that URL in your browser to see the site.
Clawd
Pro Tip

When you spot something wrong in the browser, describe what you see. “The navigation links overlap on mobile” or “the footer is floating in the middle of the page” — Claude can fix visual bugs from your description alone.

Save Your Work with Git

Git is how developers save snapshots of their projects. Think of it like saving different versions of a Word document — except Git keeps every version forever and lets you go back to any of them.

The good news? You don’t need to learn Git. Claude handles it for you.

save your work — Claude handles the git details ↓
Initialize a git repository, add all my files, and commit with the message 'Initial portfolio site with hero, about, projects, and contact sections'.

Here’s what that looks like:

Terminal

> Initialize a git repo and commit my files

Running: git init Initialized empty Git repository Running: git add . Running: git commit -m “Initial portfolio site” 1 file changed, 187 insertions(+) Your work is saved!

After more changes, commit again:

  • “Commit my changes with a message describing what we just added”
  • “What files have I changed since my last commit?”
  • “Undo the last change — I liked the previous version better”
🔑 Key Concept

A “commit” is a save point. Every time you commit, Git takes a snapshot of your entire project. If you mess something up later, you can always go back to any previous commit. Claude makes committing as easy as saying “save my work.”

Create a Pull Request on GitHub

If you want to share your project or collaborate with others, Claude can push your code to GitHub and create a pull request (PR). A pull request is just a way to propose changes and get feedback before merging them in.

publish to GitHub in one sentence ↓
Create a new branch called 'add-blog-section', push it to GitHub, and create a pull request with a description of the changes we made.

Claude will handle the branch creation, pushing, and PR creation. If you’ve connected your GitHub account, it all works seamlessly. If not, Claude will walk you through the setup.

⚠ Heads Up

To push code to GitHub, you’ll need a GitHub account and either SSH keys or a personal access token set up. If you haven’t done this before, ask Claude: “Help me set up Git and connect it to my GitHub account.” It will walk you through every step.

The Power of Natural Language

Let’s step back and appreciate what just happened. You built a portfolio website, styled it, iterated on the design, saved it with Git, and prepared it for GitHub — all by having a conversation in English. No Googling “how to center a div.” No watching a 45-minute tutorial. No copying code from Stack Overflow.

This is the new workflow:

  1. Describe what you want
  2. Review what Claude built
  3. Refine with follow-up instructions
  4. Save with a commit
  5. Repeat

Every project follows this loop, whether you’re building a personal site, a business dashboard, a mobile app, or an internal tool. The skills you just learned scale to anything.

Clawd
Pro Tip

If you ever get stuck or confused, just tell Claude: “I’m lost. Where are we? What have we built so far, and what should we do next?” Claude will summarize the current state and suggest next steps. You always have a co-pilot.

Try It Yourself

✎ Exercise 1

Build a Project from Scratch

  1. Create a new empty folder: mkdir ~/my-first-project && cd ~/my-first-project
  2. Start Claude Code: claude
  3. Send this prompt: “Build me a recipe collection website. I want a homepage showing recipe cards in a grid, and when I click a card it expands to show the full recipe with ingredients and instructions. Include at least 4 sample recipes. Use a warm, kitchen-friendly design.”
  4. Open the result in your browser and look at it
  5. Send at least 3 follow-up prompts to improve the design (change colors, add a search bar, fix anything that looks off)
  6. When you’re happy, ask Claude: “Initialize a git repository and commit all my work.”
✎ Exercise 2

The Full Iterate Loop

  1. Continue from Exercise 1 (or start a new project)
  2. Ask Claude to add a new feature: “Add a ‘Favorites’ feature. I should be able to click a heart icon on any recipe to save it, and there should be a ‘My Favorites’ page that shows only my saved recipes. Use localStorage to persist favorites.”
  3. Test it in your browser — click the hearts, check the favorites page
  4. If something doesn’t work, describe the problem to Claude and let it fix it
  5. When it’s working, ask Claude: “Commit these changes with a message describing the favorites feature”
  6. You just completed the full loop: describe, review, refine, save
Clawd

Ready for Module 5?

The Memory System is up next.

Continue →