You got excited about the new possibilities for layout design. Now you want to try some things out. You want to learn the new CSS. Where should you start?
1) Rachel Andrew
You should get to know Rachel Andrew's work. She's been writing, presenting, demoing, and advocating for new layout technology for several years now. And she has a Giant Pile of Helpful.
- Books by Rachel, including Get Ready for CSS Grid Layout
- Rachel built an entire website of examples of Grid: gridbyexample.com
- She's presented at dozens of conferences, search for videos of her talks and watch the most recent ones for the most up-to-date information
- Best of all, Rachel has made a video series for learning All the CSS for Layout, from floats to display:table, from Flexbox to Grid: The CSS Workshop. It's a high-quality course that costs money to access. Meaning she gets paid, and you get an efficient way to really go deep with this stuff. It's totally worth it, if you can afford the $200 for the whole course.
- And check out her blog and website for more.
2) Flexbox Games
There are several games for learning Flexbox — or really, for learning the Alignment module. Doing some fun drills is a great way to master your memorization of the new lingo.
- Flexbox Froggy
- Flexbox Defense
- A Flexbox Game at Webflow. Instead of writing code, you use the Webflow tool interface to apply style to elements. It'll focus you more on the mental model for what's possible, and take you into more complex possibilities than some of these other games.
- Flexy Boxes — not really a game, but a way to manipulate the code quickly to see what happens.
- Do you know of any others? Email me and let me know!
3) Dive In
Really, the best way to learn how to code CSS is to code some CSS. Download Firefox Nightly for the most-recent implementation of Grid. It will just work in Nightly, you don't have to flip a flag.