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

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass

Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass

Sources: udemy
Have you have been taking courses that are not up to date or courses that after finishing them you will immediately know that is not what they promised to be in
95 hours 30 minutes
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
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Sources: udemy, Brad Traversy
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HT...
18 hours 13 minutes 45 seconds
Beyond CSS

Beyond CSS

Sources: kevin powell
Beyond CSS is a course designed to help you use modern CSS and tools like Sass and PostCSS in order to get control of your stylesheets.
18 hours 12 minutes 41 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