HTML & CSS - - By Louis Lazaris

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.

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.

Sponsors