Revamp Your CSS Skills With These Free Online Resources

With the latest design trends and web technologies coming thick and fast it can be difficult to keep up to date with the fundamentals. CSS is still at the heart of a visual web, but the likes of NodeJS and other open source projects are making development incredibly exciting – and it’s easy for CSS to fall down the list of priorities.

Before you know it you have a bunch of CCS techniques, newly supported features and tools that you need to smarten up on, but you never quite find the time for it and that list keeps on growing. Luckily, there is a hoard of free resources out there to help you get your CSS skills back on track and today we have a list of some of our favourites for all levels.

Once you read this you may also be interested in our list of theĀ best websites for learning web design and web development for free.

Learn CSS With The Mozilla Development Network


The Mozilla Developer Network is a great resource for CSS learners at every level – from beginner to advanced CSS3 guides.

The Magic Of CSS


The Magic of CSS is an ongoing project that breaks down CSS elements into simple terms and applies them to everyday usage examples you come across with the modern web.

Get Preprocessing In Minutes


This CSS-Tricks video promises to have you preprocessing in a matter of minutes. If you’re debating the jump into Sass or another preprocessor, check this out.

A Complete Guide To The CSS Flexbox Module


CSS-Tricks also recently updated its guide to the CSS Flexbox model which gives you more control over your divs without the need for JavaScript.

CSS Diner


If you need to brush up on your CSS selectors then try out this in-browser game that puts a practical spin on picking up selectors.

The Principles Object Orientated CSS


This article from Smashing Magazine was first published back in 2011, but it’s still one of the best introductions into object orientated CSS you will find.

Master CSS Selectors


If you ever need a quick reminder of which selector is best to target descendants, siblings or other elements, this visual guide from Ben Howdle is a great little resource.

Unfolding The Box Model With CSS Transforms


Keeping the visual theme alive, this snazzy presentation by Chris Ruppel takes you through CSS 3D transitions – all coded in real-working examples. (1200+px resolution required)

Enjoy CSS


Enjoy CSS is like a CodePen alternative that focuses purely on the stylesheet and lets you get familiar with the best features in CSS.

CSS Guidelines


If you want an extensive resource for CSS guidelines, look no further than this guide from Harry Roberts.

Layout, Paint & Composite – CSS Triggers


CSS Triggers is an interesting resource that delves behind property changes to give you more insights into what you trigger with CSS properties.

Code Guide By @mdo


Code Guide is an all-round introduction to HTML and CSS for beginners. Experienced developers won’t find anything new here, but it’s a great (and up-to-date) starting point for anyone who wants to learn web code.



This web app lets you play around with the flexbox model and learn by doing – for people who prefer a more hands-on approach.

CSS Tricks


A couple of CSS-Tricks articles have made it onto this list, but you may as well go ahead and subscribe to Chris Coyier’s site so you don’t miss out on a single post form this incredible resource.

Any Recommendations?

Let us know if you have any CSS resources you think should make it onto this list and we may just go ahead and add them.