Claude Code Tutorial for Beginners: Build Your First App, Step by Step
A start-to-finish Claude Code tutorial for complete beginners: set up a project folder, write a CLAUDE.md, plan before building, review changes, run the app, fix errors, commit with git, and avoid the mistakes most first-timers make.
This tutorial takes you from an empty folder to a working app with Claude Code — and, more importantly, teaches you a way of working you can repeat on every project. You don't need to know how to code. You do need about an hour and a paid Claude plan (Pro or higher) or an Anthropic API key.
We'll build a small reading list app: add books, mark them as read, and see them saved when you reload the page.
Step 0: Install Claude Code
Follow How to Install Claude Code for your system, then check it works:
claude --version
If the terminal is new to you, spend ten minutes with the terminal for complete beginners first. You'll need about four commands.
Step 1: Make a project folder
mkdir reading-list
cd reading-list
git init
claude
git init turns the folder into a git repository, so every change Claude makes can be reviewed and undone. (New to git? See Git and GitHub for beginners.) The last command starts Claude Code in this folder. It can only see and change files here.
Step 2: Describe the app — then ask for a plan, not code
Switch to plan mode by pressing Shift+Tab until the mode indicator shows plan. In plan mode Claude researches and proposes, but doesn't change files. Then type:
I want to build a simple reading list web app. I can add a book (title and author), see my list, mark a book as read, and delete it. The list should still be there after I reload the page. I'm a beginner and don't write code. Please suggest a simple tech stack, explain why in plain English, and propose a step-by-step plan. Keep it as simple as possible.
Read the plan. Ask questions about anything you don't understand — "what's a database and do I need one here?" is a perfectly good question. When you're happy, accept the plan. (More on plan mode.)
Why plan first? Because the most expensive mistake with AI coding tools is letting them build the wrong thing quickly. Five minutes of planning saves an hour of undoing.
Step 3: Create a CLAUDE.md
Ask Claude:
Create a CLAUDE.md file describing this project, the stack we chose, how to run it, and these rules: explain changes to me in plain English, keep things simple, and never delete files without asking.
CLAUDE.md is read at the start of every session, so Claude remembers your project and your preferences tomorrow. See how to write a CLAUDE.md that actually helps.
Step 4: Let it build — and watch
Now let Claude implement step one of the plan. It will ask permission before running commands or editing files, depending on your permission mode. As a beginner, read what it asks to do before saying yes. You don't need to understand every line; you're checking that it's doing what the plan said.
When it finishes a step, ask it to start the app and tell you the address to open — usually something like http://localhost:3000. (What's localhost?)
Step 5: Test it yourself
Open the app in your browser and try everything: add a book, mark it read, delete it, reload the page. Then try to break it: add a book with no title, add one with a 500-character title.
When something's wrong, tell Claude exactly what you did and what happened:
When I click "Mark as read" on the second book, the first one gets marked instead. Steps: add two books, click "Mark as read" on the second.
That's a good bug report, and it gets better fixes than "it's broken".
Step 6: Commit working versions
Every time something works, save a checkpoint:
Please commit this with a clear message.
If a later change goes wrong, you (or Claude) can go back to the last commit. Claude Code also has its own checkpoints — press Esc twice to rewind — but git commits are the permanent record.
Step 7: Add one feature at a time
Now extend it, one small request at a time:
- "Add a star rating from 1 to 5 for books I've read."
- "Let me filter the list to show only unread books."
- "Make it look good on my phone." (Responsive design basics)
Small requests are easier for Claude to get right and easier for you to check.
Mistakes almost every beginner makes
- Asking for everything at once. "Build me a full Goodreads clone" produces a large, fragile mess. Start tiny.
- Accepting everything without reading. You don't need to read the code, but read the plan and the summary.
- Never committing. Then one bad change can wreck an hour of good work.
- Fighting a loop. If Claude has tried to fix the same error three times, stop. Rewind, then describe the problem differently. See stuck in an AI fix loop?
- Letting one conversation run forever. When you switch to an unrelated task, use
/clearto start fresh. (/compact vs /clear)
What's next
Your app runs on your computer. To let other people use it, it needs to be online: a server, a database that isn't a file on your laptop, a domain and HTTPS. You built an app with AI — now what? walks through that step.
EasySpawn gives you a cloud server with Claude Code already on it, a database ready, and your app online at your own domain with HTTPS — so the tutorial above ends with a real, shareable link instead of localhost. See how it works or join the waitlist.
Related: What Is Claude Code? · How to Write Good Prompts for AI Coding Tools · How to Plan Your First App · Claude Code Slash Commands
Keep reading
Claude Code for Non-Developers: A Gentle Start
You don't need to be a programmer to get real work out of Claude Code. What it can do for founders, designers, marketers and analysts, the minimum terminal you need, safe habits, good first tasks, and when to ask a developer for help.
What Is Vercel? What It Does, What It Costs You, and When to Use Something Else
Vercel is a hosting platform built around frontend frameworks, especially Next.js: push to GitHub and your site is live. What it actually does, what serverless functions mean for your app, where the limits are, and when a regular server is a better fit.