CSS Layout Course (How To)

In this course, we're going to learn techniques for better control over our CSS layouts. We’ll cover how the CSS Box Model impacts the presentation of each HTML element, learn to control the position of each element onscreen, and even begin to adjust our layouts for different screen sizes and environments.

What you'll learn

• The CSS Box Model
• CSS Display Property
• CSS Positioning
• CSS Media Queries

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.

Chevron 6 steps

• 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.

Chevron 5 steps

• 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.

Chevron 8 steps

• 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.

Chevron 7 steps

• 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