Find the bug, fix it, learn why it happened. 54 challenges across 4 categories.
The card should be perfectly centered both vertically and horizontally inside the container, but it sticks to the top-left corner.
The modal overlay should appear above everything, but it's hidden behind the header despite having z-index: 9999.
Long user names overflow the card width instead of being truncated with an ellipsis.
The product grid should adapt from 3 columns on desktop to 1 column on mobile, but all items stack with zero width.
The header should stick to the top when scrolling, but it scrolls away with the page content.
Two stacked sections should have 60px total spacing between them (30px bottom + 30px top), but they only have 30px.
The sidebar text content overflows its flex container instead of wrapping or shrinking.
A tooltip with position: fixed inside a transformed container positions relative to the container instead of the viewport.
Product images appear stretched and distorted inside their fixed-size containers.
The button text appears shifted up despite using padding for height.
Dropdown menus rely on :hover, but on mobile they require a tap and then stay open. Use a media query to only apply hover effects on devices that support it.
The hero section uses height: 100vh but on mobile browsers the content is hidden behind the URL bar.
A panel should fade in smoothly, but it just appears instantly despite having a transition.
Flex gap doesn't render in Safari 13. Provide a fallback that achieves the same spacing.
A badge should sit at the top-right corner of its parent card, but it positions relative to the viewport.
Content shifts horizontally when a scrollbar appears (e.g., navigating to a longer page). Prevent this layout shift.
The developer removed the focus outline for aesthetics but now keyboard users can't see what's focused. Fix accessibility while keeping it visually clean.
A component should change layout based on its container's width, but the container query has no effect.
Card headers and footers in a grid don't align across columns. Use subgrid to fix cross-card alignment.
Box shadows on child elements are being clipped by the parent's overflow: hidden.
This code should log 0, 1, 2, 3, 4 after 1 second each, but it logs 5 five times instead.
This validation should reject empty strings, but '' == false evaluates to true, letting empty inputs through.
Sorting numbers produces [1, 10, 2, 20, 3] instead of [1, 2, 3, 10, 20].
The event handler loses `this` context when passed as a callback, throwing 'Cannot read property of undefined'.
API errors are silently swallowed — the user sees no error message and the app appears to hang.
Rapid clicks on a 'like' button send multiple API calls and the count goes out of sync.
Modifying a copied object also modifies the original because the copy is shallow.
This component adds scroll listeners each time it mounts but never removes them, causing memory leaks and performance degradation.
parseInt('08') returns 0 in older environments because it interprets the string as octal.
Loading a dashboard with multiple API calls — one failing endpoint causes ALL data to be lost.
0.1 + 0.2 !== 0.3 in JavaScript, breaking price calculations.
Processing items sequentially with async/await inside forEach — but all requests fire at once.
A type check treats null as a valid object, causing property access crashes.
Dynamically added list items don't respond to click events because listeners were attached to elements that didn't exist yet.
This debounce function fires on every keystroke instead of waiting for the user to stop typing.
Reading from localStorage with JSON.parse crashes when the stored value is corrupted or undefined.
Using an object as a dictionary with user-provided keys causes prototype pollution — keys like '__proto__' or 'constructor' break the app.
Optional chaining returns undefined silently, masking the real bug — the data structure changed but the code wasn't updated.
A React component causes an infinite loop because useEffect creates a new object on every render, triggering itself.
new Date('2024-01-15') creates a date at midnight UTC, but displaying it in US timezones shows January 14 instead of 15.
Product images have no alt text, making them invisible to screen reader users.
This clickable card uses a <div> with an onclick handler. Keyboard users can't activate it.
Form inputs use placeholder text instead of labels. Screen readers don't announce what each field is for.
Form validation errors are shown only by turning the input border red. Color-blind users can't distinguish valid from invalid fields.
Opening a modal doesn't move focus to it. Keyboard users can tab to elements behind the overlay.
The page jumps from <h1> to <h4>, breaking the document outline for screen reader navigation.
A hero video autoplays with sound on page load. Users can't pause it and screen reader users don't know it exists.
Screen readers list all links on a page. Multiple 'click here' links are meaningless out of context.
Reading and writing DOM properties in a loop forces the browser to recalculate layout on every iteration.
A scroll handler does expensive work on every frame, causing visible jank at 60fps.
The page takes 5 seconds to show any content because all CSS and JS files block rendering.
A page with 50 product images loads all of them on page load, even those far below the fold.
The entire app (including admin panel, charts library, and PDF generator) is in one 2MB bundle loaded on every page.
A list of 1000 items re-renders completely when a single item's checkbox is toggled.