Skip to main content

CSS Performance — exercises and bug fixes

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

    Contain the layout

    easy10 min

    Isolate #wrap's layout from the rest of the page.

  2. 2

    Contain two things

    easy10 min

    Contain both layout and paint on #wrap.

  3. 3

    Skip offscreen rendering

    easy10 min

    Let the browser skip #wrap until it is needed.

  4. 4

    Reserve the space

    easy10 min

    Give skipped content a 200px placeholder size.

  5. 5

    Hint an upcoming change

    medium10 min

    Warn the browser that #text's transform will animate.

Find the bug(5)

  1. 1

    Fix the invalid value

    easy8 min

    The containment type is layout.

  2. 2

    Fix the comma

    easy8 min

    Containment types are separated by spaces.

  3. 3

    Fix the misspelled property

    easy8 min

    The property is content-visibility.

  4. 4

    Fix the missing placeholder size

    easy8 min

    Skipped content needs a reserved size.

  5. 5

    Fix the hint on the wrong property

    easy8 min

    The transform is what will change, not the colour.

Ready to write the code?

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

Open the workspace