Calculate a width — practice exercise

What you'll be asked to do

1. 1.Calculate a widthexercise · easy · 10 min

   Make #box 100px wide using calc.

   Passes when: Make #box 100px wide using calc.

2. 2.Use a custom propertyexercise · easy · 10 min · practice plan

   Define a variable and use it for the padding.

   Passes when: Define a variable and use it for the padding.

3. 3.Clamp a sizeexercise · easy · 10 min · practice plan

   Clamp the width between 100px and 300px with a 200px ideal.

   Passes when: Clamp the width between 100px and 300px with a 200px ideal.

4. 4.Take the smaller valueexercise · easy · 10 min · practice plan

   Use min() so the width never exceeds 150px.

   Passes when: Use min() so the width never exceeds 150px.

5. 5.A calculated cardexercise · medium · 10 min · practice plan

   Combine a variable with calc for the padding.

   Passes when: Combine a variable with calc for the padding.

6. 6.Fix the missing spaces in calcbug fix · easy · 8 min

   calc needs spaces around its plus sign.

   Passes when: calc needs spaces around its plus sign.

7. 7.Fix the variable used without var()bug fix · easy · 8 min · practice plan

   A custom property is read with var().

   Passes when: A custom property is read with var().

8. 8.Fix the clamp arguments out of orderbug fix · easy · 8 min · practice plan

   clamp takes minimum, ideal, maximum.

   Passes when: clamp takes minimum, ideal, maximum.

9. 9.Fix max used where min was meantbug fix · easy · 8 min · practice plan

   To cap a value at 150px, use min().

   Passes when: To cap a value at 150px, use min().

10. 10.Fix the variable that was never definedbug fix · easy · 8 min · practice plan

    The custom property has no value to read.

    Passes when: The custom property has no value to read.

Between them these tasks cover calc, var and clamp and min/max.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.