Mastering CSS Layout

1h 27m 20s
English
Paid

Course description

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.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 26 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Mastering CSS Layout Welcome

All Course Lessons (26)

#Lesson TitleDurationAccess
1
Mastering CSS Layout Welcome Demo
02:40
2
Introduction to Design Patterns
02:33
3
The Stack Design Pattern
03:01
4
The Inline-Cluster Design Pattern
01:29
5
The Split Design Pattern
01:17
6
The Cover Design Pattern
01:33
7
The Center Design Pattern
02:27
8
The Column-Drop Design Pattern
01:45
9
The Grid Design Pattern
02:00
10
Introduction to Application
06:08
11
The Stack Design Pattern in CSS Grid
04:27
12
The Inline-Cluster Design Pattern in CSS Grid
06:15
13
The Split Design Pattern in CSS Grid
03:20
14
The Cover Design Pattern in CSS Grid
03:27
15
The Center Design Pattern in CSS Grid
03:33
16
The Grid Design Pattern in CSS Grid
05:28
17
The Stack Design Pattern in Flexbox
01:48
18
The Inline-Cluster Design Pattern in Flexbox
04:14
19
The Split Design Pattern in Flexbox
04:43
20
The Responsive Split Design Pattern in Flexbox
10:14
21
The Cover Design Pattern in Flexbox
02:58
22
The Center Design Pattern in Flexbox
01:48
23
The Column Drop Design Pattern in Flexbox
05:04
24
CSS Grid vs CSS Flexbox
01:51
25
Other Layout Techniques
01:33
26
You're done!
01:44

Unlock unlimited learning

Get instant access to all 25 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Flexbox Simplified

Flexbox Simplified

Sources: kevin powell
Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometime...
4 hours 41 minutes 57 seconds
Beginner Tailwind

Beginner Tailwind

Sources: Chris Sev
Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework. If you want a CSS framework that has pre-built components, then Tailwind...
9 hours 33 minutes 19 seconds