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

New

Intro to Web Layout

New

2:27

Display Settings

New

2:54

Padding & Margin

New

2:48

Width & Height Units

New

3:59

Floats & Clears

New

1:52

Flexbox & Grid

New

Intro to Flexbox

New

2:27

Centering Elements with Flexbox

New

1:20

Equal Height Layouts with Flexbox

New

1:47

Grid layouts overview

New

4:18

Flexbox vs. Grid

New

4:00

Advanced Layout

New

Positioning Overview

New

1:48

Relative Positioning

New

1:43

Absolute Positioning

New

1:43

Fixed Positioning

New

1:27

17
 video lessons
Intermediate - Advanced
38min