Go from zero to building and automating real things with Claude Code — the foundation everything else builds on. New lessons added regularly.
Three modules, fourteen lessons — the full path from zero to shipping. Jump to any lesson's prompt below, or open its slides.
● All 14 lessons live · the complete path
All in one file, or grab them one at a time with the ⬇ .txt button on each lesson — or browse the full Prompt Library →
Get going, safely — your first hour.
Build real things — and put them online.
Habits that keep you fast & cheap.
Quick references & extras.
Make Claude work for you — skills, hooks, subagents & routines on a schedule.
Get going, safely — install it, stay in control, and learn the one idea the course is built on.
"Is this just ChatGPT in a terminal?" No. Claude Code is an agent — it works in a loop: reads your project, acts, then verifies its own work, with you steering every step. This one idea is what the whole course is built on.
CLAUDE CODE — THE MENTAL MODEL It's not a chatbot that hands you code to paste. It's a builder that works inside your real project. THE LOOP (this is the whole idea) 1. READS looks at your files to understand what's there 2. ACTS edits files & runs commands to make the change 3. VERIFIES checks its own work, then loops back to fix what's off …and you're in every loop: - You point say what you want, in plain language - You approve it asks before changing things — nothing happens behind your back Runs wherever you like — a friendly panel in your editor, or the terminal. Same builder either way.
Before you can build, you need it running. The friendliest way is the VS Code extension — a panel right in your editor, with buttons to approve changes. Prefer the command line? The terminal path is right here too.
CLAUDE CODE — SET UP IN 10 MINUTES
EASIEST · the VS Code extension (no terminal)
1. Install VS Code (free) from code.visualstudio.com
2. In VS Code: Extensions → search "Claude Code" → Install
3. Click the Claude icon in the sidebar → sign in
(needs a Claude Pro or Max plan)
4. Open your project folder, type in the panel, approve
changes with a click.
PREFER THE TERMINAL · same builder, one command
curl -fsSL https://claude.ai/install.sh | bash
cd my-project
claude
# /exit to leave · claude --continue to resume
# Mac: brew install --cask claude-code
No editor at all? The Claude desktop app is an all-in-one,
zero-setup option.
The #1 beginner fear: "what if it breaks something?" It won't — Claude never edits a file or runs a command without asking. Here's your control cheat-sheet, and Plan mode for thinking before doing.
CLAUDE CODE — STAYING IN CONTROL (cheat-sheet)
SWITCH MODES
Mode menu click it in the VS Code panel (bottom of the prompt box)
Shift + Tab cycle modes — works in the panel AND the terminal
Stop / Esc interrupt Claude, then redirect
UNDO A MISTAKE
/rewind (or press Esc twice) roll the session back to an
earlier point — restore the code, the chat, or both
(undoes Claude's edits this session; commit to git
for everything beyond that)
THE FIVE MODES (cautious → hands-off)
Ask before edits asks before every edit & command (default — start here)
Edit automatically applies edits + safe commands; still asks before risky ones
Plan mode read-only; plans first, changes nothing
Auto mode runs on its own with safety checks (newer)
Bypass permissions no prompts; hands-off — keep work in git so you can undo
By default Claude asks before anything that changes your project.
The looser modes trade prompts for speed — you opt into them.
The doing — build real things from a prompt, talk to your code, and put it online.
This is the exact prompt used on camera to build the BrewLog café landing page. Copy it into Claude Code and watch it build.
Build a single-page landing site for a product called BrewLog. BrewLog is an app for small cafés to track repeat customer orders. The page should have: - A hero with the product name, a one-line value prop, and an email signup. - Three feature cards with short descriptions and simple icons. - A testimonial from a fictional café owner. - A footer with a fake email and social links. Style: warm, friendly, café-inspired. Use a cream background, deep brown for accents, and a serif heading font with sans-serif body text. Mobile responsive. Use plain HTML, CSS, and a single index.html file — no framework. When done, tell me the command to preview it locally.
Why do some prompts build magic and others build junk? It's a recipe, not luck — say these five things every time. Paste the skeleton and fill in the brackets, or grab the worked example below it.
THE PROMPT RECIPE — fill in the [brackets] 1) OUTCOME (one line) Build a [what] for [who]. The one job it does is [goal]. 2) THE SECTIONS (the concrete parts) It should have: - [section one — e.g. a hero with a headline + button] - [section two] - [section three] 3) LOCK THE DESIGN Style: [mood, e.g. warm and minimal]. Colors: [#hex], [#hex]. Fonts: [heading font], [body font]. Mobile responsive. 4) CONSTRAIN THE TECH Use plain HTML, CSS, and JavaScript in [one file / a few files]. No framework, no build step. 5) ASK FOR THE NEXT STEP When done, tell me the command to preview it locally. ───────────────────────────────────────────── WORKED EXAMPLE — the recipe, filled in (paste this whole thing) Build a one-page website for a coffee shop called "Brew & Bloom", for locals looking for a cozy place to work. The one job it does is get people to come visit. It should have: - a hero with the name, a one-line tagline, and a "Find us" button - a 3-item menu highlight (drinks with short descriptions) - opening hours + address with a simple map placeholder - a footer with social links Style: warm and cozy, minimal. Colors: #3b2417, #e8a04c. Fonts: Poppins for headings, Inter for body. Mobile responsive. Use plain HTML, CSS, and JavaScript in one file. No framework, no build step. When done, tell me the command to preview it locally.
The exact prompt used on camera to build this very website. Copy it into Claude Code, then swap the brand details for your own.
Build a small multi-page marketing website for a brand called "vibethecoder".
vibethecoder is a YouTube series + free community that teaches non-technical
founders how to build and ship real products with AI coding tools — calm and
intentional, no hype. Tagline: "Ship real products without writing code."
Create FOUR pages that share one stylesheet and one JS file:
1. index.html (Home)
2. courses.html (Courses)
3. community.html (Community)
4. about.html (About)
Plus: styles.css (shared design system) and app.js (shared behavior).
DESIGN LANGUAGE — bold and colorful, on a clean white / soft off-white base:
- Brand gradient used for accents, buttons, icon tiles, and headline highlights:
linear-gradient(100deg, #ff7a18 0%, #ff2e92 35%, #8b2fc9 68%, #2d6cff 100%)
(orange -> pink -> purple -> blue)
- Ink/text color #16121f, body text #4a4358, hairline borders #ece8f3.
- Headings: "Plus Jakarta Sans" (700-800, tight letter-spacing). Body: "Inter".
- Big confident headlines with one phrase in gradient-filled text.
- Rounded "pill" buttons (border-radius 999px): a gradient primary button, a dark
button, and a white ghost button with a border.
- Generous whitespace, soft shadows, cards that lift on hover.
SHARED COMPONENTS on every page:
- Sticky, blurred top nav: left = brand wordmark/logo, right = links
(Home, Courses, Community, About) + a gradient "Join free" button. Collapses to
a hamburger menu on mobile.
- Dark footer with the brand, a short tagline, an "Explore" link column, a
"Connect" column (Skool, YouTube, Email), and a bottom copyright row.
- A reusable full-width gradient "call to action" band.
TECH: plain HTML, CSS, and vanilla JS only — no framework, no build step. Mobile
responsive. Use a Google Fonts <link> for the two fonts. Use placeholder links
("#") for the brand logo image, the Skool community, and the YouTube channel so I
can fill them in.
When done, tell me the command to preview it locally, and list which placeholder
links I need to replace.
A landing page just sits there. An app responds and remembers. Same 5-part recipe as 2.2 — pointed at an app, still one file, still no backend or keys. Copy this and build it.
BUILD MY FIRST APP — a habit tracker OUTCOME Build a simple habit tracker web app that remembers my streaks. SECTIONS - A list of my habits (start with: Drink water, Read, Move) - A "done today" check-off button on each habit - A streak count per habit (days in a row) - An "add habit" and "delete habit" control REMEMBER IT Save everything in the browser with localStorage, so my habits and streaks are still there when I refresh or come back tomorrow. No accounts, no database, no keys. DESIGN Clean and calm. Navy (#0f172a) + amber (#f59e0b), rounded cards, a friendly empty state. Works on my phone. TECH One file: plain HTML, CSS & JavaScript. No frameworks. THEN Tell me how to preview it. After I check a habit, I'll refresh to confirm the streak is still there.
Explaining a bug in words is painful. Point Claude at the exact file with @, or paste a screenshot. Here are the moves — they work in the panel and the terminal.
SHOW, DON'T TELL — handy moves POINT AT A FILE @styles.css is too cramped — add more spacing. Explain what @app.js does, in plain English. PASTE A SCREENSHOT (drag it in, or press Ctrl+V) Here's the bug: [paste screenshot] — the button overlaps the text. Fix it. Make my page match this design: [paste mockup]. COMBINE THEM This @index.html should look like the screenshot I just pasted. Tip: type @ then start the filename, and pick it from the list.
A green checkmark means Claude thinks it's done — not that the thing actually works. Your eyes are the real test. Run it, click it, then ship it. Here's the checklist you run every time.
PROVE IT WORKS — don't trust "done" MAKE IT SHOW YOU Show me — open it in the browser and tell me how to preview it. Run it and report anything in the console that looks like an error. CHECK IT YOURSELF [ ] The page actually loads (not blank) [ ] Every button / link does what it should [ ] The form submits and I see a result [ ] It looks right on my phone too ASK IT TO TEST ITS OWN WORK Write and run a quick test for this, then fix anything that fails. STILL WRONG? GET UNSTUCK - Paste the error or a screenshot (show, don't tell) - /rewind to a good point and try a different ask - /clear and re-explain if the chat is going in circles - Switch to Opus for a genuinely hard bug - Break it into one small step at a time Check the OUTCOME, not the claim.
git is just save points; deploy is just going live. Let Claude do both. Copy this to take a project from your machine to a real URL.
SHIP IT — from your machine to a live URL SAVE YOUR WORK (git) Commit everything with a clear message. # Claude snapshots your files; you can always go back. GO LIVE (deploy) Help me deploy this site so it has a public URL. Walk me through it step by step, using [Netlify / Vercel / GitHub Pages]. CHECKLIST [ ] Work committed (a save point exists) [ ] Host account created + signed in (one-time) [ ] Deployed — I have a live link [ ] Opened the link on my phone to check it Claude always asks before pushing online or publishing.
Habits that keep you fast and cheap — memory, context, models, and your first custom skill.
Tired of re-explaining your project every session? A CLAUDE.md file is Claude's permanent memory — your commands, your style, your structure, read automatically every time. Run /init to create it, then use this template to fill the gaps.
# CLAUDE.md — project memory # Tip: run /init first — Claude fills most of this in from your project. Then tweak. ## What this is [One or two lines: what the project is and who it's for.] ## How to run it - Install: [e.g. npm install] - Start / preview:[e.g. npm run dev] - Build: [e.g. npm run build] ## How to test it - [e.g. npm test] ## Code style & conventions - [e.g. plain HTML/CSS/JS, no framework; 2-space indentation] - [Naming rules, formatting — anything you want followed] ## Project layout - [folder/file] — [what it's for] - [folder/file] — [what it's for] ## Gotchas (always / never) - Always: [e.g. keep the shared design system in styles.css] - Never: [e.g. edit files in /vendor] # Personal & cross-project notes go in ~/.claude/CLAUDE.md # Run /memory anytime to see everything Claude is remembering.
A long chat quietly works against you: it's slower, pricier, and the model starts to lose the thread. The fix is a habit — checkpoint to files, then /clear. Here's the prompt to run before you wipe a conversation, so nothing is lost.
Before I clear this conversation, act as a project archivist. Review everything we decided and built in this session and persist it so nothing is lost when context is wiped: 1. Save each durable decision, spec, or reusable asset into a clearly-named .md file in the project (distill the conclusions — don't dump the chat). 2. Update my memory/notes with one-line pointers to those files. 3. List any OPEN threads, half-finished work, and next steps as a short TODO. 4. Tell me what is already safely captured elsewhere (committed code, docs) so we don't duplicate. Then give me a one-paragraph "where we are" I can paste into a fresh session.
The founders who ship aren't the ones who can code — they're the ones who can explain what they want. Here's the pattern.
It opens with the result — "a single-page landing site" — before any detail. The AI knows the destination immediately.
It lists exactly what goes on the page. No guessing what "a hero" means — less ambiguity, better output.
Cream, brown, serif headings. Vague style prompts get vague results; specific ones look designed.
Plain HTML/CSS, one file — fast to build, easy to preview, simple to deploy. And it ends by asking for the next step.
Three engines — Opus, Sonnet, Haiku. Pick the right one for the job, keep an eye on your spend with /usage, and you'll build fast and cheap. Here's the cheat-sheet.
WHICH MODEL WHEN (cheat-sheet)
Haiku fast & cheap simple, repetitive edits; quick questions
Sonnet balanced your default — most building & debugging
Opus deepest thinker genuinely hard problems, tricky bugs
(Fable 5 sits above Opus for the very hardest jobs.)
Rough cost: Haiku < Sonnet < Opus (Opus is several× Haiku)
SWITCH IT
Panel: pick from the model menu
Terminal: /model sonnet (also opus, haiku, default)
/effort low|high|max how hard it thinks (cheap → deep)
/fast run Opus faster, higher cost (terminal)
WATCH THE METER
/usage your session cost + how much of your plan you've used
STAY CHEAP
- Clear context often (long chats cost more)
- Use the right engine — don't run Opus for simple edits
- Plan before big builds
Turn instructions you repeat into a reusable /command. Create one file and Claude has a new skill. Here's a starter you can drop in — then you're ready for Claude Code Pro.
YOUR FIRST SKILL Create this file in your project: .claude/skills/commit-check/SKILL.md Put this inside: --- description: Review my uncommitted changes before I commit. --- Look at my current changes and: 1. Summarize what changed, in 2-3 bullets. 2. Flag anything risky (secrets, leftover TODOs, broken bits). 3. Suggest a short commit message. Use it: type /commit-check — or just ask "check my changes." Tip: not sure where to start? Ask Claude: "make me a skill that ___." Tweak settings anytime with /config. NEXT → Claude Code Pro: skills, hooks, subagents & routines that work for you on a schedule.
Everyone says "clear between tasks" — but what's a task when you're 40 messages into one app? In this capstone you build a habit tracker across six real sessions and learn the answer: a task = one checkbox in ROADMAP.md. Clear at a checkbox, /compact in the middle, and let CLAUDE.md do the remembering. Keep the ritual below; the full prompt pack replays the whole build.
THE CONTEXT RITUAL — one app, many sessions
DRAW THE LINES → ROADMAP.md with checkboxes. A task = one checkbox.
START EVERY SESSION → "Read CLAUDE.md and ROADMAP.md, then build the
next item: …"
MID-TASK, CHAT HEAVY? → /context to check · /compact focus on <the
thing you're fixing>
CHECKBOX DONE? → verify it → check it off → gotchas to CLAUDE.md
→ /clear
SECOND TIME you tell Claude something → it goes in CLAUDE.md
SLIPPED? → /resume brings the old session back
Clear at a checkbox. Compact in the middle. Disk remembers.
Handy odds and ends that don't need a full lesson.
CLAUDE CODE — THE MENU, DECODED
THE THREE YOU'LL ACTUALLY USE
Mention file (@) point Claude at a file instead of pasting it —
type @, pick a file, ask. (Lesson 2.4)
Effort how hard it thinks: low = fast & cheap,
high = balanced (default), max = deep.
Set with /effort. (Lesson 3.3)
Rewind undo the whole session: /rewind (or Esc twice),
restore the code, the chat, or both. (Lesson 1.3)
TWO MORE — GOOD TO KNOW
Thinking see Claude's reasoning before the answer.
Ctrl+O to expand, Option+T to toggle. On by default.
Switch model a safety net: if a request gets declined, it
when flagged quietly retries on a backup model. Leave it on.
Most days you'll only touch the first three.
Not every job is a blank page. Point Claude at a template, an old site, or a folder someone sent you — it reads the project first, then changes the right thing. Here's the three-step move.
WORK WITH AN EXISTING PROJECT — the 3-step move 0 · OPEN IT Open the project folder in your editor (or cd into it), then start Claude. 1 · MAP IT /init # Claude scans the whole project and writes a starter CLAUDE.md. 2 · GET THE TOUR Explain this project in plain English — what is it, what's the tech, and where does the home page live? 3 · CHANGE ONE SMALL THING First, commit a snapshot so anything is undoable. Then: change the headline on the home page to "____". Then verify it worked before the next change. Open it → understand it → change it.
Join the free community and get every prompt the moment it drops.