Lesson 10 · the FINAL BOSS 👾 · about 60 minutes
👾 FINAL BOSS: Vibe Code With AI — and Understand Every Line
This is the mission you started with: get an AI to build a landing page for your product, then prove you understand exactly what it wrote. Everything you learned was training for this fight.
🎬 Watch first (90 seconds)
The secret weapon you built
Most people who vibe code get stuck the moment something breaks, because the AI's code is a mystery box to them. Not you. You now know:
- 🧱 HTML — tags, elements, attributes, the skeleton, semantic boxes (L1–L4, L9)
- 🎨 CSS — selectors, the box model, flexbox (L5–L7)
- ⚡ JavaScript — find a brick, listen for a click, change something (L8)
⚔️ Boss fight — round 1: Ask like a pro
Open your AI (Claude!) and ask it to build a landing page. But a pro prompt beats "make me a website". A pro prompt says what, for whom, and what parts:
Build a landing page for my product "Robo Sneakers" —
shoes for kids that tie themselves.
I want:
- a hero section with a big headline and a Buy button
- 3 feature cards side by side (use flexbox)
- a footer
- one HTML file only, with the CSS in a <style> tag
and the JavaScript in a <script> tag
- when I click Buy, show a fun messageSee what you did there? You just used the words hero, cards, flexbox, footer — you speak the AI's language now. Save what it gives you as practice/ai-landing.html and open it in your browser.
🔍 Boss fight — round 2: The Code Detective checklist
Now open the AI's code in VS Code and hunt for each of these. Tick them off — for real, on paper or out loud:
- Find the skeleton:
<!DOCTYPE html>,<head>,<body>. (Lesson 2) - Find where the CSS lives and pick ONE rule. Say out loud: who does it select, what does it change? (Lesson 5)
- Find a box-model property — padding, margin, or border-radius — and predict what happens if you double it. Then do it. Were you right? (Lesson 6)
- Find the
display: flex. Which element is the track, and which are the train cars? (Lesson 7) - Find the JavaScript. Point to: where it finds the button, where it listens for the click, and what it changes. (Lesson 8)
- Find ONE thing you've never seen before. Ask the AI: "Explain this line like I'm 10." That question is a superpower — use it forever.
🛠️ Boss fight — round 3: Take control
Prove the page is YOURS, not the AI's. Make these three changes by hand, without asking the AI:
- Change the hero background color.
- Add a 4th feature card (copy a card element, edit the words).
- Change what the Buy button says when clicked.
} missing? These three catch 90% of all bugs — even for grown-up engineers.
🕹️ Can you read AI code? Prove it!
Below is a real chunk of AI-style code. Read it, then answer the quiz UNDER it. No running it — just your eyes and your brain. This is the actual final exam.
<section class="hero">
<h1>Mega Slime 3000</h1>
<p>The only slime that glows in the dark.</p>
<button id="order-btn">Order now</button>
<p id="thanks"></p>
</section>
<style>
.hero {
background-color: #222;
color: white;
text-align: center;
padding: 60px;
}
#order-btn {
background-color: gold;
border: none;
padding: 12px 24px;
border-radius: 999px;
}
</style>
<script>
const btn = document.getElementById("order-btn");
btn.addEventListener("click", function () {
document.getElementById("thanks").textContent = "🎉 Order received!";
});
</script>✍️ The last task: fix the AI's bug
AIs write bugs too! This AI code has one sneaky bug that makes the button do nothing. You've fixed this exact kind of bug before. Find it:
🏆 Did you win?
You beat the final boss if ALL of these are true:
- ✅ An AI built
ai-landing.htmlfrom YOUR prompt for YOUR product - ✅ You found the skeleton, a CSS rule, the flexbox, and the JS click-listener in its code
- ✅ You changed the color, added a card, and changed the button message — by hand
- ✅ You scored 4/4 on the reading quiz above
If yes: you did it. That was the whole mission. Tell your teacher (me!) — I'll write it into your learning records, and we'll pick your next adventure (publishing your page on the real internet? making it look good on phones? a game?).