Skip to main content

CSS Display — exercises and bug fixes

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

    Use inline

    easy10 min

    Make the #text paragraph flow inline.

  2. 2

    Use inline-block

    easy10 min

    Make #box inline-block.

  3. 3

    Use flex

    easy10 min

    Make #wrap a flex container.

  4. 4

    Use grid

    easy10 min

    Make #wrap a grid container.

  5. 5

    Hide an element

    medium10 min

    Remove #box from the layout entirely.

Find the bug(5)

  1. 1

    Fix the misspelled value

    easy8 min

    The value is inline-block.

  2. 2

    Fix flex spelled as flexbox

    easy8 min

    The display value is flex.

  3. 3

    Fix the hidden element still taking space

    easy8 min

    opacity: 0 leaves the box in the layout.

  4. 4

    Fix grid spelled wrong

    easy8 min

    The value is grid.

  5. 5

    Fix display set on the wrong element

    easy8 min

    The container should be the flex parent.

Ready to write the code?

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

Open the workspace