This website is nothing more than a set of small demos for the idea of using flexbox and grids to clean up and simplify CSS. Most everything else about CSS stays. Filters, transforms, attributes, and everything that applies to the visual display of the components of a design. What gets removed is div heavy, class heavy, not-semantic-at-all layout systems cluttering the real information available through simple HTML tags.
In short, if you're writing this:
You could write this if you use flexbox, grids, and variables:
I demonstrate the idea with a series of copies of existing websites and other layout problems people frequently encounter. If you have a suggested layout challenge for me, then tell me on Twitter @lzsthw and I'll give it a shot.
This website is a learning project by Zed A. Shaw, the author of many courses at Learn Code the Hard Way and will hopefully result in a good CSS component to Learn JavaScript the Hard Way. If you find flaws in the reasoning or have suggestions for how to do it better, contact me @lzsthw on Twitter and get a special thank you in the credits of this site and the course.