Udemy

Platform

English

Language

Web Development

Category

Mastering CSS Grid 2021 - With 3 cool projects

The future of layouts. It's like Flexbox, but dialled up to eleven

4.50 (243 reviews)

Mastering CSS Grid 2021 - With 3 cool projects

Students

17.5 hours

Content

Oct 2019

Last Update
Regular Price

WES BOS
Wes Bos
CSS Grid: from fundamentals to real world in about 4 hours
FREE COURSE

What you will learn

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


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.

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



Content

Introduction

Introduction

What you need for this course. PLEASE WATCH!!

Rating this course. PLEASE ALSO WATCH

CSS Grid 101

Grid Containers and Tracks

Creating Grid Containers

Defining Rows and Columns

The grid property

Fixed and Percentage Track Sizing

Track Sizing based on Font Size

Track Sizing based on Viewport

Auto Track Sizes

The Fraction (fr) Unit

Fractions vs Auto

The minmax function

Minmax function gotchas

Understanding max-content and min-content

The fit-content function

The repeat function

Managing Grid Gaps

Grid Gap Updates!!!

Nested grids

A note on nesting

Controlling Grid Items

Reordering Grid Items

Moving Grid Items to different columns

Moving Grid Items to different rows

Moving Grid Items to non adjacent cells

Grid Item spanning basics

The span keyword

Grid Item spanning gotchas

Naming Grid Lines

Spanning Grid Items based on line names

Using multiple line names

Lines names and the repeat function

The grid-column property

The grid-row property

Positioning Grid Items using the grid-area property

Spanning Grid Items using the grid-area property

The grid property reviewed

Controlling Alignment

Aligning Row Tracks

Aligning Column Tracks

The place-content property

Vertically Aligning Grid Items

Horizontally Aligning Grid Items

The place-items property

Vertically Aligning an Individual Grid Item

Horizontally Aligning an Individual Grid Item

The place-self property

Responsive Grids

A review on media queries

Setting viewport for mobile and tablet devices

Positioning Grid Items using areas

Spanning Grid Items using areas

Defining empty grid cells

Gotchas with grid-template-areas

Building responsive grids without media queries

The grid property reviewed again

Implicit Grids and Autoplacement

Implicit vs explicit grids

An introduction to the Autoplacement Algorithm

Understanding Flow

Controlling Flow

Understanding order-modified document order

Understanding locking

Locking grid items

Locking and responsive web design

Locking and responsive web design in action

Understanding Grid Spans

Grid Spans in action

Understanding packing

Packing in action

Bringing it all together part 1

Bringing it all together part 2

The grid property and Autoplacement part 1

The grid property and Autoplacement part 2

CSS Grid Extras

The grid-template property

Absolute positioning

Animating grids

Simplifying Flexbox layouts with CSS Grid

More simplifying Flexbox layouts

When to use Flexbox over CSS Grid

A note of grid item sizing vs flex item sizing

Grid items and the box model

Some Simple Layouts

Building a 4 column layout

Building a sidebar

Vertically aligning text

Centering a modal dialog

Creating a sticky footer

Basic form formatting

Some Advanced Layouts

The Holygrail layout

The Media Objects layout

A Viewport Friendly Image Gallery

Another Viewport Friendly Image Gallery

Animating a Sidebar

A Monthly Calendar

A Newspaper Cover

A Twitter Responsive Layout

A Responsive Movie Gallery

A Responsive Movie Gallery Continued

A Responsive Movie Gallery Finale

Application 1 - A Chat application UI

What we are building

Setting up the basic shell

Building the search conversation section

Building the add conversation section

Building the chat title section

Building the chat form section

Building an individual conversation item

Fixing conversation item sizing issues

Adding more conversation items

Creating some initial chat messages

Sizing and aligning chat messages

Adding chat profile pictures

Adding the finishing touches

Application 2 - A Responsive Uber Eats Clone (Aussie Tucker)

What we are building

Setting up the basic layout for mobile

Building the top header

Defining the main content section layout

Building the search store section

Adding the delivery widget to the main section

Building the store list grid

Building the footer

Modifying the footer for landscape mode on mobile

Dealing with the store list on tablet

Dealing with the footer links on tablet

Dealing with the security section on tablet

Dealing with the store list on larger devices

Adding the delivery widget to the top bar

Ensuring a max width for the entire site

Application 3 - A Responsive YouTube clone

What we are building

Building the top bar

Building the mobile first layout

Building the thumbnail

Building the video title and views

Building the social interaction section

Building the channel details section

Building the related videos autoplay section

Building out the related videos

Building the comments heading section

Building the add comment form

Building out a list of comments

Building out the see response button

Adding the responses

Building related videos in landscape mode for mobile

Swapping comments and related videos

Building related videos in portrait mode for tablet

Building related videos in landscape mode for tablet

Building related videos on large devices

Adding the finishing touches

Conclusion

Congratulations

BONUS LECTURE- OTHER COURSES!!!!!


Reviews

S
Steven31 March 2021

I like so far how everything is being gone over in very fine detail, starting from the basics, with examples covering pretty much everything. This is building up the intuition that I was hoping for from "first steps"

K
Kyle16 February 2021

Overall the course was excellent and I'd recommend it to anyone who is interested in learning grid. The theory portion of the course is large but it goes into depth so you will learn a lot there. The projects are pretty cool and I feel like that is where I personally learned the most by applying the theory. I think the code snippets were kind of bothersome in my opinion though. Most of the time the content within them was small enough to just write out and not have to rush through an explanation of what it does. I can understand using snippets when there is a lot of repetitive HTML, but since this is a CSS course, I would have preferred to have just coded out the contents of the CSS snippets. Anyway, great CSS grid course (way more in-depth than the 'Advanced CSS' course that Jonas offers, although that is a great course too!). Would highly recommend to anyone who is ready to be confident with CSS grid

S
Subhash11 January 2021

This is one of the best course I had, I recommend whom so ever is trying to learn CSS grid and advanced CSS. It definitely deserves a try. The only thing I didn't like was the snippet part, it could be better if there was a text file instead but anyways that is not an issue for any of the student who is in this course. May be it is continent for others. Summary ---- Awesome Course!

Z
Zay7 January 2021

I'm only on the 4th video but I really like how the instructor speaks clearly, shares a lot of detail about what we're learning and has great complimentary visuals as I'm a pretty visual learner. I also like that there's no fluff, they get straight to the point and I'm looking forward to learning more. Hopefully, I get prompted to answer this question later on in the course. I don't see why Udemy asks for a rating so early in the course!

K
Kristy6 January 2021

After finishing Section 2 : Lesson 12, I think I can safely say that I am learning something, but I find the teaching method to be tedious. There are no exercises, no examples of even the most basic of websites layouts that could be created using what we've learned up to this point. I'm aware that later on the instructor gets into actual website layouts, but man.....what a slog.

M
Martin31 October 2020

This was a great introduction to CSS Grid for me. For less than $15 this is a lot of information that would have taken me months to find and decipher on the internet. Thank you to the instructor for taking the time to do this. It was well worth the money. If I could add one note for other participants (2020), you will have to learn about the -ms-grid prefixes and the older spec to make the grid properties work in Internet Explorer. This might save someone else some frustration.

T
Texx27 September 2020

Forget trying to code anything yourself, at least not in any organized manner. And that accent! Sorry but maybe my lowest rating ever for a class on uDemy.

K
Kh13 August 2020

This is a very good course for the beginners who wants master CSS grid. It has in depth explanation of all the properties of CSS Grid. And I really like the 3 massive project especially the youtube one. There is no problem taking the course in 2020 as the main concept is same.

R
Ricardo10 August 2020

El contenido del curso que se muestra se ve interesante espero ya terminar el curso para aprender más.

B
Borislav15 June 2020

Course was very informative and covered everything there is to cover. While this course is excellent for a beginner, it may not be a good option for developers who are looking for a quick refresher on CSS Grid.

F
Francis1 June 2020

This course is great if you want to learn CSS Grid inside and out. Highly recommended. Distinctive Pros: Bite sized lessons. Easy to find a lesson you may need to go over again. Truly in-depth. The option is there to learn all the syntax. Real-world application examples

A
Alfio28 May 2020

I wholeheartedly recommend this course! It is all-inclusive, well explained, excellent follow through on each covered topic, and enjoyable class pace per topic.

P
Phillip21 May 2020

I recommend taking this course. You'll absolutely learn & absorb a lot more about CSS grid from this course then you will from other web dev courses, where you'll only get a single section or even only a single video about CSS grid. You NEED to understand grid thoroughly to accomplish proper responsive layouts that look nice. The course projects are also vigilantly mobile-first design, which after so many supposedly-modern web dev courses that espouse responsive design, is actually so rare it's mind-boggling. This course fills in that flaw so many others have. My praise, however, comes with some small caveats which I am sure can be ironed-out, especially considering my first point. I've discussed these in detail below, because this is the nuance you're probably looking for, however I still recommend taking this course. 1. The course is a little out of date--not in any way that will stop your projects, but with missing layout-relevant property updates to CSS, like object-fit and, most noticeably, gap versus grid-gap. Soon, gap will also be supported for flexbox, so you can expect it to become much more common in the code you'll see around the web. Hopefully the course can be updated with links to resources where you can catch up & keep on top of updates to CSS. There's cool stuff coming like subgrid and aspect-ratio. I think expecting direction to resources (MDN, CSS Tricks, Layout Land, Mozilla Developer on YouTube, etc.) is only fair for a master class. 2. There's 2 bugs you will encounter if you are on Windows using Firefox. One has a solution which is in the FAQs & will hopefully be added to the course content; the other has no simple fix but Firefox's devs are supposedly fixing it this year (2020). However, hopefully the course can be updated with a note about this explaining exactly what the issue is and how to track its status--something we just gotta do as devs. 3. While the projects are responsive, the last one for the YouTube clone stops short of formatting for desktop. The section was already pretty long, but it just needs a max-width on some elements and to move around grid areas again. Fully responsive web designs are needed for portfolio pieces, not ones that stop just short of that, and this project is otherwise the most visually impressive. 4. Aside from responsive design & grid, the demonstrations don't reflect all the best practices for VS Code, HTML or the rest of CSS, things which arguably make coding more accessible and approachable despite being tangents, such as Emmet. Also, there's not much discussion of devtools aside from responsive view. Firefox in particular has tools for CSS grid, and Chrome & Edge are getting grid tools soon as well. These are very helpful and you should know how to leverage them. There's a lot to be excited about with CSS, especially in grid. This course will give you the absolute power of CSS grid, even with its flaws.

F
Firoj15 September 2019

More than awesome. the instructor has simplified most difficult thing in css and front end develompent.


Coupons

DateDiscountStatus
9/13/2019100% OFFExpired
10/5/2019100% OFFExpired
10/12/2019100% OFFExpired
12/21/2019100% OFFExpired
3/3/202050% OFFExpired
4/18/202050% OFFExpired
5/13/2020100% OFFExpired
5/28/202050% OFFExpired
6/26/202050% OFFExpired
6/10/2021100% OFFExpired

2176786

Udemy ID

1/25/2019

Course created date

9/13/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram