CSS Layout

The CSS Box Model

Gaining more control over your CSS layouts starts with one very important concept: understanding the CSS Box Model. The Box Model is what describes the amount of space each element takes up on the page.

• Introducing the Box Model

  3:52

• Padding

  7:14

• Border

  6:10

• Margin

  10:28

• Quiz: The Box Model

  6 questions

• Padding, Borders, and Margins

  5 objectives

Box Model Concepts

In our last stage, we learned the parts of the CSS Box model. We also learned that padding and border impact the size of a CSS box, while margin doesn’t.

In this stage, we’re going to become familiar with a few advanced concepts, including box-sizing, max-width, and viewport units.

• Box-sizing

  5:45

• max-width

  3:23

• Viewport Units

  4:43

• Viewport Units

  2 objectives

• Quiz: Box Model Concepts

  5 questions

CSS Layout Techniques

In this stage, we'll work with CSS Layout Techniques, including working with the display property, CSS positioning, and float and clear.

• Display

  7:30

• Display

  2 objectives

• Relative and Absolute Positioning

  8:14

• Fixed and Sticky Positioning

  6:46

• Positioning Elements

  4 objectives

• Float

  4:45

• Float

  2 objectives

• Quiz: CSS Layout Techniques

  6 questions

CSS Media Queries

As users, we look at websites and applications every day on a variety of screens, from laptops to tablets to phones. How do developers keep their web content legible in such a broad variety of viewing environments?

In this stage you’ll learn one very important step in optimizing your content for different platforms: writing CSS media queries.

• What are Media Queries?

  6:37

• Targeting Media Features

  6:03

• Media Queries

  2 objectives

• The meta Viewport Declaration

  5:00

• Complex Media Queries

  4:00

• Complex Media Queries

  1 objective

• Quiz: Media Queries

  5 questions