11 CSS Learning Tools and Resources
The industry of late has been overrun with articles, tutorials, and tools focused on Sass, even here on SitePoint we’ve been publishing more Sass content than ever before.
But we haven’t forgotten about our roots: CSS.
For those of you still learning CSS, or wanting to go a little deeper into specific CSS subjects, I thought I’d put together a list of CSS learning resources that I’ve come across in recent months.
Enjoy!
1. Unfolding the Box Model
Interactive slides that explore CSS 3D Transforms. Press left or right arrow key to advance. Watch in full-screen for best results.
2. CSS Diner
A nicely designed little game to help you learn CSS selectors. Type in the correct selector to complete each level. You can also jump to a level by opening the menu with the hamburger icon on the right.
3. Learn CSS Selectors Interactively
A simple visualization of selectors in CSS. Choose the selector in the menu on the left, and the correctly selected items will appear on the right, with a brief description of the selector under the menu.
4. Front End Web Development Quiz
A frontend coding quiz and it’s not easy. The first section is on CSS.
5. The Magic of CSS
A 6-chapter tutorial on the basics of CSS, with more chapters to come. Some good in-depth stuff here.
6. Enjoy CSS
A CodePen-like playground for learning CSS. The interesting part of this is that it’s focused on CSS, with a menu where you can choose a CSS feature and then use a GUI to edit that feature in the document.
7. CSS Guidelines
Harry Roberts has updated his CSS Guidelines. Previously just a GitHub repo, the Guidelines now have their own domain and have been expanded and improved. Harry has also implemented a “pay what you want” model to help support development.
8. CSS Triggers…
Chrome Dev Relations guy Paul Lewis has created a quick reference for those interested in what is triggered on a page when a given CSS property changes. For example, some properties will trigger repaints and compositing, but will not trigger layout. This reference covers all properties and is easy to search.
9. Code Guide by @mdo
Bootstrap’s Mark Otto has put together his own HTML and CSS style guide with lots of tips including order of properties, order of HTML attributes, selectors, comments, and lots more.
10. Flexplorer
A simple app to fiddle with the various flexbox features and see the results appear in real-time on the page along with the full code. What’s cool about this is that you can also edit the text in the boxes on the page, allowing you to see how the changes affect different amounts of content.
11. CSS Selectors: Targeting HTML Like a Pro
Russ Weakley’s new course on CSS selectors on SitePoint’s sister site, Learnable, with more than 20 videos introducing the different ways you can select elements with CSS. And this is not just a shameless plug; I know Russ – he’s a true CSS expert. So if you’re just getting started with CSS and haven’t mastered selectors yet, this might be a good choice.
Know Any Others?
Whatever level you’re at with CSS, I’m sure at least one of the resources listed here will help you.
If you’ve built something, written something, or know of any other tool, app, or resource to help developers get up to speed with some aspect of CSS, feel free to share it in the comments.
