Bug hunt! Find the mistakes in this HTML

⏱ 25 min debug Ages 9 & 12

💡 The big idea

Every developer spends a lot of time finding bugs. It's not a sign of failure — it's the job. Training your eye to spot mistakes in code is one of the most valuable skills you can build. Today you're going to find 5 deliberate bugs.

🐛

Find all 5 bugs — click each one!

▶

There are 5 bugs hidden in this HTML. Click each bug to mark it found. Hint: look for missing closing tags, typos, wrong nesting, missing quotes, and wrong case.

<html> <head><title>My Pet Page</title></head> <body> <H1>My Amazing Pet</H1> <p>My dog is very <b>fluffy.</p></b> <img src=dog.jpg> <a href="https://dogs.com>Learn about dogs</a> </body> </html>

Bugs found: 0 / 5

🗣 Next level: Ask Claude to generate a new buggy HTML page about a different topic — then hunt those bugs too!
Prompt: "Write an HTML page about [topic] with exactly 5 hidden bugs: 1 missing closing tag, 1 tag typo, 1 wrong nesting, 1 missing quote, 1 uppercase tag. Reveal answers only when I ask."

📝

Lesson quiz — test yourself!

▶

✅

Wrap-up discussion questions

▶

1️⃣ What were the 5 types of bugs in today's code?

2️⃣ Why is wrong tag nesting a problem?

3️⃣ How do professional developers find bugs in their code? (ask Claude if you're not sure!)