Skip to main content

Debugging CSS — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Debugging CSS lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Outline an element

    easy10 min

    Outline #wrap in 2px solid red to see its box.

  2. 2

    Outline everything

    easy10 min

    Outline every element in 1px solid magenta.

  3. 3

    Tint a box

    easy10 min

    Give #text a translucent red tint to see its extent.

  4. 4

    Find the overflow

    easy10 min

    Outline #wrap and reveal anything spilling out.

  5. 5

    Debug without moving anything

    medium10 min

    Outline #text in 4px lime but keep its border at zero.

Find the bug(5)

  1. 1

    Fix the outline with no style

    easy8 min

    An outline needs a style to be drawn.

  2. 2

    Fix the selector that misses most elements

    easy8 min

    The universal selector is a star.

  3. 3

    Fix the opaque debug tint

    easy8 min

    A debug tint should be translucent so content stays readable.

  4. 4

    Fix the hidden overflow

    easy8 min

    Hiding the overflow conceals the very thing being debugged.

  5. 5

    Fix the border used to debug

    easy8 min

    A border changes the layout; use an outline instead.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace