CSS Grid Video Course

Hey! These are the starter files and finished solutions. Grab the full course over at CSSGrid.io.

Course FAQ

Q: I'm getting "This is meant to be run from within npm script."

Not sure why this is happening, but try these commands instead:

windows: npm run start:win32

mac and linux: start:darwin:linux

Very few people get this, but please contact me if you find out why npm start command isn't running.

Q: I'm getting Browsersync Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

This is because some versions of Firefox are "FirefoxDeveloperEdition" and some new downloads are "Firefox Developer Edition". If you had downloaded the browser before the course, just remove the spaces from the package.json command so it says "FirefoxDeveloperEdition"

Q: I can't see the lines / numbers of Firefox' CSS Grid Inspection Tools

Make sure to turn off both "Use recommended performance settings" & "Use hardware acceleration when available“ within Preferences > Performance

Community CSS Grid Content

Feel free to submit a PR adding a link to your own recaps, guides or reviews!

Course Review by @bencodezen
Recap and lessons learned by @mkuehb
cssgrid.io course review by @krzysztof_zuraw
My gh-page by @herminiotorres

A note on Pull Requests

These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.

The starter files + solutions will be updated if/when the videos are updated.

Thanks!

Live editable examples

I recommend you use the files in the repo, but if you prefer to use JSFiddle instead, here are all the starter files ready to go:

heilop/css-grid