Skip to main content

CSS Math Functions — exercises and bug fixes

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

    Add with calc

    easy10 min

    Make #box 100px + 50px wide.

  2. 2

    Subtract with calc

    easy10 min

    Make #box 200px minus 40px wide.

  3. 3

    Pick the smaller value

    easy10 min

    Use min() so the width is the smaller of 400px and 250px.

  4. 4

    Pick the larger value

    easy10 min

    Use max() so the width is the larger of 120px and 300px.

  5. 5

    Clamp a value

    medium10 min

    Clamp the width between 100px and 200px with a 500px preference.

Find the bug(5)

  1. 1

    Fix the missing spaces

    easy8 min

    calc() requires spaces around + and -.

  2. 2

    Fix min and max confused

    easy8 min

    min() picks the smallest — max() was intended here.

  3. 3

    Fix the clamp argument order

    easy8 min

    clamp() takes minimum, preferred, maximum in that order.

  4. 4

    Fix the missing calc

    easy8 min

    An arithmetic expression needs calc() to be evaluated.

  5. 5

    Fix the mismatched brackets

    easy8 min

    The closing bracket is missing, so the declaration is dropped.

Ready to write the code?

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

Open the workspace