CF

Mastering CSS Grid 2022 - With 3 cool projects

17h 16m 22s
English
Paid

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

About the Author: 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.

Watch Online 143 lessons

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
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

Related courses

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.