← Back to workshop
Branch module
Claude Code Deep Dive
0%
✦ 0 XP 🌱 Curious
🌿 Optional branch — goes further than Module 4
Branch Module · Claude Code

AI that understands
your whole project.

Claude Code is a command-line tool by Anthropic that runs in your terminal and reads your entire codebase. Not just the file you show it — all of it. This branch covers what that means, how to use it properly, and why it's different from a chat window.

🤔 What Claude Code is — and isn't

Claude Code is not a chatbot with a code block. It's a CLI tool (command-line interface) that you install in your terminal and run inside your project folder. The difference matters enormously.

When you open Claude.ai and paste in some code, Claude sees only what you paste. When you run Claude Code inside your project, Claude can read every file in your project — the HTML, the CSS, the JavaScript, the README, the config files. It has the full context of what you're building before you even say anything.

Claude in a browser
You paste code. Claude sees only what you paste. If you forget to include something important, the answer suffers. Good for isolated questions.
Claude Code in your terminal
Claude reads your whole project automatically. It can edit files directly, run commands, check what changed, and work across multiple files at once. Good for building.

The mental model shift: A browser chat is a consultant you have to brief every time. Claude Code is a developer who already knows your project and is sitting next to you. The quality of what's possible goes up significantly.

💳 How to pay — API vs subscription

Claude Code can run on two different billing models. Which one makes sense depends on how intensively you use it.

API key (pay-per-use)
Best for: occasional use, trying it out, low-volume projects.

Pay only for what you use. A typical 30-minute session costs $0.10–$0.50. Top up $10–20 at console.anthropic.com and it lasts months for light use.

No monthly commitment. Starts immediately.
Claude.ai Pro / Max subscription
Best for: regular daily use, long sessions, heavy projects.

Pro ($20 USD/mo) — included Claude Code access with monthly usage limits.
Max ($100 USD/mo) — much higher limits, priority access, ideal for developers using it daily.

No API key needed — logs in with your Claude.ai account.

Practical advice: Start with the API key ($5 credit) to test it. If you find yourself using it daily for real project work, the Pro subscription at $20/month is better value than per-token billing. Max is only worth it if you're doing professional development full-time.

Installing Claude Code

Claude Code requires Node.js (which you installed in Module 4) and an Anthropic API key.

1
Install Claude Code globally
Run this in your terminal — one command:
$ npm install -g @anthropic-ai/claude-code
2
Get an Anthropic API key
Go to console.anthropic.com → Sign up → API Keys → Create Key. You'll need to add a small credit ($5 goes a long way — a typical session costs a few cents). Store the key safely — never paste it into a public file.
3
Navigate to your project and start
Open your terminal, navigate to your project folder, and run:
# Navigate to your project
$ cd my-project-folder

# Start Claude Code — it will ask for your API key on first run
$ claude

Claude Code reads your project, shows you a summary of what it found, and drops you into an interactive session. From here, you just talk to it.

📄 CLAUDE.md — teaching Claude your project

The most powerful thing you can do with Claude Code is write a CLAUDE.md file in your project root. This is a plain text file that Claude reads at the start of every session — before you say anything.

Think of it as the briefing you'd give a new collaborator who's joining your project. You write it once, and every future session with Claude Code starts with Claude already knowing the important things.

CLAUDE.md — example for a café website
# Raglan Roast — Website Project ## What this is Website for Raglan Roast café. Static HTML/CSS/JS site. Hosted on GitHub Pages at raglanroast.co.nz. ## Tech stack - Vanilla HTML, CSS, JavaScript only — no frameworks - No build tools, no package.json - CSS uses CSS variables for colours (see :root in style.css) ## Key decisions - Mobile-first layout — most visitors are on phones - Accent colour: #2dd4bf (teal). Never change this. - Font: Inter for body, Outfit for headings ## Things NOT to do - Don't add external dependencies - Don't use Tailwind or Bootstrap - Don't change the colour scheme without asking first ## Current work Adding an online menu page. Files: menu.html, menu.css (new)

Why this is powerful: Every time you start a Claude Code session, it reads this file. You never have to re-explain your project. When you hire a tradesperson, you don't re-explain the house layout every visit — you have a site briefing. CLAUDE.md is your site briefing.

💬 The core workflow

Once you're in a Claude Code session, the conversation is natural — but there are patterns that work better than others:

Examples of good Claude Code prompts
# Specific, scoped changes
> Add a hamburger menu to the nav — mobile only, hamburger icon at 768px and below

# Fixing something that broke
> The contact form stopped submitting — check form.js and contact.html and find what's wrong

# Understanding existing code
> Explain what the booking.js file does, section by section

# Adding features with context
> Looking at how the events page works, add a similar gallery page for the menu items

# Reviewing before committing
> What did you just change and why? Show me a summary before I accept it

Claude Code will show you the changes it wants to make and ask for your approval before writing to any file. You can accept, reject, or ask it to do something different. You are always in control of what gets written.

The most important habit: Read what Claude Code proposes before accepting. Not because it's usually wrong — but because understanding what changed is how you learn. Accepting blindly is fine when you're in a hurry; reading carefully is how you build real skill.

⌨️ Slash commands and power tips

Once you're inside a Claude Code session, these commands and habits make a significant difference:

/help
Shows all available commands. Run this first when you start — the list updates as Claude Code adds features.
/compact
Summarises the conversation so far and compresses it. Useful when a session gets long — reduces API cost and keeps Claude focused on what matters.
/clear
Wipes the session context and starts fresh. Use this when you've finished one task and are starting something completely different.
/add-dir <path>
Adds another directory to Claude's context. Useful if your project references code in a sibling folder that Claude hasn't read yet.

Keep sessions focused: Claude Code is most accurate when working on one clear task at a time. If you have three unrelated things to do, do them in three separate exchanges (or /clear between them). A 5-hour session with 100 different topics will drift — a 30-minute session with one clear goal won't.

The review habit: Before accepting any change, ask: "Show me what files you changed and why." This takes 10 seconds and teaches you far more than blindly accepting. After a few sessions of this, you'll start anticipating what Claude will do — which is when you level up from user to collaborator.

⚖️ Claude Code vs Cursor vs ChatGPT — when to use which

These tools overlap, but each has a clear home:

Practical flow: Use Cursor or Bolt.new to build the first version. Once you have a working project, switch to Claude Code for ongoing work and maintenance — because it understands what you've already built.

👇 Write your first CLAUDE.md

DO THIS NOW
Add a CLAUDE.md to your Module 5 project

Open your Module 5 or 6 build. Create a new file called CLAUDE.md in the root of the project folder. Write it like you're briefing a new collaborator. Include:

  • What this project is — one sentence
  • Tech stack — what files and languages are involved
  • Key decisions — things that should stay the same (colours, fonts, structure)
  • Things not to do — what you don't want changed
  • Current work — what you're working on right now

Then if you have Claude Code installed: run claude in that folder and watch it read your briefing. Ask it a question about your project. Notice the difference.

Even if you don't have Claude Code installed yet: writing the CLAUDE.md is the exercise. It forces you to articulate what your project is — which is useful regardless of the tool.

Branch complete 🤖

Claude Code is the clearest expression of what AI-assisted development actually looks like at the frontier. Not a chat window with code in it — an AI that lives inside your project and works with you on it.