General References
Mozilla Developer Network (MDN) has a great reference for CSS. Any property you want to know, it’s there. I use this for
HTML Dog has a CSS reference. I like how they explain shorthand properties, such as background. I find their layout for those more complex properties more readable.
The CSS Cascade is a beautiful website that explains how inheritance works in CSS. This concept is absolutely essential to understand how CSS works. It’s also important to know the cascade works especially if you are trying to override something in the Drupal theme.
Flexbox
Flexbox Zombies game is a great way to learn flexbox. It’s entertaining and has practical examples.
Josh Comeau has written a a great interactive introduction to flexbox. There’s kebabs, Clippy, and cocktail wieners. Very thorough and delightful.
Flexbox.help or the flexbox properties codepen is quick and visual way to see the effects of changing the different properties on your layout.
Complete Guide to Flexbox from CSS Tricks is great for a reference after you’ve learned it. You can read their collapsed sections at the top about the Background and Basics and terminology. But I’ve found that those concepts are more approachable learning from videos and practicing on your own.
Grid
Jen Simmons has some examples of grid and when to use grid vs flexbox. She does some conceptual work on how to think about layout, which I have found useful.
Rachel Andrew has Grid by Example, where she walks you through examples in her grid video series.
The Best Thing to Do
You can watch all the videos and read a hundred Stack Overflow threads, but the best thing to do is practice. Get a CodePen account and start creating something! Practice! Practice! Practice!
