Continue the Journey
Earlier, I mentioned that my strategy for box shadows used to be “tinker with the values until it looks alright”. If I'm being honest, this was my approach for all of CSS. 😅
CSS is a tricky language because it's implicit. I learned all about the properties, stuff like position and flex and overflow, but I didn't know anything about the principles driving them, things like stacking contexts and hypothetical sizes and scroll containers.
In CSS, the properties are sorta like function parameters. They're the inputs used by layout algorithms and other complex internal mechanisms.
A few years back, I decided to take the time to learn how CSS really works. I went down MDN rabbit holes, occasionally drilling down all the way to the solid core*. And when I'd run into one of those dastardly situations where things just didn't seem to make sense, I would settle into the problem, determined to poke at it until I understood what was happening.
This was not a quick or easy process, but by golly it was effective. All of a sudden, things started making so much more sense. CSS is a language that rewards those who go deep.
About a year ago, I started thinking that maybe my experience could help expedite that process for other devs. After all, most of us don't have the time (or energy!) to spend years spelunking through docs and specs.
I left my job as a staff software engineer at Gatsby Inc., and for the past year, I've been focused full-time on building a CSS course unlike anything else out there.
It's called CSS for JavaScript Developers, and it's a comprehensive interactive course that shows how CSS really works.
There are over 200 lessons, spread across 10 modules. And you've already finished one of them: this tutorial on shadow design was adapted from the course! Though, in the course, there are also videos and exercises and minigames.
Comments