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

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"

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

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

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!

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:

2. Starter Files and Tooling Setup
3. CSS Grid Fundamentals
4. CSS Grid Dev Tools
5. CSS Grid Implicit vs Explicit Tracks
6. CSS grid-auto-flow Explained
7. Sizing tracks in CSS Grid
8. CSS Grid repeat function
9. Sizing Grid Items
10. Placing Grid Items
11. Spanning and Placing Cardio
12. auto-fit and auto-fill
13. Using minmax() for Responsive Grids
14. Grid Template Areas:
    • Area Line Names
    • Areas
15. Naming Lines in CSS Grid
16. grid-auto-flow dense Block Fitting
17. CSS Grid Alignment + Centering
18. Re-ordering Grid Items
19. Nesting Grid with Album Layouts
20. CSS Grid Image Gallery
21. Flexbox vs CSS Grid:
    • Axis Flipping
    • Controls on Right
    • Flex on Item
    • Perfectly Centered
    • Self Control
    • Stacked Layout
    • Unknown Content Size
    • Unknown Number of Items
    • Variable Widths on Each Row
22. Recreating Codepen
23. Bootstrappy Grid with CSS Variables
24. Responsive Website
25. Full Bleed Blog Layout