Build Your First App with Claude Code

You don't need to know how to code. Claude Code can build a working web app from a plain English description. This guide walks you through it — from idea to something you can open in your browser.

Pick something small and useful

The best first project solves a small, real problem. Here are ideas that work well:

• A personal budget tracker
• A recipe organizer that scales ingredients
• A workout log
• A tip calculator that splits bills
• A countdown timer for an event
• A bookmarks page with your favorite links

For this guide, we'll build a personal expense tracker — an app where you log what you spend, see a running total, and filter by category. Simple, useful, and it covers the basics of how apps work.

1 Start Claude Code

Open your terminal and run the Docker command from the setup guide. Once you're in Claude Code, you'll see a prompt waiting for your instructions.

2 Describe what you want

Type something like this:

Build me a personal expense tracker as a single HTML page.
I want to:
- Add expenses with a name, amount, and category
- See a list of all my expenses
- See the total amount spent
- Filter by category
- Data should be saved in the browser so it persists
  when I close the tab
Make it look clean and modern with a dark theme.

That's it. Claude will start building. You'll see it creating files, writing code, and explaining what it's doing as it goes. Let it work.

3 Open it in your browser

When Claude is done, it'll have created an HTML file in your /projects folder (which is ~/claude-projects on your computer). Open it:

• Mac: open ~/claude-projects/index.html
• Windows: Double-click the file in claude-projects in your home folder
• Linux: xdg-open ~/claude-projects/index.html

You should see a working expense tracker in your browser.

4 Ask for changes

Don't like something? Just tell Claude. You can say things like:

• "Make the add button bigger"
• "Add a chart that shows spending by category"
• "Let me edit an expense after adding it"
• "Add a way to export my data as a spreadsheet"
• "The categories should be: food, transport, entertainment, bills, other"

Each time, Claude edits the code and you can refresh your browser to see the result. Go back and forth until it's exactly what you want.

Tips for getting good results

Be specific about what you want, not how to build it. Say "I want a button that clears all expenses and asks me to confirm first" rather than trying to describe code. Claude handles the how.

Start simple, then add features. Get the basic version working first. Then ask for one feature at a time. This gives much better results than describing everything upfront.

If something looks wrong, say so. "The total is showing at the bottom but I want it at the top" or "The font is too small on my phone" — Claude can fix visual issues just as well as functional ones.

Ask Claude to make it work on your phone. Say "Make this responsive so it works well on mobile." Then test it by opening the same file on your phone (send yourself the file, or ask Claude to start a dev server).

What to build next

Once you've built one thing, you'll realize how many small tools you can make for yourself:

• A daily journal with search
• A portfolio or personal website
• A meal planner that generates grocery lists
• A flashcard app for learning something new
• A simple invoicing tool for a side business
• A habit tracker with streaks

Each of these is a conversation. Describe what you want, let Claude build it, then refine it. No tutorials, no courses, no boilerplate — just you and a description of what would be useful to you.