CF

Mastering CSS Grid 2022 - With 3 cool projects

17h 16m 22s
English
Free

Mastering CSS Grid 2022 - With 3 cool projects is a 143-lesson 17 hours 16 minutes self-paced course by Udemy. CSS Grid is a relatively new and unused concept to CSS.

Course facts

Lessons
143
Duration
17 hours 16 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Free

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.

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

Who teaches Mastering CSS Grid 2022 - With 3 cool projects? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Mastering CSS Grid 2022 - With 3 cool projects?

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

What courses are similar to Mastering CSS Grid 2022 - With 3 cool projects?

More courses by Udemy

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling in this course, it's beneficial to have a basic understanding of CSS and HTML. Familiarity with foundational web development concepts will help you grasp the advanced topics discussed in the lessons, such as grid containers, track sizing, and grid item positioning.
What projects will I build in this course?
This course involves building three projects that utilize CSS Grid. These projects are designed to help you apply the concepts you learn, such as creating grid containers, defining rows and columns, using the fraction unit, and managing grid gaps. These practical applications will reinforce your understanding of CSS Grid in real-world scenarios.
Who is the target audience for this course?
The target audience for this course includes web developers and designers who want to enhance their skills in creating responsive layouts using CSS Grid. It is suitable for those looking to simplify layout maintenance and adjustments across different device dimensions. Beginners with basic CSS knowledge can also benefit from the structured learning path.
How does this course compare to other CSS courses in terms of depth and scope?
This course offers a focused exploration of CSS Grid, spanning 143 lessons that cover everything from basic grid concepts to advanced techniques like the Autoplacement Algorithm and order-modified document order. Unlike general CSS courses that cover a broad range of topics, this course provides a deep dive into grid-specific properties and functions, making it ideal for mastering this layout tool.
What specific tools or platforms does this course cover?
The course does not cover any specific tools or platforms beyond CSS itself. The focus is entirely on mastering CSS Grid properties such as grid-area, place-items, and grid-template-areas. Students will learn to create responsive layouts using these grid-specific techniques without relying on additional software or frameworks.
What topics are not covered in this course?
This course does not cover other CSS layout techniques like Flexbox in detail, nor does it delve into JavaScript or backend development. The course is specifically tailored to CSS Grid, ensuring a comprehensive understanding of grid layouts without overlapping into unrelated web development areas.
How much time should I expect to commit to this course?
The course comprises 143 lessons, with the total runtime not specified. As a self-paced course, the time commitment depends on your learning speed and the depth of practice you wish to engage in. Students should allocate time for both watching lessons and applying the concepts through exercises and projects.