Mastering CSS Layout

Mastering CSS Layout

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 26 Lessons (1h 27m) | 434 MB

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

Become confident in building any CSS layout by learning the fundamental CSS Design Patterns and Best Practices that are responsible for all the CSS layouts in the world.

Make CSS easy and intuitive by identifying those building blocks in seconds in every layout and learn how to code each of them using CSS Grid or Flexbox. By the end of this course, CSS will finally “click”.

Everything will make sense and you’ll know how to build from scratch or edit both simple and complex layouts.

WHAT YOU WILL LEARN

  • How to make CSS make sense by understanding the fundamental building blocks of web pages
  • How to build any layout you want and keep it sturdy and unbreakable
  • How to instantly recognize common problems in web layouts
  • What are the 7 Design Patterns that help you solve every layout problem you’re going to ever face
  • How to detect what design patterns were used and where in each layout
  • How to implement these Design Patterns in both CSS Grid and Flexbox
  • What you should and shouldn’t do when building your layouts
  • When to use CSS Grid and when to opt for Flexbox instead (and why)
  • How to become confident in your CSS layout skills
  • How to build layouts in record time
Table of Contents

1 Mastering CSS Layout Welcome
2 Introduction to Design Patterns
3 The Stack Design Pattern
4 The Inline-Cluster Design Pattern
5 The Split Design Pattern
6 The Cover Design Pattern
7 The Center Design Pattern
8 The Column-Drop Design Pattern
9 The Grid Design Pattern
10 Introduction to Application
11 The Stack Design Pattern in CSS Grid
12 The Inline-Cluster Design Pattern in CSS Grid
13 The Split Design Pattern in CSS Grid
14 The Cover Design Pattern in CSS Grid
15 The Center Design Pattern in CSS Grid
16 The Grid Design Pattern in CSS Grid
17 The Stack Design Pattern in Flexbox
18 The Inline-Cluster Design Pattern in Flexbox
19 The Split Design Pattern in Flexbox
20 The Responsive Split Design Pattern in Flexbox
21 The Cover Design Pattern in Flexbox
22 The Center Design Pattern in Flexbox
23 The Column Drop Design Pattern in Flexbox
24 CSS Grid vs CSS Flexbox
25 Other Layout Techniques
26 You’re done!

Homepage