CSS Grid (original) (raw)

Let's get Griddy with it

Learn CSS Grid with Wes Bos in 25 pretty good videos

From fundamentals to Real World in about 4 hours.

My Account →

Start Learning Today!

Sign up to get immediate access to the course dashboard

You'll get all 25 videos at once so you can binge watch Netflix style.

👌 Almost Done — you'll get a confirmation email any minute now.

Make it happen - commit to #GriddyUp publicly

This isn't going to be another course you sign up for and never do.
Let's see this one through. Commit to it publicly and invite some friends to join you.

CSS Grid is a brand new layout system in CSS! It's not a framework or library - it's an addition to the language that allows us to quickly create flexible, two dimensional layouts.

We can use it to place, size, align and architect designs that were previously difficult or even impossible with floats or flexbox.

CSS Grid may seem a bit daunting with new syntax and layout ideas, but it's fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create layouts for the web forever.

Ready?! Let's Learn CSS Grid Together!

Wes, How is this Free!? What's the Catch?

No catch! A huge thanks to Mozilla Firefox who has sponsored my time to create this course and offer it up for free. Firefox packs some of the best dev tools and in particular their CSS Grid Dev tools make understanding, debugging and visualizing complex grid layouts a snap.

Hey, I'm Wes Bos

Wes Bos

Meet Wes Bos

Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax - a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.

Wes is the author of React For Beginners, Advanced React and GraphQL, ES6 for Everyone and Learn Node which together have sold over 55,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes' free video courses.

Follow @wesbos

4 Hours×25 Videos

Accessible and ESL friendly! English Captions are provided for every video 😘

Frequently, Questions are Asked.

What font / color scheme / editor / terminal is that?

I answer everything over at wesbos.com/uses. Feel free to tweet me any more questions!

What About Browser Support for Grid? What About IE11?! {{insert hipster slight or IE joke Here}}

You need to read Rachel Andrew's article over on Smashing Mag. Even if you decide you can't use it today, I'd recommend still learning it as these older browsers will go away just as quick as grid showed up!

What about Flexbox? Something you did can be done in 1 line less than Grid!

There is an entire video on CSS Grid vs Flexbox. In short, they both do their own thing, but there is also a large amount of overlap in functionality. Watch the video!

I have a question, can I email you?

While I'd absolutely love to help everyone out, there are 167,498 people taking this course and I can't handle that amount of email. If you are a member of one of my premium classes, you can jump into the #CSSGrid room in our Slack channel.

I lost, deleted or never got my welcome email! What do I do?

Log into your account, or create an account with the same email you used to get the series.

Can I host a meetup / study group? Can I stream these in my classroom? Can I arrange a playing?

Yep yep yep - as long as you do not redistribute the videos you are welcome and encouraged to do this.

Can I re-distribute these and then charge money for them?

I can't believe I have to make this a FAQ. No, you silly goose.

Will these be on YouTube too?

Yep - over the next few weeks I'll be dripping them out on my YouTube channel, which you should totally subscribe to.

I found a typo or errata

If it's a typo on the site, please shoot me an email here. If it's a correction in the code, you can submit those via GitHub! Please see the above FAQ if you found a better way.

Thanks!

A huge thanks to everyone who has helped make the course a reality.