11 CSS Learning Tools and Resources

Louis Lazaris
Tweet

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.

Unfolding the Box Model

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.

CSS Diner

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.

Learn CSS Selectors Interactively

4. Front End Web Development Quiz

A frontend coding quiz and it’s not easy. The first section is on CSS.

Front End Web Development Quiz

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.

The Magic of CSS

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.

Enjoy CSS

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.

CSS Guidelines

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.

CSS Triggers…

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.

Code Guide by @mdo

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.

Flexplorer

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.

CSS Selectors: Targeting HTML Like a Pro

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Kelderic

    I think the first link has changed. It’s a video/demo, which promptly asks for an email address to keep going. Left/right keys don’t do anything. Possibly got the wrong link?

    • LouisLazaris

      I don’t see that. It works for me. Basically, it’s an interactive video tutorial, that has stuff appear on the page as he’s talking. It could be a cookie thing on my end though (I’ve tried incognito, same result). But, by going to the home page (http://www.sketchingwithcss.com/) you can see that via just an email subscription you can get a free chapter of his book and the flexbox video series for free. Unless I’m misunderstanding.

    • LouisLazaris

      Wow, looks like I messed that up!

      I had the wrong link in there, so you were right. It’s supposed to be this:

      http://rupl.github.io/unfold/

      I think I was trying to include both of those tutorials, and inadvertently combined them in the code. Or else I changed my mind about one of them, and forgot..?

      Sorry about that, you were right, it was not working with the arrow keys. Nonetheless, the flexbox link does offer a free video course, but via email. Again, my apologies, I was clearly confused by the two links both being about ‘boxes’ or whatever.

  • http://yourauthenticweb.com/services/web-design/ Ashley Pajak

    I definitely appreciate the resources. Selectors can get tricky, teaching them clearly to others is not an easy task.

  • Jayy Shah

    Very useful resource list! Thanks for sharing!

  • jimbavia

    Profound !!! Thanks for sharing this.