CSS layout and positioning course

Learn how HTML and CSS work together to build website layouts, and understand display properties from block and inline-block to flexbox.

17
 Video Lessons
Intermediate - Advanced
38min

About this course

If you're used to working with static design tools that let you drag and drop elements anywhere, building for the web can be a tough transition. This course goes over the core concepts you should understand when you build for the web, explaining how page elements relate, along with the many options you have for laying out a page.

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser

Course outline

CORE CONCEPTS

The Box Model

1:54

Intro to Web Layout

2:27

Display Settings

2:54

Padding & Margin

2:48

Width & Height Units

3:59

Floats & Clears

1:52

Flexbox & Grid

Intro to Flexbox

2:27

Centering Elements with Flexbox

1:20

Equal Height Layouts with Flexbox

1:47

Grid layouts overview

2:42

Flexbox vs. Grid

4:00

Advanced Layout

Positioning Overview

1:48

Relative Positioning

1:43

Absolute Positioning

1:43

Fixed Positioning

1:27

Overflow

1:49

17
 video lessons
Intermediate - Advanced
38min