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.

15
 Video Lessons
Intermediate - Advanced
30min

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.

Assets

Looking for the assets used in this course? We put all the magic inside a zip file, and you can find it 

right here
.

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

Intro to Flexbox

2:27

Centering Elements with Flexbox

1:20

Equal Height Layouts with Flexbox

1:47

Advanced Layout

Positioning Overview

1:48

Relative Positioning

1:43

Absolute Positioning

1:43

Fixed Positioning

1:27

Overflow

1:49

15
 video lessons
Intermediate - Advanced
30min