The idea behind this room
BEFORE
ONE WORKING APPROACH
Watch out for
Inspect / download your current example
This is the actual HTML, CSS and JavaScript used by the preview. The controls are constrained experiments, not an unrestricted code editor.
AN ADVENTURE IN REAL-WORLD WEB SKILLSThe web is broken.
The web is broken.
You have the keys.
Enter a miniature city of browser bugs. Follow the clues, try a repair and bring each district back to life.
12 hands-on roomsReal browser checksNo timer. Unlimited retries.
RESTORATION CONSOLE v1.0
LAYOUT
PEOPLE
LOGIC
0 / 12 systems restored
Your progress stays in this browser. No signup, AI service or external account needed.
YOUR MISSION MAP
One repair at a time.
Follow the route or explore any room. A completed room means a passing repair and a correct explanation.
Your mission
02 / FOLLOW THE EVIDENCE
0 attemptsDid the behavior improve?
Run the checks to see measured results.
Recent attempts in this room
TAKE YOUR LEARNING WITH YOU
Your repair notebook.
Keep your notes, completed rooms and current experiments. Browser cleanup can erase local progress, so save a backup.
Learn to investigate, not guess.
Observe the symptom
Look at the broken behavior before touching a control. Ask what you expected and what actually happened.
Change one thing
Make a small experiment. Use the evidence to distinguish an improvement from a fix that merely hides the problem.
Test the edges
Check narrow screens, boundary values, nested clicks and empty lists. A happy-path example is only the beginning.
Continue learning with Debugging Detective Lab, DOM & Events Lab and Web Accessibility Studio.
Reference reading: MDN box sizing · MDN buttons · W3C contrast guidance.