Skip to main content

Preference Media Queries — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Preference Media Queries 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

    Animate only when welcome

    easy10 min

    When no reduced motion is requested, make #text teal.

  2. 2

    Respond to the colour scheme

    easy10 min

    In a light scheme, make #text navy.

  3. 3

    Respond to contrast

    easy10 min

    When no special contrast is requested, make #text olive.

  4. 4

    Keep the motion guarded

    easy10 min

    #box animates for 0.3s; only remove that under reduced motion.

  5. 5

    Combine two preferences

    medium10 min

    Light scheme navy text, and a 0.3s animation kept outside the reduce branch.

Find the bug(5)

  1. 1

    Fix the wrong motion branch

    easy8 min

    This styling is for people who have not asked for reduced motion.

  2. 2

    Fix the wrong colour scheme

    easy8 min

    This rule is meant for the light scheme.

  3. 3

    Fix the missing prefix

    easy8 min

    The feature is prefers-contrast.

  4. 4

    Fix the motion removed for everyone

    easy8 min

    Stripping the animation unconditionally ignores people who want it.

  5. 5

    Fix the misspelled value

    easy8 min

    The value is no-preference.

Ready to write the code?

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

Open the workspace