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
0:00
/ #1: Mastering CSS Layout Welcome
All Course Lessons (26)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Understanding HTML and CSS
Sources: udemy
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS
17 hours 52 minutes 36 seconds
Tailwind Mastery
Sources: Build UI
Tailwind CSS has become one of the most popular ways to style modern web applications, and for good reason. Its APIs make developers feel incredibly productive, and because it's...
2 hours 34 minutes 57 seconds
Pixel Perfect Figma to Tailwind
Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 seconds
Full-Stack Web Developer Bootcamp with Real Projects
Sources: udemy
This Course covers full process of web development from scratch till deployment with domain name. We will use Node, Express, MongoDB to build Server side which
22 hours 11 minutes 13 seconds
CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
Sources: udemy, Academind Pro
CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at th...
20 hours 54 minutes 47 seconds