Have a question?
Message sent Close
4.8 out of 5
4.8
213 reviews on Udemy

Mastering CSS Grid 2021 – With 3 cool projects

The future of layouts. It's like Flexbox, but dialled up to eleven
Instructor:
Daryl Duckmanton
30,664 students enrolled
English [Auto]
How to implement responsive layouts using CSS Grid
How to build regular layouts in CSS Grid
All properties that are part of the CSS Grid Specification
How to build commonly used sites such as YouTube using CSS Grid

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

Controlling Grid Items

Controlling Alignment

Responsive Grids

CSS Grid Extras

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 out of 5
213 Ratings

Detailed Rating

Stars 5
112
Stars 4
71
Stars 3
23
Stars 2
5
Stars 1
2
b6f9217fba8a0252380e33cf66dfa6a7
Course available for 1 day
30-Day Money-Back Guarantee

Includes

17 hours on-demand video
4 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion

External Links May Contain Affiliate Links read more

Join our Telegram Channel To Get Latest Notification & Course Updates!
Join Our Telegram For FREE Courses & Canva PremiumJOIN NOW