Claude Code is an AI that reads your files, writes code, and runs commands — right in your terminal. This guide shows you how to go from zero to building real things.
Five chapters that take you from "what even is this" to building real projects in the areas you actually care about.
AI, Claude, Claude Code, and this workspace explained clearly — no fluff, no dumbing down.
→Commands, prompts, approving actions, reading output — the practical mechanics of using Claude Code.
→Step-by-step: build a real personal homepage from scratch. 7 phases, 90 minutes, something you'll actually want to show.
→75+ project ideas across 15 hobbies — Japan, skiing, taekwondo, games, anime, coding, music, and more. Each with a sample prompt.
→How to break down problems, iterate, get unstuck, and go from vague idea to working thing.
→In this environment, open a terminal window. You're already in the right place.
Type cd /workspace and press Enter. This is your home base — all your projects live here.
Type claude and press Enter. Claude Code starts and waits for your instructions.
Describe your project in plain English. Be specific about what you want. Approve file changes as they come. That's it.
Let's cut through the hype and explain what you're actually dealing with.
Artificial intelligence, in the way people use that phrase today, mostly refers to large language models (LLMs). Here's the non-garbage explanation:
An LLM is a neural network — a mathematical system loosely inspired by how brains work — trained on an enormous amount of text. Billions of web pages, books, code repositories, papers, forums, documentation. During training, the model learned patterns: what words tend to follow other words, how code structures work, how to answer questions, how arguments are constructed.
When you type a prompt, the model generates a response token by token, each token being the statistically likely next piece of output given everything before it. This sounds mechanical, but at scale, it produces something that genuinely reasons, explains, debugs, creates, and surprises.
It's not "just autocomplete" — that dismissal misses how much emergent intelligence arises from doing autocomplete at trillion-parameter scale. But it's also not magic, and understanding roughly how it works makes you a better user.
Generating and editing code in almost any language. Explaining complex concepts. Spotting bugs. Adapting things to new requirements. Drafting and transforming text.
It can confidently state incorrect facts. It doesn't know things after its training cutoff. Complex multi-step math can trip it up. No persistent memory between sessions.
Claude is made by Anthropic, an AI safety company founded in 2021 by former OpenAI researchers. Anthropic's core thesis: powerful AI needs to be developed carefully, with safety baked in from the start.
Claude is trained with a technique called Constitutional AI — the model is trained not just to be helpful but to follow principles around honesty and avoiding harm. In practice, Claude will tell you when it doesn't know something, push back on harmful requests, and be direct with you even when the truth isn't what you want to hear.
Claude Code is a command-line interface (CLI) for Claude. Instead of chatting in a browser, you interact through a terminal. Why does that matter? Because Claude Code has tools the web interface doesn't:
When you tell Claude Code "build me a website," it doesn't just write HTML into the chat window. It creates actual files on disk, runs the code to check it works, and you end up with a real thing you can open in a browser.
You're working inside a Linux container — a self-contained computing environment. Think of it as a clean virtual computer that exists just for you.
Your physical computer
└── Container (Linux)
└── /workspace ← Your working directory
└── kids-guide/ ← You're reading this right now/workspace — this is where your projects liveStatic sites, interactive apps, personal pages, full web apps with backends and databases.
Browser-based games, terminal games, 2D games — Snake, Tetris, RPGs, whatever you imagine.
Automate tasks, process data, build your own command-line programs.
Charts, analysis, dashboards, visualization of anything you can measure.
Discord bots, automation scripts, backend services that power other things.
Physics, math, probability — visual interactive explorations of ideas.
Practical mechanics. No fluff.
cd /workspace
claudeThat's it. You'll see a prompt and Claude Code is ready. To start with a task already queued:
claude "build me a simple todo list app in HTML"| Command | What it does |
|---|---|
/exit | Quit Claude Code |
/clear | Reset conversation — good when switching tasks |
/help | See available commands |
Ctrl+C | Cancel current operation |
Use full sentences. Be specific. Give context.
| Instead of... | Try... |
|---|---|
| "make a website" | "Create an HTML personal homepage with my name, a short bio, a hobbies list, and a dark background with blue accent colors" |
| "fix this" | "This crashes with 'KeyError: username' on line 47. Here's the traceback: [paste it]. What's wrong?" |
| "add a feature" | "Add a search bar that filters the item list in real-time as I type, using vanilla JavaScript" |
Tell Claude what level you're at: "I'm new to JavaScript — add comments explaining each part" or "I'm comfortable with Python but new to Flask." Calibrating gets you better explanations and better-suited code.
Claude Code asks for permission before doing anything significant. When it wants to create or modify a file:
◇ Create file: /workspace/my-project/index.html
→ 47 lines of HTML
[y] Yes [n] No [e] Edit [v] View [s] SkipFile creation/editing: usually safe. Package installs: approve if you know what it is. If you're ever unsure: type n and ask Claude to explain what it's trying to do and why.
When Claude edits a file, it shows what changed. Lines with + are added, - are removed. Scan these to confirm changes make sense.
Keep each project in its own folder: mkdir /workspace/my-anime-tracker
You'll understand your project better and learn faster. Ask Claude to explain anything you don't recognize.
One prompt per feature. Don't ask for features A, B, C, and D all at once. Add one thing, check it works, add the next.
git init, then commit whenever something works. You can always go back.
"Explain what this function does, line by line." Claude is great at explaining its own code.
/clear and start fresh with more contextLet's build something real. By the end of this, you'll have a personal homepage that you built with Claude Code — actual HTML, CSS, and JavaScript. It'll look good and it'll be yours.
Time: 45–90 minutes | Result: A multi-section personal website | You'll learn: HTML structure, CSS styling, JavaScript interactivity, how to iterate
mkdir /workspace/personal-site
cd /workspace/personal-site
claudePaste this into Claude Code:
Create a personal homepage for me. My name is [YOUR NAME].
I want the page to have:
- A header with my name and a tagline
- An "About Me" section with a short paragraph (placeholder text for now)
- A "Things I'm Into" section with 5 items
- A "Projects" section with 3 placeholder project cards
- A footer with the current year
Use dark mode — dark background (#0f0f0f), white text, and one accent color.
Clean and modern. No images yet.Approve the file creation. Then preview it:
python3 -m http.server 8080Visit http://localhost:8080 in a browser.
Update the homepage with my real info:
Name: [YOUR NAME]
Tagline: [something that describes you]
About Me: [2-3 sentences about yourself]
Things I'm Into: [your actual 5 interests]
Keep all the existing styling.Improve the visual design:
1. Subtle gradient background instead of flat black
2. Glowing effect on my name in the header
3. Project cards with a border and hover lift effect
4. Smooth scroll behavior
5. "Things I'm Into" as flex tags/chips instead of a plain list
6. Thin accent-colored border at top of page
Don't change the content — just improve how it looks.Update the Projects section with:
Project 1: [name], [description], [status: Complete/In Progress/Idea], [tech]
Project 2: [name], [description], [status], [tech]
Project 3: [name or "Coming Soon"], [description], [status], [TBD]
Each card should show: name, description, a status badge styled by status
(green=Complete, yellow=In Progress, blue=Idea), and tech tags.Add two features:
1. Dark/light mode toggle button in the top-right corner
- Default: dark mode
- Button shows 🌙 / ☀️ icon
- Smooth CSS transition on color switch
- Saves preference to localStorage
2. A simple "Get In Touch" section near the bottom with your
preferred contact method.
Vanilla JavaScript only.Make the page fully responsive for mobile (under 768px):
- Project cards stack vertically
- Slightly smaller font sizes
- Reduced padding
- Header stacks vertically
- Add a meta viewport tag if not presentFinal polish:
1. CSS animation on the header: name fades in with a slight upward slide on load
2. Gradient line as a horizontal rule between major sections
3. Proper <title> tag with my name
4. Review for any spacing/alignment inconsistencies and fix themcd /workspace/personal-site
git init
git add .
git commit -m "Personal homepage v1 - built with Claude Code"You described what you wanted in plain English. Claude wrote the code. You read the output and approved changes. You iterated — each prompt built on the last. You have a real project. That loop — describe, approve, iterate — is exactly how professionals work.
Filter by hobby. Each project includes what you'd build, what you'd learn, a difficulty level, and a sample prompt you can paste straight into Claude Code.
The code is the easy part. Claude Code handles the code. The hard part is learning to think in a way that turns vague ideas into real, working things.
Open an app and use features someone else decided to build. If it doesn't do what you want, you're stuck.
See a problem and think "I could build something for that." Don't wait for someone to make what you need. Make it.
The practical difference isn't talent. It's a habit of thinking. Builders ask: What problem is this solving? What's the simplest version that would be useful? What would I need to build this?
Start huge, drill down to tiny:
Big idea: "I want to track my ski season"
↓ What does that actually mean?
"Log each day and see stats at the end of the season"
↓ What data for one ski day?
"Date, resort, runs, conditions, best run"
↓ What's the minimum useful version?
"Just a form to log a day and a table to view past days"For any app, identify:
For a recipe app: Nouns — Recipe, Ingredient, Tag, Step. Verbs — Add, Edit, Delete, Search, Scale. Once you have those, you basically have the app's spec.
Professional developers don't build the final version first. They build rough → learn → improve. This is iteration, and it's the actual process.
Ugly, missing features, barely works. That's fine. This is the goal for day one.
Enough features to be useful to you. Still rough around the edges.
Clean, polished, no obvious bugs. This is your first "real" version.
Trying to jump straight to v1.0 on the first try. That's why people get stuck. Start at v0.1 and climb the ladder one step at a time.
With Claude Code, this maps to: one prompt at a time. "Add feature X." Check it. "Now add feature Y." Don't ask for everything at once.
Read the full thing — error type, line number, description, traceback. Paste the full error into Claude Code: "what does this mean and how do I fix it?"
Explain the problem out loud: "This function is supposed to do X. I call it with Y. I expect Z. Instead, W happens." The act of explaining often reveals the problem.
Bugs often live in the thing you were most certain about. Ask yourself: "What am I assuming that might not be true?"
If you've been stuck for 30+ minutes and the code is getting messier with each fix — stop. Delete that section and rebuild it. You'll do it better the second time, in a quarter of the time.
This component is a mess. Delete it and rebuild it from scratch.
This time I want it to [describe exactly what you need].Write: What problem does this solve? What's the most important feature? What's the minimum useful version?
Draw the screens or sections on paper. Even just labeled boxes. Forces you to answer "how do I get from screen A to screen B?"
What are the nouns? What fields does each have? Where does data come from?
Basic page + data storage + one action. No styling yet. Just make it work.
Get each feature working before making it look good. You'll change the design multiple times. The functionality barely changes.
Actually use your app for its real purpose. You'll notice what you forgot, what's awkward, what edge cases break it.
Clean up design, handle errors, add nice-to-haves. Then show someone — external feedback reveals what you can't see yourself.
"I'll start when I know exactly what I want." You'll never know until you've built something. Start now.
"While I'm adding X, I might as well add Y..." Finish X. Test X. Ship X. Then decide if Y matters.
"I'll finish this 12-hour course first." Build something small. Learn what you need when you need it.
"This is garbage compared to [existing app]." That app was built by a team over years. Compare your work to what you knew before.
Show your work. Build something real — even tiny — and show someone. GitHub, a link, showing a friend. Getting external reactions is the fastest way to improve.
One working project you shipped > ten impressive projects that never got finished.
Pick the smallest project that genuinely interests you — not the most impressive one. Open a terminal, cd /workspace, run claude, and say "Let's build [your thing]." Everything else comes from that.