Skip to main content

CSS User Interface — exercises and bug fixes

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

    Show a hand cursor

    easy10 min

    Give #btn a pointer cursor.

  2. 2

    Show a not-allowed cursor

    easy10 min

    Give #input a not-allowed cursor.

  3. 3

    Stop the resizing

    easy10 min

    Prevent #area from being resized.

  4. 4

    Block text selection

    easy10 min

    Stop #label's text being selected.

  5. 5

    Make an element inert

    medium10 min

    Let clicks pass straight through #label.

Find the bug(5)

  1. 1

    Fix the invalid cursor

    easy8 min

    The value for a hand cursor is pointer.

  2. 2

    Fix the missing hyphen

    easy8 min

    The value is not-allowed.

  3. 3

    Fix the resize value

    easy8 min

    Preventing resizing uses none.

  4. 4

    Fix the wrong property

    easy8 min

    Blocking selection uses user-select.

  5. 5

    Fix the clicks that still land

    easy8 min

    Hiding is not the same as passing clicks through.

Ready to write the code?

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

Open the workspace