The Broken Website Detective
Something is wrong with this website.
Your mission
Calling all detectives! The Coding Club website is full of mistakes: a picture won't load, the links are broken, and the styles have gone missing. Follow the clues on the page back to the bugs in the HTML and CSS, then fix them yourself and solve six more cases.
Explore
Find all six clues: click everything on the broken page that looks wrong.
The Coding Club website is broken, and the club needs a detective! Look at the page and click anything that seems wrong: text, the picture, the links. Each clue leads to a mistake in the code.
Case board
0 of 6 clues found
Experiment
Fix the code until all six bugs are gone.
Files in this website: robot.jpg campus.jpg about.html contact.html index.html
Bug report
Six bugs to squash. Each one ticks off when it's fixed.
0 of 6 bugs fixed
Challenge
Six new cases, each with a bug to find and fix. No hints on the page this time!
Detective's checklist
- Is every tag closed, with the matching name?
- Are attribute names spelt right (href, src, alt)?
- Do file names match exactly?
- Email links start with mailto:
- CSS: colons, semicolons and units
- Selectors: . for a class, # for an id
Solve all 6 cases to continue.
Understand
Here is what the detective work taught you, in the words you need for the exam.
Browsers guess instead of complaining
When HTML or CSS has a mistake, the browser doesn't show an error message. It quietly guesses what you meant, or ignores the part it doesn't understand. That's why a broken page often looks almost right. A page that looks fine is not proof that the code is correct, so read the code carefully.
Symptoms, causes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Text after a heading is huge and bold | The heading has no end tag | <h1>Coding Club</h1> |
| An image doesn't show (only its alt text) | src is missing, or the file name is wrong | src="robot.jpg" with the exact file name |
| A link goes to a "not found" page | The href value is misspelt | href="about.html" |
| A link isn't clickable at all | The attribute name is wrong, such as herf | href="contact.html" |
| An email link doesn't open email | mailto: is missing | href="mailto:teacher@example.com" |
| A CSS rule does nothing | The selector doesn't match (# vs . or a missing dot) | .intro for class="intro", #intro for id="intro" |
| One style is ignored | Broken syntax: = instead of :, a missing ; or a missing unit | color: darkorange; font-size: 20px; |
HTML checks
- Close every element you open, with the same name: <h2> … </h2>.
- Nest properly: close the inner element first. Every list item is an li inside its ul or ol.
- Spell attribute names exactly: href, src, alt.
- File names must match exactly, letter for letter.
CSS checks
- Rule shape: selector { property: value; }
- Colon between property and value, never an equals sign.
- Semicolon after each declaration.
- Sizes need units: 20px.
- The selector must match the HTML exactly: .note matches class="note", #title matches id="title".
Exam tip
When a question asks you to "correct" code, look for one problem of each kind: a tag, an attribute name, an attribute value, then the CSS syntax and the selector. Write out the corrected line in full, and say why it was wrong: "the browser ignores color = blue because CSS needs a colon".