Web design is an important part of your online space, and it’s crucial that you remain at the top of your CSS game if you want to create a unique user experience. In this article, you’ll find a list of tutorials to benefit from, whether you’re a complete rookie, a pro, learning just for fun, or brushing up on your CSS skills.
For Beginners
1. CSS Basics
This tutorial, by Guil Hernandez, front end web development teacher at Treehouse, is a 469-minute CSS Course that takes you through the basic rudiments of CSS. He makes it sound so easy and takes it at a pace anyone could follow.
2. A Beginner’s Guide to Pure CSS Images
This guide has been created by Michael Mangialardi. Starting with an overview and building up to creating a Koala in pure CSS, he explains how to generate pure CSS images. This one might be for beginners but it’s also great for pros, as he assumes the learner is brand new to CSS.
3. Basic Ready-to-Use CSS Styles
There may be nothing more comforting than a cheat sheet when you are starting out learning CSS. Hugo Giraudel compiled this list of basic styles you can use when creating your own style definitions. He starts with useful, ‘how-to-make’ classes for simple styles, and builds up to applying them to different elements.
4. CSS Animation for Beginners
Animation is set to be big in web design in 2017. This piece by Rachel Cope is a go-to for beginners looking to get a foothold in animation, so you can learn to create animations.
5. The Beginner’s Guide to Learning Sass
This guide by the editorial team at 1st Web Designer explains the limitations of CSS and introduces you to the basics of Sass and how to use it to code faster. They also have a wonderful beginner guide to learning less, another dynamic style sheet language.
Intermediate
6. Animating SVG with CSS
SVG, or Scalable Vector Graphics, provides support for interactivity and animation, allowing you to animate and interact with SVG just like HTML. This 85-minute CSS course by Guil Hernandez takes you through the most popular methods for animating SVG.
7. Getting Started with CSS Grid
CSS Grid is considered the most powerful layout system available in CSS. It lets you organize content into rows and columns, and gives developers massive control. There are numerous complex tutorials on using CSS Grid, but Robin Rendle simplifies it in this tutorial.
8. Writing Maintainable CSS
This online book by Adam Silver guides you in writing scalable, maintainable CSS, while you avoid problems caused by overzealous, pre-existing styles.
9. Responsive Tables: CSS Only, No JavaScript
If you’re having trouble optimizing a highly responsive site for mobile, this short but simple guide by Denis Potschien will show you how to deal with the issues you’ll likely have, using CSS alone.
10. Photoshop-like Blend Modes in CSS
Blend modes allow you to create awesome visual effects when you blend whole elements and background images together. SitePoint has created this screencast to help you learn about how to work with blend modes in CSS.
Professional
11. Animate to Different End States Using One Set of CSS Keyframes
Here, Ana Tudor describes a technique she used to achieve a pure CSS random rainbow particle explosion using 30 lines of SCSS.
12. CSS Instead of SVG: Creating, Animating, and Morphing Shapes
SVG is the likely choice if you want to create complex animations and shapes, but in this piece, Denis Potschien explains how you can achieve, using CSS alone, what you might otherwise do with SVG.
13. The 100% correct way to do CSS breakpoints
This article by David Gilbertson explains the correct way to do responsive breakpoints. It concentrates on ranges for devices instead of hard breakpoints.
14. 150 Amazing Examples of CSS Animation & Effects
Being proficient with CSS3 makes designing enjoyable, and you’ll be able to easily and efficiently produce pleasing designs. We think you’ll love this sizeable compilation of CSS tutorials by 1st Web Designer to help you touch upon your design skills.
15. CSS Architecture for Design Systems
Brad Frost goes over how to generate a robust CSS architecture and design system for a large organisation. You’ll find lots of useful tips to help you organize your CSS.