Vibe coding, one step at a time
CodeWithPurpose lessons that turn AI-assisted coding into a repeatable skill: clear animated walkthroughs, no setup required.
Ready when you are
Go at your own pace. Your progress saves on this device.
Syllabus
What you'll learn
Take it one chapter at a time. A short quick check at the end of each one opens the next.
Part 1
Getting Set Up
Assumes nothing. What vibe coding is, what you need installed, and your first working app.
- What Is Vibe Coding?Traditional coding vs. vibe coding, side by side. See how describing what you want replaces typing every line by hand.
- What You Need Before You StartA terminal, an editor, a GitHub account, and the ten minutes of git that actually matter. No prior setup assumed.
- Choosing Your AI ToolCursor, Copilot, Claude Code, or a chat window? Pick a task and see which kind of tool actually fits it.
- Install and Configure Your First ToolStep-by-step setup for each major tool: install, sign in, pick a model, and understand what the free tier gets you.
- Your First Vibe-Coded AppOne prompt to a running app in about twenty minutes, with every command you need to type.
Part 2
How the Model Thinks
What the AI can actually see, and how to ask for things in a way it can act on.
- What the AI Can and Can't SeeContext windows, what actually gets sent with your prompt, and why the model confidently invents functions you never wrote.
- Writing Prompts That WorkVague prompts get vague code. Flip through real before/after examples to see what turns a so-so AI reply into a great one.
- Prompt Patterns Worth MemorisingTen reusable shapes — from 'explain before you change' to 'give me three options' — each one copyable.
- Choosing a ModelFast models vs. reasoning models, when escalating is worth it, and what latency and cost actually buy you.
Part 3
The Working Loop
The cycle you repeat all day: plan, generate, review, test, commit.
- The AI Pair-Programming LoopPrompt, generate, review, refine, ship. Click through the loop every vibe coder repeats, over and over, to build real features.
- Small Diffs, Frequent CommitsWhy the one-shot mega-prompt fails, and how splitting work into reviewable pieces makes the AI dramatically more useful.
- Steering Mid-FlightInterrupting, redirecting, rejecting, and knowing when to throw it away and restart instead of arguing.
- Reviewing AI-Generated CodeAI output still needs a human pass. Spot the planted issues in a real snippet before they ship.
Part 4
Real Codebases
Everything changes when the repo is large and someone else wrote most of it.
- Giving the AI ContextFile references, @-mentions, screenshots, and pasted docs — what to include and what just wastes the window.
- Rules FilesAGENTS.md, CLAUDE.md, and .cursorrules: how to tell the AI your conventions once instead of every prompt.
- Vibe Coding in an Existing Codebase"Add a login page" means something different in a fresh repo vs. a 50k-line one. See how naming context changes the result.
- MCP and ToolsConnecting the model to your database, browser, and issue tracker so it can check reality instead of guessing.
- Multi-File Refactors Without Breaking EverythingSequencing a large change so each step is verifiable, and using the type checker as your safety rail.
Part 5
Making It Correct
Debugging, testing, and the security pass AI output reliably needs.
- Debugging With AIErrors are just information. Step through a live example of handing a stack trace to AI and landing on a real fix.
- Tests as Your Safety NetAsking for tests that actually test something, and why they matter more when you did not write the code yourself.
- The Security PassSecrets, injection, auth, and dependency risk — the specific things AI-generated code gets wrong again and again.
- When Not to Vibe CodeThe situations where typing it yourself is faster, safer, or the only responsible option.
Part 6
Shipping
Getting it off your laptop and in front of people, then keeping it alive.
- Git and GitHub for Vibe CodersBranches, pull requests, and review — the workflow that makes AI-generated changes safe to undo.
- From Idea to Deployed AppWatch a single idea move through prompting, building, testing, and deploying, all in one afternoon, without writing it all by hand.
- After You ShipMonitoring, reading real bug reports, and iterating on something people are already using.
Part 7
Going Deeper
Agents, orchestration, custom tooling, and judging your own output.
- Agents and Background WorkLong-running agents, parallel worktrees, and handing off work you do not want to sit and watch.
- Subagents and OrchestrationSplitting a large job across several agents, and the failure modes that appear when you do.
- Building Your Own Commands and SkillsTurning a workflow you repeat into a command the AI can run, so the good version happens by default.
- Getting BetterHow to tell whether your output is actually improving, instead of just feeling faster.
Open source
Your chapter goes here
Every chapter here was written by a student. Propose your own topic, or fix one that confused you. Drafts stay invisible until they are ready, so nothing you start can break the site.
Keep building your vibe coding practice
These lessons are part of CodeWithPurpose's free learning library, built by students, for students, everywhere.