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.

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

Coming soon!

New

The Box Model

Coming soon!

New

1:54

Intro to Web Layout

Coming soon!

New

2:27

Display Settings

Coming soon!

New

2:54

Padding & Margin

Coming soon!

New

2:48

Width & Height Units

Coming soon!

New

3:59

Floats & Clears

Coming soon!

New

1:52

Flexbox & Grid

Coming soon!

New

Intro to Flexbox

Coming soon!

New

2:27

Centering Elements with Flexbox

Coming soon!

New

1:20

Equal Height Layouts with Flexbox

Coming soon!

New

1:47

Grid layouts overview

Coming soon!

New

4:18

Flexbox vs. Grid

Coming soon!

New

4:00

Advanced Layout

Coming soon!

New

Positioning Overview

Coming soon!

New

1:48

Relative Positioning

Coming soon!

New

1:43

Absolute Positioning

Coming soon!

New

1:43

Fixed Positioning

Coming soon!

New

1:27

Z-Index

Coming soon!

New

1:49

Overflow

Coming soon!

New

1:49

17
 Video Lessons
Intermediate - Advanced
38min

Requirements

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

Get started

Lottie inspirations

Get started

Lottie inspirations