The catz4life adopshun centre is a very broken cat adoption page, on purpose. Your mission: fix it using nothing but your browser’s DevTools.
the story
I built it to support a talk I gave about the browser, the same material that became my four-part DevTools series here on the blog. Slides only get you so far; fixing a real broken page is where DevTools actually clicks.
part 1
unlocking your browser
part 2
your new best friend, the console
part 3
what's actually happening
part 4
level up: sources, performance & your playground
what it does
It is a scavenger hunt. A broken headline to fix in the elements tab, a failed API call to chase down in the network tab, a busted adopt button for the console, and a theme toggle hiding in local storage. Each bug teaches one tab.
where it’s at
Done and reusable. If you are learning DevTools, clone it and go break things (well, fix things).