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

mozilla-css3

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

The Magic Of CSS

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

preprocessing

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

flexbox

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

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

oocss

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

css-selectors-site

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

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

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

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

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

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.

Flexplorer

flexplorer

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

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.