Mastering CSS Grid 2022 - With 3 cool projects

17h 16m 22s
English
Paid

Course description

CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our device. CSS grid simplifies this process over other existing strategies.

Read more about the course

In this course we take you deep into how to build a variety of different layouts in CSS Grid. We cover the following:

  1. All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them.

  2. Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level. We also show you how to override alignment at the grid item level.

  3. The basics of responsive web design, such as media queries and how they work with mobile / tablet etc.

  4. Grid areas and how it helps simplify responsive web design

  5. The concept of implicit and explicit grids and what the differences are

  6. A deep look into the Autoplacement algorithm

  7. Animation at a high level and what works currently with CSS Grid

  8. How to convert some layouts in Flexbox to use CSS Grid instead

  9. When to use Flexbox over CSS Grid

Once we cover all of these concepts, we then go about showing you some basic layout problems and how they can be solved. This includes:

  1. Column based layout

  2. Basic Sidebar layout

  3. Vertical Text alignment

  4. Modal alignment

  5. Stick footer layout

  6. Formatting form fields

And hopefully in future much more. We then look at some advance layout topics such as:

  1. The Holygrail layout

  2. The Media Objects layout

  3. A Viewport Friendly Image Gallery

  4. A Responsive Image Gallery

  5. An Animated Sidebar

  6. A Monthly Calendar layout

  7. A Newspaper Cover layout

  8. A Responsive Twitter Clone Layout

  9. A Responsive Movie Gallery

Then if you haven't had enough, we have 3 real life application examples that will give you the experience you need. They are:

  1. A Chat UI interface

  2. An Uber Eats Clone Responsive Application

  3. A YouTube Clone Responsive Application

Who this course is for:
  • Web Developers
  • Web Designers
  • User Experience Designers
  • Front End Developers
  • Full Stack Developers

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online Mastering CSS Grid 2022 - With 3 cool projects

0:00
/
#1: Introduction

All Course Lessons (143)

#Lesson TitleDurationAccess
1
Introduction Demo
09:24
2
What you need for this course. PLEASE WATCH!!
04:59
3
Rating this course. PLEASE ALSO WATCH
03:24
4
CSS Grid 101
13:59
5
Creating Grid Containers
02:29
6
Defining Rows and Columns
08:39
7
The grid property
01:45
8
Fixed and Percentage Track Sizing
03:28
9
Track Sizing based on Font Size
03:59
10
Track Sizing based on Viewport
08:00
11
Auto Track Sizes
05:47
12
The Fraction (fr) Unit
10:15
13
Fractions vs Auto
02:46
14
The minmax function
10:01
15
Minmax function gotchas
07:06
16
Understanding max-content and min-content
05:17
17
The fit-content function
05:50
18
The repeat function
06:13
19
Managing Grid Gaps
05:44
20
Nested grids
01:17
21
Reordering Grid Items
07:01
22
Moving Grid Items to different columns
07:56
23
Moving Grid Items to different rows
07:07
24
Moving Grid Items to non adjacent cells
09:06
25
Grid Item spanning basics
09:59
26
The span keyword
07:59
27
Grid Item spanning gotchas
04:08
28
Naming Grid Lines
05:50
29
Spanning Grid Items based on line names
07:20
30
Using multiple line names
04:59
31
Lines names and the repeat function
04:05
32
The grid-column property
08:03
33
The grid-row property
05:19
34
Positioning Grid Items using the grid-area property
10:49
35
Spanning Grid Items using the grid-area property
06:26
36
The grid property reviewed
04:54
37
Aligning Row Tracks
06:09
38
Aligning Column Tracks
02:30
39
The place-content property
04:57
40
Vertically Aligning Grid Items
03:30
41
Horizontally Aligning Grid Items
02:29
42
The place-items property
03:42
43
Vertically Aligning an Individual Grid Item
02:06
44
Horizontally Aligning an Individual Grid Item
01:38
45
The place-self property
02:43
46
A review on media queries
11:53
47
Setting viewport for mobile and tablet devices
03:28
48
Positioning Grid Items using areas
08:42
49
Spanning Grid Items using areas
08:04
50
Defining empty grid cells
01:39
51
Gotchas with grid-template-areas
02:19
52
Building responsive grids without media queries
09:08
53
The grid property reviewed again
08:03
54
Implicit vs explicit grids
06:02
55
An introduction to the Autoplacement Algorithm
02:48
56
Understanding Flow
07:14
57
Controlling Flow
07:51
58
Understanding order-modified document order
04:28
59
Understanding locking
12:22
60
Locking grid items
12:32
61
Locking and responsive web design
09:52
62
Locking and responsive web design in action
07:17
63
Understanding Grid Spans
04:30
64
Grid Spans in action
08:11
65
Understanding packing
05:52
66
Packing in action
03:37
67
Bringing it all together part 1
14:48
68
Bringing it all together part 2
15:00
69
The grid property and Autoplacement part 1
10:45
70
The grid property and Autoplacement part 2
10:10
71
The grid-template property
06:51
72
Absolute positioning
05:56
73
Animating grids
05:11
74
Simplifying Flexbox layouts with CSS Grid
11:33
75
More simplifying Flexbox layouts
11:45
76
When to use Flexbox over CSS Grid
13:14
77
Grid items and the box model
13:20
78
Building a 4 column layout
04:16
79
Building a sidebar
03:44
80
Vertically aligning text
03:05
81
Centering a modal dialog
04:40
82
Creating a sticky footer
04:32
83
Basic form formatting
12:18
84
The Holygrail layout
11:44
85
The Media Objects layout
09:20
86
A Viewport Friendly Image Gallery
06:28
87
Another Viewport Friendly Image Gallery
05:32
88
Animating a Sidebar
05:52
89
A Monthly Calendar
12:15
90
A Newspaper Cover
13:07
91
A Twitter Responsive Layout
20:35
92
A Responsive Movie Gallery
12:04
93
A Responsive Movie Gallery Continued
10:24
94
A Responsive Movie Gallery Finale
08:55
95
What we are building
02:04
96
Setting up the basic shell
15:51
97
Building the search conversation section
04:31
98
Building the add conversation section
05:32
99
Building the chat title section
05:29
100
Building the chat form section
06:44
101
Building an individual conversation item
11:02
102
Fixing conversation item sizing issues
05:51
103
Adding more conversation items
03:05
104
Creating some initial chat messages
08:15
105
Sizing and aligning chat messages
06:15
106
Adding chat profile pictures
07:23
107
Adding the finishing touches
01:24
108
What we are building
05:51
109
Setting up the basic layout for mobile
04:58
110
Building the top header
07:26
111
Defining the main content section layout
07:06
112
Building the search store section
07:14
113
Adding the delivery widget to the main section
11:53
114
Building the store list grid
13:13
115
Building the footer
11:01
116
Modifying the footer for landscape mode on mobile
03:39
117
Dealing with the store list on tablet
03:16
118
Dealing with the footer links on tablet
06:14
119
Dealing with the security section on tablet
01:39
120
Dealing with the store list on larger devices
02:06
121
Adding the delivery widget to the top bar
16:10
122
Ensuring a max width for the entire site
13:44
123
What we are building
05:22
124
Building the top bar
10:25
125
Building the mobile first layout
08:49
126
Building the thumbnail
02:37
127
Building the video title and views
03:13
128
Building the social interaction section
11:57
129
Building the channel details section
13:10
130
Building the related videos autoplay section
07:15
131
Building out the related videos
13:23
132
Building the comments heading section
07:45
133
Building the add comment form
06:01
134
Building out a list of comments
15:16
135
Building out the see response button
07:21
136
Adding the responses
06:48
137
Building related videos in landscape mode for mobile
09:07
138
Swapping comments and related videos
04:42
139
Building related videos in portrait mode for tablet
04:08
140
Building related videos in landscape mode for tablet
09:57
141
Building related videos on large devices
03:42
142
Adding the finishing touches
08:24
143
Congratulations
03:41

Unlock unlimited learning

Get instant access to all 142 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

The HTML & CSS Bootcamp 2023 Edition

The HTML & CSS Bootcamp 2023 Edition

Sources: udemy
This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll...
37 hours 18 minutes 8 seconds
CSS for JavaScript Developers

CSS for JavaScript Developers

Sources: Josh Comeau
Learn CSS confidently with this interactive course designed for JavaScript developers. Understand CSS systems to enhance your web development skills and...
Wizard zines. Zine 14 pack

Wizard zines. Zine 14 pack

Sources: Julia Evans
Wizard zines is a little different from other tech publications. Here’s my approach: stick to fundamentals: wizard zines focuses on fundamentals: things that...
CSS Simplified

CSS Simplified

Sources: webdevsimplified.com
Learn how to create beautiful websites with over 100 video tutorials and 20+ unique projects designed to make learning CSS as easy and understandable as...
15 hours 17 minutes 44 seconds
CSS Animations & Transitions

CSS Animations & Transitions

Sources: leveluptutorials
Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitions. In practice, ...
2 hours 9 minutes 35 seconds