Web debugging challenges
In short challenges featuring broken pages, collapsed layouts, failing scripts and faulty requests, you find the cause with developer tools and apply a lasting fix.
Level 201 · 15 lessons · 12 practice labs
Lessons
HTML and CSS
- The styles don’t load
- The overflowing layout
- The invisible button
- The form that won’t submit
- Short task: three layout bugs on one page
JavaScript
- The source of an undefined error
- The event that fires twice
- Responses that arrive out of order
- The vanishing saved data
- Short task: the four bugs in a calculator
Network and server
- The CORS failure
- The mixed content warning
- The redirect loop
- The page that shows an old version
- Capstone: the campaign page that won’t go live
Practice labs
- Find why a stylesheet won't load: Use the network panel to find the wrong path and MIME type problem on a shop site that opens unstyled, and fix it.
- Rein in an overflowing price table: Find what makes a price table cause horizontal scrolling on phones and fix it without breaking the page.
- Find what covers an unclickable button: Find the transparent layer covering a visible but unclickable "Pay" button by inspecting z-index and pointer-events.
- Trace an undefined error to its source: Find the source of a "Cannot read properties of undefined" error on a profile page with breakpoints.
- Fix a form that submits twice: Find the listener bound twice in a form that sends two requests on submit and fix it.
- Fix search results that arrive out of order: Fix a search box where old results overwrite new ones when typing fast, using request IDs or cancellation.
- Find why a draft disappears: Use the storage panel to find that a disappearing draft is being written to the wrong storage.
- Fix an appointment date that shifts by a day: Find and fix the time-zone bug that makes an appointment date show the day before for some users.
- Reproduce a bug that only happens live: Reproduce a bug seen in the minified live build but not in development, using source maps and logs.
- Clear a mixed-content warning: Find images and scripts loaded over http on an HTTPS page and move them to secure addresses.
- Break a www and HTTPS redirect loop: Trace with curl a site stuck in endless redirects because its www and HTTPS rules clash, and fix the rule.
- Solve a page that shows an old version: Inspect cache headers and file names on a page showing some users the old version after a release and apply a lasting fix.
About this course
In short challenges featuring broken pages, collapsed layouts, failing scripts and faulty requests, you find the cause with developer tools and apply a lasting fix.
What you will learn
- HTML and CSS
- JavaScript
- Network and server
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.