Section 1 - Instruction

You've learned about the box model and flexbox - two essential layout concepts. Now let's practice using them together to create clean, organized webpage layouts.

Understanding how spacing and alignment work together is crucial for professional web design.

Engagement Message

Ready to create some amazing layouts?

Section 2 - Practice

Type

Sort Into Boxes

Practice Question

Let's practice identifying the layers of the CSS box model. Sort these properties based on whether they are closer to the center of the element or closer to the outside.

Labels

  • First Box Label: Innermost Layers
  • Second Box Label: Outermost Layers

First Box Items

  • content
  • padding

Second Box Items

  • border
  • margin
Section 3 - Practice

Type

Multiple Choice

Practice Question

You want to create a card-style layout where content has breathing room inside and cards are separated from each other. Which CSS approach would work best?

A. Use only margin for all spacing B. Use padding for inner spacing, margin for outer spacing
C. Use only border for all spacing D. Use width and height for all spacing

Suggested Answers

  • A
  • B - Correct
  • C
  • D
Section 4 - Practice

Type

Fill In The Blanks

Markdown With Blanks

Fill in the CSS to create a centered navigation bar using flexbox:

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal