Explaining the hard parts of modern CSS with information-dense visualizations.
- Time to relearn! Modern CSS (2024) is much easier and saner, especially with flexbox and grid. Tricks and hacks are the past.
- Show AND explain, not just list some recipes. You can easily Google any CSS task, but why is CSS still hard? Because you missed the basics.
- Visually explained. Densely packed with illustrations and diagrams. A picture is worth a thousand words.
- Tackle the hard parts because that’s what’s frustrating, but important. This is NOT a tutorial to make easy stuff easier.
No-fuss web develepment for everyone
CSS is the most frustrating part of the Web. But unfortunately, making web pages is a very practical skill, even if you are not a professional. Remember, kids in the 2000s can make websites.
- Programmers who write scripts and tools can benefit from some minimal, web-based UIs.
- Amateurs can build their own websites, tweak blog themes. No programming needed.
- Frontend devs who started with frameworks and libraries should review the basics.
Sometimes you can get fast results without learning much, until CSS stops you. The author shares your frustration, so he wrote a book to make it less frustrating. Give the Web another try!
Why is CSS so incomprehensible?
You control a page with 500+ CSS properties. Many are confusingly context-sensitive. You can copy from StackOverflow or LLMs, but when they fail, you are left with trial and error.
You can look up any CSS property from a reference, but often the context in which it works is not obvious. This feels like learning to write by reading a dictionary — the lesson is just not there.
You can read CSS specifications. But many are full of jargon and not very readable. Learning from them is like learning math from Wikipedia — the information is there, but not for you.
Historically, CSS has been amazingly underpowered. Centering stuff was a meme. Basic layouts were a “holy grail”. If you tried web stuff 10 years ago, your impression of CSS is likely just hacks and tricks, like float-based layouts, absolute centering. These obsolete hacks and tricks will be around for decades, making CSS harder than it seems.
Give CSS another try
In this book, I’ll show you that CSS is hard, but not as hard as it seems. If you’re going to do some web stuff, (re)learn the essentials of CSS to save time and reduce frustration.
Pt1. Languages
Pt2. Layout basics
- Layout concepts
- Lines & boxes
display
types- Box model
- Width & height
- Aspect ratio
- Flexbox
- Grid
- Positioned boxes
Pt3. Learn by example
- Web common senses
- Centering stuff
- Sticky footer
- Margin collapse
- Stacking context
- Floats
- Text style
- Text align
- Pseudo-elements