Skip to main content

CSS Lists — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Lists 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

    Change the marker

    easy10 min

    Give #list square markers.

  2. 2

    Move the marker inside

    easy10 min

    Put the markers inside the content box.

  3. 3

    Remove the markers

    easy10 min

    Hide the markers on #list.

  4. 4

    Use the shorthand

    easy10 min

    Square markers, positioned inside, in one declaration.

  5. 5

    Reset a list

    medium10 min

    No markers and no indent — the usual navigation reset.

Find the bug(5)

  1. 1

    Fix the misspelled value

    easy8 min

    The marker value is square.

  2. 2

    Fix the wrong property

    easy8 min

    Marker placement uses list-style-position.

  3. 3

    Fix the hidden markers

    easy8 min

    Removing markers uses list-style-type, not display.

  4. 4

    Fix the shorthand order

    easy8 min

    The marker type comes before the position.

  5. 5

    Fix the leftover indent

    easy8 min

    A list reset also needs the default padding removed.

Ready to write the code?

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

Open the workspace