Claude Code Tutorial: Your First Project in 30 Minutes
A Claude Code tutorial for beginners: build one small, real web page in 30 minutes. Plan it, build it, check it, change it, and save it with Git.
This Claude Code tutorial gets you from an empty folder to a finished web page in 30 minutes. You’ll plan it, build it, check it in your browser, change it, and save it. Nothing more. That’s on purpose, and the first half of this post explains why.
You’ll need Claude Code installed and a paid plan. If you haven’t done that yet, start with How to Install Claude Code.
How do you actually learn a tool like this?
By using it. You can read about Claude Code for a week and still freeze at the empty prompt.
Ten minutes of typing teaches you more than an hour of reading. You agree with that already. Everyone who’s learned anything does.
What happens to big first projects?
They stall. You ask for a whole online store on day one. Claude Code builds a lot of it. Then something breaks, you don’t know where, and you stop.
A small project finishes. And a finished project teaches you the whole loop: ask, build, check, fix, save.
Why should it be something real?
Because you check real things properly. Practice on a throwaway task and you skim the result. Build something you’ll actually use and you notice every wrong word.
That checking is the skill you’re really learning.
Why does checking matter so much?
Claude Code will tell you a job is done. Often it is. Sometimes a link goes nowhere or a section is missing.
“Done” from Claude isn’t proof. Opening the page and looking at it is. I covered this in What Is Claude Code?: it’s one of the two habits that matter most.
So what should your first project be?
Put those together. You learn by doing. Small projects finish. Real projects get checked. Checking is the skill.
That leaves one sensible first project: a single page about you, built in one sitting, checked in your browser, and saved. Your name, what you do, a few links, a way to reach you.
It’s small enough to finish in 30 minutes. It’s real enough that you’ll care if it’s wrong.
The 30-minute plan
| Minutes | Step | What you type |
|---|---|---|
| 0–5 | Open a project folder | claude |
| 5–10 | Plan before building | /plan and your request |
| 10–20 | Build it and look at it | Approve the plan, then open the page |
| 20–25 | Change something | A plain-English change |
| 25–30 | Save your work | Ask Claude Code to commit with Git |
Minutes 0–5: open a project folder
Make a new, empty folder called my-page. Open your terminal in that folder and type:
claude
Claude Code starts and shows the folder it’s working in. That folder is its whole world for this session.
Minutes 5–10: plan before you build
Type /plan, a space, then your request. For example:
/plan build a one-page website about me. One HTML file, no frameworks. My name, one line on what I do, three links, and my email address.
In plan mode, Claude Code reads and proposes. It doesn’t edit anything until you approve the plan.
Read the plan. Is anything missing? Say so now. Fixing a plan costs nothing. Fixing a built page costs time.
Minutes 10–20: build it and look at it
Approve the plan. Claude Code writes the file. Depending on your settings, it may ask before it creates the file; say yes.
Now open the folder and double-click the HTML file. It opens in your browser.
Look at every line. Click every link. This is the step most beginners skip, so don’t.
Minutes 20–25: change something
Ask for a change the way you’d ask a person:
make the heading bigger and change the background to light grey
Refresh the browser and check it.
Don’t like the change? Press Esc twice on an empty prompt, or type /rewind. Pick the point before the change and restore the code. Claude Code keeps a checkpoint every time you send a prompt.
Want to stop Claude mid-task? Press Esc once. It stops and keeps what it has done so far.
Minutes 25–30: save your work
Checkpoints are for quick undo inside a session. For real history you want Git. This step needs Git on your computer; on Windows, that’s Git for Windows.
Type:
set up git in this folder and commit my changes with a descriptive message
Now your page is saved, with a message saying what changed. Type /exit when you’re done.
Tomorrow, open the same folder and type claude -c. That continues your last conversation in that folder.
What did you just learn?
The whole loop. Plan, build, check, change, undo, save. Every bigger project is that loop, repeated.
Your next project can be a little bigger. Then a little bigger again. When you start repeating the same instructions, turn them into a skill: here’s how Claude Code skills work.
Frequently asked questions
Do I need to know how to code for this Claude Code tutorial? No. You describe what you want in plain English. You do need to check the result yourself, in your browser.
What’s a good first project in Claude Code? Something small and real that you can finish in one sitting. A one-page site about you works well because you’ll notice anything wrong.
How do I undo something Claude Code did?
Press Esc twice on an empty prompt, or type /rewind, and restore the code to an earlier point. For permanent history, commit your work with Git.
Can I follow this tutorial on the Pro plan? Yes. Pro is $20 a month, or $17 a month billed yearly, and it includes Claude Code. See what each plan costs.
Want to see the same loop on a full website? I made a free video that builds a real site with Claude Code, start to finish. Watch the free video.