Lesson 17 · about 20 minutes · Vibe Coding Mastery

🔍 Read AI Code Like a Detective

The AI hands you a file with 80 lines of code. Do you read it top to bottom like a book? NO WAY. Detectives don't read every page of the phone book — they follow clues. Today you learn the Detective Method that works on ANY file, forever.

🎬 Watch first (90 seconds)

Secret #1: AI code is never random

Here's the big secret that makes all AI code way less scary: the AI builds the same house skeleton YOU already know. A hero at the top, some sections, buttons with ids, a <script> at the bottom with the find-the-brick → listen-for-click → change-a-brick spell. You built that skeleton yourself in lessons 9 and 10! The AI just types it faster and adds more decoration.

So when a big AI file lands in front of you, you're not exploring an alien planet. You're walking into a house built from a blueprint you've seen before.

💡 The one idea of this lesson: the Detective Method Four moves that let you understand ANY unfamiliar file — even ones written by pros:
  1. Skim the body first, top to bottom. Ignore the details — just read the tags. "Header... hero... section... section... footer... script." You're asking: what rooms does this house have?
  2. Find the names. Every class and id is a label the AI chose to be readable: class="hero", id="menu-btn", class="price-card". Names ARE documentation. Read the names, and the code explains itself.
  3. Follow ONE thread. Pick one button. Note its id. Jump to the <script> at the bottom. Find getElementById with that same id. Boom — now you know exactly what clicking that button does. One thread at a time, never the whole spiderweb.
  4. Expect strangers. AI code WILL contain things you haven't learned yet. That's normal FOREVER — even 20-year pros meet strangers in code every week. Don't panic and don't skip the whole file. Zoom in on ONE stranger and ask the AI: "explain this line like I'm 10."

Meet today's stranger: classList 🏷️

Let's practice move #4 right now on a stranger that shows up in TONS of AI code:

panel.classList.add("open");     // stick the "open" sticker on
panel.classList.remove("open");  // peel the "open" sticker off
panel.classList.toggle("open");  // no sticker? stick it. sticker? peel it.

In kid language: classList gives or takes away a class sticker. Why does that matter? Because your CSS can say "anything wearing the open sticker is visible" — so adding or removing the sticker makes different CSS rules apply. One line of JavaScript, and the whole look changes. This is how almost every menu, popup, and dark-mode switch on the internet works!

🕵️ Detective tip See .toggle("open") in a script? Immediately hunt for .open in the CSS. The script and the CSS are partners in crime — the script flips the sticker, the CSS decides what the sticker DOES.

🛠️ Build it (the fun part)

🧪 Your mission Run the full Detective Method on a real AI-generated file — the one the AI wrote FOR YOU. Paper and pencil ready!
  1. Open practice/prompted.html (your lesson 16 page) in VS Code. No prompted.html? Use practice/ai-landing.html from lesson 10 instead.
  2. Move 1 — list the rooms. Skim ONLY the body, top to bottom, reading just the tags. On paper, write the rooms in order, like: header → hero → features → prices → footer → script.
  3. Move 2 — collect 5 names. Write down 5 classes or ids you find, and next to each, your guess of what it's for. class="price-card" → "a card showing a price". Easy, right? The names tell you!
  4. Move 3 — follow one thread. Pick ONE button in the body. Write its id. Scroll to the script. Find the getElementById with that id. Read that handler and write one sentence: "When I click ___, the code ___."
  5. Move 4 — circle one stranger. Find ONE line you don't understand. Circle it on paper. Then ask your AI teacher: "Explain this line like I'm 10: [paste the line]". Write the answer in your own words — now the stranger is a friend.
  6. Read your paper back. You just understood an AI file WITHOUT reading every line. That's the pro move. 🕵️‍♂️🎉

🕹️ Try it right here — the lesson checks your code!

Good news: THESE preview boxes have their electricity ON — buttons really click! Bad news for lazy detectives: the tasks only pass if you truly understood the code. 😏

🔨 Now break it!

Play in Task A's editor — predict BEFORE you look at the preview!

  1. In the CSS, change .panel.open to .panel.opened (don't touch the script). Click the toggle button. The sticker still flips on and off — but nothing appears! The script and CSS stopped speaking the same name. Fix it back.
  2. Change classList.toggle to classList.add. Now the button can OPEN the panel but can never close it. Toggle = flip, add = one-way. Fix it back.
  3. Rename the button's id in the HTML but not in the script. Dead button, silent failure — your old friend from lesson 8. The thread is cut!

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: Element.classList — your first REAL reference page, the dictionary that professional developers use every single day. Heads up: it looks scary and technical at the top. That's normal! Do the detective move: skim past the scary parts straight to the Examples section — that part is totally readable, and now you'll recognize add, remove, and toggle like old friends.