Claude Code 101

Meet Bram. Bram runs a coffee bar and has a simple website. The site says: open until 5 pm. A month ago he changed his hours to 6 pm. The website still says 5 pm, because Bram cannot code, and the friend who built the site is on holiday.

Every day, someone stands in front of a closed door or misses the last hour of coffee. Over one line of text.

This course teaches you to fix that line yourself, in under a minute, by typing one sentence in plain language. The tool is called Claude Code. You say what you want, it makes the change, it tells you what it did, and you check the result.

The whole method is one small circle. You describe what you want. You let Claude do it. You check the result. Three steps, and you never touch a file yourself. This circle comes back in every single lesson.

Describe it → Let it do the work → Check it. This circle is the whole method. It comes back in every lesson.

The 5 pm bug, fixed live

Your turn to instruct

1. On my website it says we are open until 5 pm. That changed to 6 pm. Update it, and if the opening hours appear in more than one place, fix them all.Which part of this instruction makes sure no spot with the old time gets missed?"if the opening hours appear in more than one place, fix them all" (That clause sends Claude looking across the whole site, not just the one place you happen to know about. It turns a partial fix into a complete one.)
2. Claude Code: Replaced the phone number in the footer and on the contact page. Nothing else changed.You just read this reply. What do you do next?Open the site and look at the footer and the contact page (Checking is your half of the work, and it takes ten seconds. You say it, Claude does it, you look. That loop is the whole method.)

Which instruction can Claude Code act on immediately?

B · The concrete instruction. A gives nothing to grab onto. B names the place, the old value, and the new value. Concrete beats vague every time.

This line is on the site now. Wifi is just free these days, no request needed. Type the instruction that fixes it.

You want to fix one wrong or outdated line on your own coffee bar website by giving Claude Code one clear instruction that names what to change, where, and what to leave alone.

You can now:

- Name the three steps of the circle: describe it, let it do the work, check it. - Tell an instruction Claude can run from one it cannot: it names the place, the old, and the new.

Tomorrow Bram sets up the tool on his own computer. Ten minutes, once.

Today Bram sets up his tools. Ten minutes, once, and then never again. No coding, no configuration screens, just three short steps and a window that waits for you to type.

The terminal is just a window where you type to your computer instead of clicking. You open it, you install Claude Code one time, and you start it by typing claude. That is the whole setup.

1. Open the terminal: Mac: press cmd and space, type terminal, press enter. Windows: install WSL2 first (see the warning below). 2. Install: npm install -g @anthropic-ai/claude-code 3. Start: claude — you see a welcome screen. That is all.

Important

The very first start

Reading the window

1. $ claude command not found: claudeYou typed claude and the terminal answered with this. What does it most likely mean?The install did not finish, so the terminal does not know the word yet ("Command not found" means the terminal does not know that word yet. The install step is what teaches it. Nothing is broken.)

Which one is true?

B · The reality. It looks bare because it is old, but it is just a plain window where you type and read. No programming required.

Now you. Do the three steps for real, or if now is not the moment, put a concrete fifteen minutes in your calendar this week. When the welcome screen appears, paste it below and I will confirm you are set up.

1. Open the terminal. On Mac, press cmd and space, type terminal, press enter. On Windows, open your WSL2 terminal.
2. Install Claude Code. Run this line once.npm install -g @anthropic-ai/claude-code
3. Start it. Type claude and wait for the welcome screen to appear.claude

Does the pasted output show that Claude Code started with a welcome screen and is ready, and what is the one thing the learner should try next?

You can now:

- Name the three setup steps in order: open the terminal, install, start. - Say what the terminal is: a plain window, not programming.

Tomorrow Bram opens his own site for the first time, nervous about breaking it. He will learn that looking breaks nothing.

Bram opens Claude Code inside his website folder for the first time, and his hand hovers over the keyboard. What if he breaks something? Today he cannot. Looking breaks nothing, and that is the whole point of the first session.

A website is not magic. It is a folder with files in it, and Claude Code can see all of them. Some matter to your question, some do not. Here is what Claude sees when it opens Bram's site.

Bram's site folder (what Claude sees) index.html (the front page), contact.html, menu.html, photos/ (12 files), style.css (how everything looks), old-backup/ (Claude just ignores this)

A look around, and a question first

Why say it out loud

1. Tell me what is in this folder and what each file does. Change nothing.Which part of this instruction makes the session guaranteed safe, before Claude asks anything?"Change nothing" ("Change nothing" turns a look-around into a session that cannot touch a single file. That is exactly what you want on your very first try.)

Which one cannot possibly do any harm?

A · The look question. A only reads and reports. B would change things, so Claude would ask first, but A cannot harm anything at all.

You just started Claude here. This is the whole folder. Type a look-only question that changes nothing.

You want to understand what is in a project before you change anything, by asking Claude Code a look-only question that clearly forbids any change.

You can now:

- Say what a website is, technically: a folder with files. - Name when Claude asks permission: before it changes anything at all.

Tomorrow Bram wants a real change, and the difference between a vague wish and a sharp instruction decides whether he gets it.

Remember that annoyance you wrote down in lesson 1? Today you turn it into a real instruction. Bram is about to do the same with his menu page, and the difference between a wish and a result is four small things.

A strong instruction has four parts, and each has a color you will see again in every lesson. What you want, where it is, what must not change, and how you check. Here is Bram's instruction, taken apart.

Change the heading of the menu page to Our coffee on menu.html leave the prices exactly as they are and tell me afterwards what you changed (doel: What you want · plek: Where it is · controle: How you check · beperking: What must not change)

Vague first, sharp second

When you cannot spec it

1. A trick for when you do not quite know what you want yet. Say: interview me first about what I want, then make a plan. Claude asks you questions until the instruction writes itself.
2. You: Make the menu page better. Claude: What do you mean by better? I see prices, headings and photos. Which of those should change, and in what direction?Claude answered the instruction above with a question instead of a change. Why?There was nothing concrete to act on, so it asked rather than guessed (A question back is the system protecting you. Without a place, a target and a boundary, any change would be a guess, and guessing is where things go wrong.)

Which instruction is complete?

B · With the boundary. A is missing the boundary, what must not change. B has all four parts, so a small fix stays small.

Bram wants the middle line to say "get our weekly coffee tips" instead. Write the full instruction, all four parts: what, where, what to leave alone, and how you will check.

You want to give a complete instruction with all four parts: what to change, where, what to leave alone, and how you will check it.

You can now:

- Name the four parts of a good instruction: what, where, what must not change, how you check. - Read a question-back as a feature, not a failure: Claude asks rather than guesses.

Tomorrow Bram wants something bigger than one sentence, a specials board on his homepage. For that there is a free estimate.

Bram wants something bigger than a one-line fix. A specials board on his homepage, changing every week. That is too big to let anyone run at blindly. So he asks for the plan first, the way you would ask a builder for an estimate before the work starts.

Plan Mode turns one big job into four calm steps. You ask. Claude writes a plan. You say yes, or you adjust it. Only then does Claude build. Changing your mind on the plan costs nothing.

1. You ask: Describe the bigger thing you want. 2. Claude plans: A numbered plan: the steps, the files, what changes. 3. You say yes: Approve it, or steer it before a single line is built. 4. Claude builds: Now the work happens, along the plan you agreed to.

Asking for the estimate

When to skip the plan

1. A) Change the phone number on the contact page to 020 765 4321. B) Add a weekly specials board that shows a different offer each week.For which of these two requests is asking for a plan first worth it?B, the weekly specials board (A fits in one sentence and touches one spot, so a plan is more work than the change. B touches several things and runs weekly, so a plan you can steer first is worth it.)

Which is the safer start for a big job?

B · Plan first. A big job built blind can go far off course before you notice. B gives you a free estimate you can correct for the price of nothing.

Those 12 bar photos sit in a folder, unseen. You want a photo gallery. Type the bigger request, and ask for a plan first.

You want a bigger change, so you ask Claude Code to make a plan first and wait for your go-ahead before building anything.

You can now:

- Say what Plan Mode guarantees: a plan first, building only after your yes. - Tell when a plan is overkill: when the change fits in one sentence.

Tomorrow the approved plan actually gets built, and Bram learns why trying things is safe.

Bram has the plan from yesterday, approved and waiting. Today the specials block actually goes in. He is a little nervous, but there is a safety net under everything he is about to do: he can undo any change, instantly.

Here is the homepage before and after. You do not read the code, you read what changed and where. If you do not like it, one sentence puts it back.

Build the approved plan: a specials block at the top of the homepage. — Before: Bram's Koffiebar / Open until 6 pm / Our coffee · Contact → After: Bram's Koffiebar / This week: oat flat white + cinnamon bun / Open until 6 pm / Our coffee · Contact

Build it, then undo it

Important

Why move, not delete

1. You told Claude to move every uncertain file into a folder called doubt, and to delete nothing. A week later you realise one of those files was actually still needed.Because you moved the files instead of deleting them, what can you do now?Get the file back out of the doubt folder (A move is reversible, a delete often is not. Parking uncertainty in a doubt folder gives you all the tidiness with none of the risk.)

Which instruction is safe to give?

B · The safe clean-up. A is the 11 GB story waiting to happen. B does the same tidying, but every uncertain file survives, ready to come back.

Now you. Take the plan you made in lesson 5, or any small real change on your own project, and make it for real. Then, just to feel the safety net, undo it and put it back. Building without fear starts here. Paste Claude's summary of the change below.

1. Start Claude in your own project folder.claude
2. Give one clear instruction for a small real change, all four parts.On [page] it says [old], change it to [new]. Leave the rest of the page as it is, and tell me what you changed.
3. Read the summary and open the page to check the change landed.
4. Feel the safety net: undo the change, then put it back.Undo that last change. Then put it back exactly as it was.

Does the pasted summary clearly say what changed and where, and does it look like a small, safe change that can be undone?

You can now:

- Undo a change: Esc Esc or /rewind puts it back. - State the one rule that prevents disasters: never delete, move to doubt.

Tomorrow Bram gets tired of repeating his house style every session. There is a sheet for that.

Bram is tired of saying the same thing every session. Colors are brown on cream. Keep the tone short and friendly. Never touch the prices unless I ask. Every time he opens a fresh session, he explains it again. There is a better way: write it down once.

CLAUDE.md is a plain file at the top of your project. Claude reads it automatically at the start of every session, like an onboarding sheet handed to a new team member. Write your house rules once, and they apply forever.

Bram's site folder, with the sheet on top CLAUDE.md (read automatically at the start of every session), index.html, contact.html, menu.html, style.css

Write it once, applied always

Important

The pruning test

1. CLAUDE.md - Colors are brown on cream - Never change prices unless I ask - Be creative - Keep the tone short and friendlyOne of these four rules earns its place the least. Which would you cut?Be creative ("Be creative" is vague and prevents no mistakes if you leave it out. The pruning test: if removing a rule causes no errors, remove it.)

Which sheet works better?

B · The sharp sheet. Five rules Claude can actually follow beat twenty-five it has to weigh. Sharp and short wins.

Now you. Write the CLAUDE.md for your own project, three to five rules, no more. Each one should be something a new helper genuinely needs to know: a color, a tone, a thing they must never touch. Then start a session and watch it get followed on its own. Paste the CLAUDE.md Claude made below.

1. Ask Claude to create the memory sheet with your rules.Make a CLAUDE.md for this project with these rules: [rule 1], [rule 2], [rule 3]. Keep it short.
2. Read it and cut anything that a new helper would not truly need. Three to five rules is plenty.
3. Start a fresh session, give a small task, and watch the rules get followed without you repeating them.claude

Does the pasted CLAUDE.md contain three to five clear, useful rules that a new helper genuinely needs, and is anything missing or redundant?

You can now:

- Say what CLAUDE.md does: it is read at every session start, so house rules apply without repeating. - Apply the pruning test: if removing a rule causes no mistakes, cut it.

Tomorrow Bram's two-hour session goes slow and confused. The fix is not talking louder, it is starting fresh.

Bram's session has been going for two hours. It is getting slow, and it keeps forgetting things he said early on. His instinct is to explain harder. The real fix is the opposite: start fresh. A long conversation is a full head, and a full head drops the old stuff.

Within one conversation, Claude has a working memory that fills up. The longer you talk, the more the early details slip out. Typing /clear empties the conversation and gives you a sharp, fresh start for the next job.

1. Full head: A long chat, old details falling out the bottom. 2. /clear: Empty the conversation, a clean slate. 3. New job: One line of context, and it is sharp again.

Clearing and restarting

A word about money, because it is good news. That contact-page fix cost about forty cents in usage. A web agency would charge a hundred and fifty euro for it. But long, messy conversations burn usage with nothing to show, so type /usage to see where you stand.

Spot the session that goes wrong

1. This week you have three jobs on the site: the menu, the photos, and the newsletter. Here are four ways you could run your sessions.Which of these four is heading for trouble?One long session mixing the menu, the photos, and the newsletter all at once (The kitchen-sink session, everything in one conversation, is the number one beginner mistake. Working memory overflows and quality drops.)

Which produces better work?

B · Short sessions. Short focused sessions keep working memory sharp and cost less. The marathon forgets its own beginning.

You are two hours into this session and it has gone slow. Type /usage to see what the work has cost so far.

You want to keep Claude sharp and your costs low: check what the work has cost, or ask Claude to sum up the session so you can start fresh with a clear head.

You can now:

- Say what /clear does and what it does not erase: it empties the conversation, not your files or CLAUDE.md. - Explain why short beats long: working memory stays sharp, and it costs less.

Tomorrow Bram wants a whole new page. He learns to build big things as a handful of small steps.

Bram wants a whole new page: cakes to order. It feels huge, and huge is where people freeze. The trick is not to build it in one go. You build it as four small, ordered steps, each one easy to check before the next.

Here are the four steps for the cakes page. First the skeleton, then the content, then the form, then a check. Each step is one instruction, and you look at the result before moving on.

1. 1. Skeleton: Make a new page cakes.html with the same header and footer as menu.html. 2. 2. Content: Add the cakes, each with a name, a photo and a price. 3. 3. Form: Add an order form: name, cake, pickup date. 4. 4. Check: Go over the page in mobile view and tell me what is still wrong.

Step one, and a small slip

Put them in order

1. Four steps for the new cakes page, shuffled: - the order form - the skeleton page with header and footer - the check in mobile view - the list of cakesWhich of these four steps has to come first?The skeleton page with header and footer (You need a page to exist before you can fill it. Skeleton first, then content, then the form, then the check. Order keeps each step small.)

Which is the better way to start?

B · Step one of four. The mega-prompt asks for everything at once, so if anything is off you cannot tell which part. Step one of four gives you something to check immediately.

Now you. Build one new page on your own project in four steps: skeleton, content, the interactive part, then a check. Run one, look at the result, run the next. Pointing Claude at existing work gets you a whole style in one short sentence. Paste what Claude reports after the first step below.

1. Ask for the skeleton only, matching a page you already like.Make a new [page] with just the layout, no real content yet. Make it look like the [existing] page.
2. Look at the result, then ask for the content.Now fill it with this content: [your text].
3. Add the interactive part (a form, a button, a gallery).Add [the interactive part] and tell me what you changed.
4. Check it: open the page and click through it.

Does the pasted result show a page being built one small step at a time, matching an existing style, rather than everything at once?

You can now:

- Say why small wins: each step is easy to check, so mistakes stay small. - Use the pointing trick: "make it like the [existing page]" copies a whole look at once.

Tomorrow the order form does not work on the first try. That is normal, and it is the whole lesson.

Bram's order form does not work on the first try. Press send, and nothing happens. His stomach drops. But this is not a disaster, it is the most normal moment in building anything. Today's lesson is exactly this: what to do when it goes wrong.

You do not need to understand the cause. You describe what you see, and Claude figures out why. Here is Bram's broken form, the follow-up he typed, and the result.

What Bram saw: Order form on cakes.html / Press send... nothing happens / No confirmation, no email — The follow-up instruction: "The form on cakes.html does nothing when I click send. There is no confirmation and no email. Find out why and fix it." → After the fix: Order form on cakes.html / Press send... "Thanks, we got your order" / Confirmation email sent

Paste the error, get the fix

Note

See, do not guess

1. Error: form action not definedYour order form showed this red text. What is the best move?Copy and paste it to Claude exactly as it is (An error message is data, not punishment. Pasted exactly as it is, it is the most useful thing you can hand Claude, and you never have to understand it yourself.)

Which is more useful to Claude?

B · What you actually see. A is a guess that might be wrong. B is what actually happens, which Claude can trace to the real cause.

This signup box is on the homepage. Click Subscribe and nothing happens, no confirmation at all. Describe what you see so Claude can fix it.

You want to report a bug clearly: describe what you did, what you saw, and what you expected, so Claude can find the cause and fix it.

You can now:

- Apply the two-strikes rule: after two failed fixes, /clear and start clean. - Say what to paste on an error: the whole message, exactly as it is.

Tomorrow the cakes page finally goes out into the world. Save points, and then live.

The cakes page works. Now it has to reach the world, and Bram's customers. Two ideas do that, and both take five minutes. A save point, so you can always go back. And going live, so anyone can see it.

A commit is a save point, a photo of your whole project at this moment. You can always return to any photo. You take a photo, you renovate, you take a new photo. Simple, and it makes every change reversible for good.

1. Take a photo: A commit: you can always return to this exact state. 2. Renovate: Make your changes, try things, build. 3. New photo: Another commit, so this version is saved too.

Save it, then ship it

Note

When to save

1. You are about to let Claude rebuild the whole navigation menu of your site, a bigger change that touches several pages at once.When is the best moment to make a save point?Right now, before this bigger change, so you can always go back (A save point before a bigger job means the worst case is "go back to the last photo", not "start over". Cheap insurance, taken often.)

Which one lets you sleep at night?

B · A photo before every job. Without save points, a bad change can only be undone by memory. With them, you always have a good version to return to.

Now you. Make your first save point on your own project, with a short description. Then put it live. Claude walks you through it. In a few minutes you have a real web address for something you built. Paste what Claude tells you below.

1. Ask Claude to make a save point with a short description of what you did.Save my work with the description "[what you changed today]".
2. Ask Claude to put the site live and give you the address.Put this site live and give me the web address.
3. Open the address in a normal browser to see it for real.

Does the pasted output confirm a save point was made and give a real web address the learner can open?

You can now:

- Say what a commit is in plain words: a photo of your project you can always return to. - Say what deploy means: putting your site online at a web address.

Tomorrow, one last habit, the one that separates people who ship good work from people who just ship: checking it yourself.

Bram has a ritual now, after every job. Phone in hand, site open, click through what changed. It takes ten seconds and it has saved him twice already. This last lesson turns that ritual into a habit, and hands you the keys to keep going alone.

The check ritual is four quick moves. Open the site, click what changed, look on your phone, and if something is off, describe it the way you learned in lesson 10. Ten seconds, every time.

1. Open the site: Look at the real thing, not the summary. 2. Click what changed: Try the exact thing you just asked for. 3. Check on your phone: Most visitors are on a phone. Look there too. 4. Something off?: Describe what you see (lesson 10) and fix it.

Make Claude show its work

Note

Which habit this cures

1. The five habits that trip people up: - Cramming everything into one conversation - Correcting in circles after two failed tries - Saying yes without a plan on big jobs - Never looking for yourself - Letting something be deletedWhich of these does today's ten-second check ritual directly cure?Never looking for yourself (The check ritual, opening the site and looking with your own eyes, is the exact opposite of never looking. Each other habit has its own cure: /clear for cramming, the two-strikes rule for circles, Plan Mode for big jobs, move-not-delete for deletions.)

Which one keeps you out of trouble?

B · The ten-second ritual. "It is done" is a claim. Your own eyes on the real page are proof. The ten-second ritual is what makes shipped work actually good.

Now you, one last time. Do the ritual on your live project right now. If something is off, you know exactly what to do. If it is right, you just closed the loop like a professional. Paste what you saw below and I will confirm you shipped it cleanly.

1. Open your live site in a normal browser, not the editor.
2. Click exactly the thing you changed and check it does what you expect.
3. Open the same site on your phone and look again.

Based on what the learner saw on their live site and phone, does the change look correctly shipped, and what is the one thing worth double-checking?

You can now:

- Name the check ritual: open, click, phone, and describe anything off. - Say when to bring in a professional: payments, logins, privacy-sensitive data.

Next comes the Operator level: VS Code as your workbench, and Claude as a real work partner. You have the loop in your hands. From here it is rhythm, one small thing shipped every week.