CSS Layout and Modern Styling

Grid, flexbox, container queries and layouts that stop fighting you

4.6(3,117 reviews)54,300 learners

Created by Lena Fischer

Updated April 2026EnglishBeginner12h84 lectures

What you will learn

  • Choose between grid and flexbox without guessing
  • Build responsive layouts that adapt to their container, not just the viewport
  • Understand the cascade, specificity and why your override is not applying
  • Use custom properties for theming rather than a preprocessor
  • Handle typography, spacing and rhythm consistently
  • Write CSS that a colleague can safely delete

Course content

13 sections · 84 lectures · 12h total length

  • What this course covers, and what it does notPreview03:00
  • How to get the most out of itPreview04:00
  • Setting up and downloading the exercise files06:00

  • The box model, honestlyPreview03:00
  • The box model, honestly in detail08:00
  • A closer look at the box model, honestly07:00
  • Worked example: the box model, honestly11:00
  • Where the box model, honestly goes wrong10:00
  • Exercise: the box model, honestly15:00
  • The box model, honestly in practice14:00
  • Two approaches to the box model, honestly06:00

Topics covered

The box model, honestlyFlexboxCSS GridResponsive without breakpoint soupContainer queriesCustom properties and themingCascade layersLogical propertiesTypography and spacing scalesTransitions and motionDebugging layout in devtools

Requirements

  • You have written some HTML and CSS before
  • A browser and a text editor

Description

Most CSS frustration is layout frustration. This course rebuilds your mental model around grid and flexbox, then adds the newer tools — container queries, logical properties, `:has()` — that quietly removed the need for half the old workarounds.

Your instructor

LF
Lena Fischer

Product designer and design-systems lead

4.8 instructor rating2,53,500 learners5 courses

Lena has built three design systems and thrown away two of them. She teaches the parts that survived: naming, tokens, and the unglamorous governance that keeps a system from rotting.

Learner reviews

4.63,117 reviews
  • 5 star64%
  • 4 star28%
  • 3 star5%
  • 2 star2%
  • 1 star1%
  • HC
    Hugo C.28 August 2025

    Exactly what I needed. It assumes you are an adult and does not over-explain.

  • MV
    Mira V.16 October 2025

    Clear explanations without the usual filler. I watched most of it at 1.25x and still followed everything.

  • WK
    Wei K.21 October 2025

    I have recommended this to two colleagues already. The structure makes it easy to dip back into.

  • GN
    Grace N.17 December 2025

    Excellent. The examples are realistic rather than the usual toy versions.

  • BG
    Ben G.12 November 2025

    Exactly what I needed. It assumes you are an adult and does not over-explain.

  • BV
    Ben V.21 March 2026

    Solid content, but a few sections move quite fast and I had to rewatch them.

  • NK
    Niall K.22 February 2026

    Worth it for the section on common mistakes alone — I recognised two things I have been doing wrong for years.

  • WN
    Wei N.23 August 2025

    The pacing is right. Nothing is padded out, and the exercises are short enough that I actually did them.

  • RG
    Rosa G.16 March 2026

    Genuinely well structured. I have started three courses on this topic and this is the first one I finished.

Showing 9 of 3,117 reviews.

Learners also looked at

More from Web Development and beyond.

All Web Development

Python for Data Analysis

Priya Raghunathan

4.7(9,315)
24h162 lecturesBeginner
₹2,299₹4,499
Bestseller

Modern JavaScript From the Ground Up

Amara Osei

4.7(8,412)
28h 30m186 lecturesBeginner
₹2,499₹4,499
Bestseller

Photography Foundations

Yusuf Demir

4.8(6,218)
13h88 lecturesBeginner
₹1,499₹3,299
Bestseller

React in Production

Amara Osei

4.8(6,187)
22h148 lecturesIntermediate
₹2,999₹5,999
Bestseller