Welcome to

Mastering CSS Layout

Unlock the Secrets of CSS Layouts with Practical Expertise in Design Patterns

Course Syllabus and Content

Learn the Best Practices and Design Patterns behind every CSS layout. Know exactly what you should and shouldn't do at all times. And develop the intuition to break every layout into its simplest building blocks and the ability to recreate it with both CSS Grid and Flexbox.

Module 1

Introduction

1 Lesson 2 Minutes

Learn why Design Patterns are so important and how they simplify and systemize CSS layouts

Module 2

Design Patterns in CSS Layout

8 Lessons 16 Minutes

Learn what are the 7 design patterns behind every single CSS layout in the world. What they are and when to use each of them.

  • Introduction to Design Patterns

  • 02The Stack Design Pattern
    Sneak Peek00:03:00

    The Stack design pattern is used when you need to stack elements on top of each other and set space between them.

  • The inline-cluster pattern is used to place elements inline, set space between them, and cluster the elements when they run out of inline space.

  • 04The Split Design Pattern
    Sneak Peek00:01:16

    The split pattern is for putting two elements next to each other, each taking up a fraction of the inline space.

  • 05The Cover Design Pattern
    Sneak Peek00:01:32

    The cover pattern is used to vertically center content within an element.

  • 06The Center Design Pattern
    Sneak Peek00:02:26

    The center pattern is used to cap out the inline growth while centering the content inside its parent.

  • 07The Column-Drop Design Pattern
    Sneak Peek00:01:44

    The column-drop pattern is used to a grid-like layout where each row has its column layout.

  • 08The Grid Design Pattern
    Sneak Peek00:01:59

    The Grid pattern creates equally spaced columns that persist across rows instead of the column-drop pattern, which does not.

Module 3

Design Patterns using CSS Grid

7 Lessons 32 Minutes

Deep dive into Design Patterns using CSS Grid. Learn exactly how to build each pattern with CSS Grid and practice your skills.

Module 4

Design Patterns using Flexbox

7 Lessons 30 Minutes

Deep dive into Design Patterns using Flexbox. Learn exactly how to build each pattern with Flexbox and practice your skills.

Module 5

Wrapping up

3 Lessons 5 Minutes

Learn advanced layout techniques, find out when to use Flexbox and when to opt in for CSS Grid and wrap up.

  • 01CSS Grid vs CSS Flexbox
    Sneak Peek00:01:50

    We will consolidate the two spreadsheets into a single spreadsheet with what I consider the optimal versions of each design pattern while acknowledging the good and bad of each version.

  • 02Other Layout Techniques
    Sneak Peek00:01:32

    Other layout techniques complimentary to the design patterns discussed.

  • 03You're done!
    Sneak Peek00:01:43

    Wrap up of the course