As most of you know, Wes Bos is responsible for creating some of the best courses out there on popular development topics (that are typically front-end). And with all the buzz about CSS Grid, I was looking forward the day he would release a course on it. Much to my delight, I managed to get early access to the course!

Overview

• Course: CSS Grid (Early Access)
• Instructor: Wes Bos
• Prerequisite: Basic HTML & CSS Knowledge
• Price: Free
• Methodology: Paired Programming
• Length: ~4 hours

Background

I've been wanting to learn more about CSS Grid since I first heard about it back in 2016. Sadly to say, here we are almost two years later and it has sat on the backburner up until now. I've read a few articles and tried a couple of tutorials from time to time; but as much as I don't want to admit it, there was always some excuse to put it off to another time (i.e., browser support, etc.).

Regardless, when I heard that Wes was coming out with a CSS Grid course, I couldn't be more thrilled since his Flexbox course was how I gained a solid understanding of the topic. So as far as I was concerned, the stars had aligned and it was time for me to finally learn CSS Grid.

Review

Love the Paired Programming Teaching Methodology

When it comes to learning a new topic, I personally find nothing works better than actually getting your hands on the keyboard. It's one thing to watch videos showing the possibilities of CSS Grid, but it's really another to try your hand coding it yourself. For those that have never taken a course with Wes Bos, that is exactly what you get.

In fact, not only do you get to practice writing the code and seeing the changes happen live (which only further immerses your understanding of what's happening); but you get to code with Wes which makes it much easier to see where you might have gone wrong when your page looks different than the final result.

Good Mixture of Video & Exercise Length

Overall, the videos are segmented into easily digestable chunks of time. The average lecture is typically about 8-10 minutes, which means you can usually knock out 2-3 lectures easily in a sitting which is phenomenal for making progress.

There are a couple of longer videos, however these are full blown exercises that take you through building a large projects like a responsive website or an image gallery. It's impressive how much you end up doing within that time frame and how much you get exposed to.

The Depth of the Content is Impressive

I've watched enough courses to tell you that it's easy to simply cover the features of a topic. You essentially walk through the documentation and show demos of each aspect. And while there's nothing wrong with that, what makes this course great is that Wes goes beyond what you can find in the documentation.

Not only does he talk about edge cases with how you might think various grid properties will work, but he also spends time going into real-world scenarios of how one might use CSS Grid for various layouts or techniques you probably wouldn't think to use grid for normally. For example, did you know you can use CSS Grid to "absolutely position" elements over one another? I certainly didn't!

In addition, I was impressed with the lecture that he has on a comparison between Flexbox and CSS Grid. He goes through numerous examples of how you might use one in comparison to another and explains why one might be better than another in different cases.

Request: CSS Grid in Production

If there was one thing I could "change", it would have been great to hear Wes' thoughts on trying to use CSS Grid in production codebases that have to support older browsers. From my limited understanding, you use the @supports feature query to segment out your cutting-edge code from the fallback styles.

That said, based on my new knowledge of CSS Grid, the biggest obstacle to using this in production is getting stakeholders to understand that the site will not look the same in every browser. After all, from what I've just learned about CSS Grid, there's no fallback CSS that can replicate what its capable of. If there are polyfills that people are using that are reliable and performant, I'd be curious to learn more about that for sure.

Update: Wes was prompt with responding to this request with the the following article from Rachel Andrew on Using CSS Grid: Supporting Browsers Without Grid. And on that note, it was good to see that my instincts on the topic weren't totally off!

Final Thoughts

Although it's taken me two years to finally get on the CSS Grid train, the wait has been worth it. This course was exactly what I needed to start using CSS Grid within my projects. I can't wait for it to be released to the rest of the world so you can also see just how big of a game changer CSS Grid is!