CSS Resources Worth Bookmarking
CSS is not hard to learn and very hard to master. These resources close the gap between knowing syntax and knowing what you are doing.
CSS gets a reputation as simple because the syntax is readable. That reputation fades fast once you are debugging a layout that behaves differently across three browsers, or trying to center something that refuses to cooperate.
These resources are the ones that actually build understanding rather than just giving you something to copy and paste.
Core References
MDN CSS Reference — developer.mozilla.org/en-US/docs/Web/CSS (opens in a new tab)
The authoritative reference. Every property, every value, browser compatibility tables. Not a tutorial, a reference. Use it to understand what a property actually does before you use it.
CSS Tricks — css-tricks.com (opens in a new tab)
Years of well-written articles on CSS techniques. The Flexbox and Grid guides are widely considered the best written explanations of those layout systems available anywhere.
web.dev Learn CSS — web.dev/learn/css (opens in a new tab)
A free structured course from Google. Goes from the cascade and specificity through to modern layout and animations. Better organized than most paid courses.
Layout
Flexbox Froggy — flexboxfroggy.com (opens in a new tab)
A game that teaches Flexbox by having you position frogs on lily pads. Works very well for building intuition without reading walls of documentation.
Grid Garden — cssgridgarden.com (opens in a new tab)
Same format as Flexbox Froggy, built for CSS Grid. Play through it once and you will understand Grid alignment better than most tutorials explain it.
Every Layout — every-layout.dev (opens in a new tab)
A collection of layout primitives built with modern CSS. The writing explains the reasoning behind the approach, not just the code.
Specifics Worth Learning
Josh W Comeau's CSS for JavaScript Developers — css-for-js.dev (opens in a new tab)
Paid course but the free preview articles are substantial. The mental model section explains why CSS behaves the way it does.
Kevin Powell on YouTube — youtube.com/@KevinPowell (opens in a new tab)
The most consistently useful CSS educator on YouTube. His videos on responsive design without media queries and modern layout are worth watching back to back.
Lea Verou's blog — lea.verou.me (opens in a new tab)
Deep technical writing on CSS. Not beginner material but useful once you have a foundation and want to understand the edges of what CSS can do.
Tools That Help You Learn by Doing
CSS Grid Generator — cssgrid-generator.netlify.app (opens in a new tab)
Visual grid builder that outputs the CSS. Useful for understanding what the code does by working backwards from a visual result.
Clippy — bennettfeely.com/clippy (opens in a new tab)
Visual editor for CSS clip-path. The kind of property that is hard to learn from documentation alone.
Cubic Bezier — cubic-bezier.com (opens in a new tab)
Visual editor for CSS easing curves. Drag the handles, see the animation, copy the values.
The fastest way to improve at CSS is to build something with a specific visual goal and refuse to use a framework to achieve it. The friction is where the learning happens.