AI as Your Coding Co-Pilot
The most valuable skill in this curriculum isn't HTML or CSS or JavaScript — it's knowing how to work with AI effectively. This week we get intentional about that.
🎯 The Anatomy of a Great Prompt
You've been using Claude all month. This week we slow down and get intentional about it. The difference between a mediocre AI output and a great one is almost always the quality of the prompt.
Who you are, what you're building, what you've already done. "I'm a beginner building a portfolio site..."
Exactly what you want. Not "make it look good" but "use a dark background, white text, Playfair Display font, purple accent."
Paste what you have. Never describe code when you can show it. Claude can only work with what you give it.
"I'm a beginner" or "Explain what each part does." This changes how Claude explains things dramatically.
🔁 Iterative Prompting: The Real Workflow
Vibe development isn't one big prompt. It's a conversation. You get something back, you react, you redirect. Each message builds on the last.
Start broad, then zoom in
First prompt: describe the whole thing. "Build me a landing page for a dog-walking service." Get the structure first, style second, interactions third.
React specifically to what you got
Don't say "make it better." Say "the hero section is too tall, the button color clashes with the background, and I want the font to be more modern."
Keep the same conversation thread
Claude remembers everything said earlier in a chat. Don't start a new chat for each request — keep iterating in the same thread.
Ask Claude to explain what it changed
"Can you summarize what you changed and why?" This turns every Claude response into a mini-lesson.
📋 Building Your Prompt Library
The best vibe developers keep a personal collection of prompts that work. Every time Claude gives you a great output, save the prompt that produced it. This becomes your secret weapon.
Create a file called prompts.md in your VS Code project. Organize prompts by category: HTML, CSS, JavaScript, Debugging, Explaining Code. Add to it every week. By Week 12, you'll have a personal playbook.
── DEBUGGING ──────────────────────────── "My [HTML/CSS/JS] isn't working. Error: [paste error]. Code: [paste code]. Fix it and explain what was wrong." ── LEARNING ───────────────────────────── "Explain this code to me like I'm a beginner, one line at a time: [paste code]" ── STARTING FRESH ─────────────────────── "Build me a [type] page for [purpose]. Include [elements]. Style it with [colors/fonts]. I'm a beginner — add comments explaining each section."
🧪 Using Claude for Code Review
Claude isn't just for generating code — it's an excellent reviewer. After you build something, ask Claude to critique it. This accelerates learning dramatically.
Review this code I wrote as a beginner. Tell me: 1. What I did well 2. What could be improved or simplified 3. Any bugs or potential issues 4. What a more experienced developer would do differently Here's the code: [paste it]
Is there a cleaner or simpler way to write this JavaScript? I'm learning and want to understand best practices: [paste your JS]
Rebuild Something — With Only Prompts
Take a Week 1–3 project and rebuild it entirely through prompts
The twist: this time, don't touch the code directly. Everything goes through Claude. You are the creative director — you describe, review, and redirect. Claude codes.
- Pick your quiz page, about me page, or styled site
- Start a fresh Claude conversation
- Describe what you want to build from scratch, then iterate
- After 5–6 exchanges, ask Claude to review the final code
- Save your best prompts in your
prompts.mdlibrary
Week 4 Done!
Mark it complete and keep your momentum going.