Resources
Last updated:
An understanding of the basics of CSS Grid should be sufficient to follow along with the majority of examples on CSS Makeovers. If you’re new to Grid, I think a great place to start is Morten Rand-Hendriksen’s video “CSS Grid Explained in 7 Minutes (with diagrams and code).” As the title suggests, he covers the main concepts quickly, but it doesn’t feel rushed. So it can be a good way to get an overview before exploring some of the other Grid resources listed below.
I’ve also included resources for Flexbox and Shapes. Some of my examples use Flexbox, and some will use Shapes in the future.
CSS Flexbox Resources
- “CSS Flexible Box Layout” on MDN (it’s a series of articles)
- “A Complete Guide to Flexbox” by Chris Coyier, CSS-Tricks
- Flexbox Cheatsheet by Darek Kay
- Flexbox Playground by Gabi
Specification
- CSS Flexible Box Layout Module Level 1 (W3C Candidate Recommendation)
CSS Grid Resources
- Grid by Example by Rachel Andrew
- “CSS Grid Layout” on MDN (it’s a series of articles)
- “A Complete Guide to Grid” by Chris House, CSS-Tricks
Videos
- “CSS Grid Explained in 7 Minutes (with diagrams and code)” by Morten Rand-Hendriksen
- Grid by Example: Learn Grid Layout Video Series by Rachel Andrew
- Layout Land by Jen Simmons (it’s also a video series)
Specifications
- CSS Grid Layout Module Level 1 (W3C Candidate Recommendation)
- CSS Grid Layout Module Level 2 (W3C Working Draft)
CSS Shapes Resources
- “CSS Shapes” on MDN (it’s a series of articles)
- “CSS Shape Editors” by Chris Coyier, CSS-Tricks
Specification
- CSS Shapes Module Level 1 (W3C Candidate Recommendation)