English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 45 Lessons (6h 21m) | 1.15 GB
Explore CSS layouts in-depth, including Grid and Subgrid, Flexbox, responsive image techniques, media queries, and container queries. Learn how to apply these techniques to your next website, even if you haven’t worked with CSS layouts before.
You’ll learn:
- Discuss Flexbox and Grid, including all of their major features and properties
- Compare and contrast the differences between Flexbox and Grid, including when to use each method
- Explore responsive image techniques and when to use each
- Investigate media queries and container queries, including little-used properties
- Examine subgrid in detail and the problems it solves
Table of Contents
1 Introduction
2 Grid Overview
3 Your First Grid
4 Inspecting Grid with Dev Tools
5 Basic Grid Exercise
6 Grid Layout Exercise
7 Grid Span Repeat
8 Grid Span Repeat Exercise
9 Grid Template Area
10 Grid Template Area Exercise
11 Responsive Design Media Queries
12 Media Queries with Grid Layouts
13 Media Queries with Grid Exercise
14 Mobile-First Layouts with Grid
15 Featured Card Styles
16 Two Column Card Layout
17 Three Column Card Layout Exercise
18 Desktop Layout Exercise
19 Overlapping Rows Columns
20 Overlapping Grid Layout
21 CSS Animated Grid Exercise
22 Grid Margin
23 minmax auto-fit auto-fill
24 Subgrid
25 Subgrid in Action
26 Moons of Saturn Mobile Layout
27 Moons of Saturn Adding a Media Query
28 Moons of Saturn Medium Width
29 Moons of Saturn Desktop
30 Where to use Flexbox
31 flex-direction flex-wrap
32 justify-content align-items
33 Navbar with Flexbox
34 Responsive Navbar on Desktop
35 Flexbox Layout Exercise Medium Screens
36 Flexbox Layout Exercise Large Screens
37 Responsive Images Overview
38 srcset sizes Attributes
39 Picture Element
40 Container Queries
41 Container Size Queries
42 Featured Card Exercise
43 Card Page Layout
44 Changing Themes with Style Queries
45 Wrapping Up
Resolve the captcha to access the links!