We’re very excited to have Oliver Lindberg writing articles for Heart Internet. An independent editor, content consultant, and founder of Pixel Pioneers, Oliver was formerly the editor of .net magazine and has been involved with the web design and development industry for more than a decade. In his first article, he provides a veritable galaxy of CSS tutorials, from the basics to the cutting edge. We hope you enjoy!

 

CSS is more exciting than ever. For a while front-end development focused very much on JavaScript, and CSS got a little neglected. However, in the last few years a lot of CSS techniques and technologies have been developed that help us create better websites and apps.

In this post we round up the best recent CSS tutorials from around the web. It’s a real treasure trove of information. Not only will you learn about the major areas of cutting-edge CSS development such as CSS architecture, animations and layouts, this list will also help you discover some of the best sites and experts publishing first-class web design and front-end advice.

Happy learning!

Fundamentals

Let’s Look at 50+ Interesting CSS Properties & Values
What better way to start our epic list with another epic list? In this CSS-Tricks post Greg Hovanesyan documents and showcases a ton of interesting CSS properties and values, along with use-cases and simplified code samples.

CSS Positioning Explained By Building An Ice Cream Sundae
No one explains web design concepts like Kevin Kononenko. He’s the master of the analogy, and in this post, so far his most popular one on Medium, he claims that If you’ve made an ice cream sundae before, then you can understand CSS positioning.

CSS Architecture

CSS Architecture for Design Systems
Brad Frost explains how to create a design system and a robust CSS architecture for a huge organisation. It’s not a bulletproof solution for every project you will work on but the post is still crammed with great tips and insights into organising your CSS.

A Guide to Writing Maintainable CSS
This is a great comprehensive guide (an actual online book by Adam Silver) to writing modular, scalable and maintainable CSS, without having to worry that overzealous, pre-existing styles will cause problems.

CSS Architectures for UI developers
This post by Matteo Pescarin gives a really good overview of various CSS architecture techniques including BEM, SMACSS, ITCSS and Atomic Design. For ITCSS in particular, don’t miss Harry Roberts’ fantastic primer and the accompanying screencast.

ITCSS file organisation breakdown

Loops in CSS Preprocessors
Loops in CSS preprocessors such as Sass, Less and Stylus help you keep your CSS patterns more readable and maintainable, baking them directly into your code. Miriam Suzanne explains what loops can do, and how to use them.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends
Heydon Pickering examines inheritance, the cascade and scope with respect to modular interface design. Although these features have fallen out of favour with developers, they can actually be really useful for making CSS code more concise and self-regulating, and your interface more easily extensible.

Design Styles

Ultimate Guide to Non-Rectangular Headers: Pure CSS Diagonal Separators
In this excellent CodePen post Ahmad Nassri tackles diagonal headers and explores different design approaches comparing simplicity, generated content, cross-browser support and performance.

Improve the Look of Links with the CSS Text Decoration Module
Links have strict styling limits, which can affect their legibility. In this short post Dudley Storey demonstrates how to improve the styling and usability of links with the text–decoration–skip and text–decoration–color properties.

Magic Randomisation with nth-child and Cicada Principle
The very talented Charlotte Jackson has written a post about an effect she used on last year’s UX London site that made it look like the images on the speakers page get a distorted, circular blobbiness added to them at random.

CSS Images

A Beginner’s Guide to Pure CSS Images
Michael Mangialardi, creator of Daily CSS Images, has written a detailed guide of how to create pure CSS images. After an overview you will learn how to create a Koala in pure CSS. There’s even a video to accompany the article that you can follow along to.

Little Fragments: Creating a Simple Image Poster Effect
Codrops’ Mary Lou explains how to make a playful little poster effect with image fragments, inspired by some poster art and powered by clip-path.

Create Stunning Image Effects with CSS Backdrop-filter
In this tutorial on SitePoint Asha Laxmi explains how to use the CSS backdrop-filter property, which was introduced in the Filter Effects Module Level 2 specification. She covers the syntax, browser support and practical applications.

Photoshop-like Blend Modes in CSS
In this SitePoint screencast you’ll learn all about blend modes, which allow you to blend background images and whole elements together to create some very nice visual effects. As browser support is now good, there’s no better time to start experimenting with them!

Image Effects with CSS
Bennett Feely has compiled a web page of images that use various newer CSS properties (blending and filtering) that give us a surprising amount of possibilities to manipulate a single source image. Learn how these effects are implemented straight away.

CSS Animations

CSS Animation for Beginners
This is a great introduction to CSS animation by product and front-end designer Rachel Cope, who has also written a post about CSS transitions and transforms for beginners.

Create a set of micro-animations
Donovan Hutchinson explores how we can create a bank of small, simple animations that can be applied in multiple situations.

Transition Effect with CSS Masks
In this highly experimental tutorial (the effect only works in some modern browsers), creative front-end developer Robin Delaporte explains how to use CSS Masks to create eye-catching slide transitions with the steps() timing function.

Making Magic with WebSockets and CSS3
Learn how to combine CSS animation with the real-time web. In this article Hélio Dolores, an R&D engineer at OutSystems, explains how he designed an app that would help a shopping assistant search for items the customers requested inside the store by swiping items onto a much bigger screen, so the customer would get a visual of what those items would look like.

Ensuring CSS Animations Run and Stop Gracefully
A nifty little solution by Tommy Marshall, a front-end developer at Viget, to stop animations more gracefully using a JavaScript library called Ensure Animation, which listens for animation events on a given node and checks to see if the animation should continue to run or not.

Using CSS to animate border-radius
A fun little technique by Chris Ruppel that can add depth and subtlety to your site’s images. See it in action in the footer of Chris’ own site.

Animate to Different End States Using One Set of CSS Keyframes
A great technique by Ana Tudor, who explains how she created a pure CSS random rainbow particle explosion with only 30 lines of SCSS.

Pure CSS Horizontal Scrolling
Here’s a neat little trick we found on CSS-Tricks. Guest author Pieter Biesemans explains how to make a webpage scroll horizontally with CSS, using a container with items. Really good browser support, too.

CSS Layouts

A Complete Guide to Grid
This is a very thorough guide to the much-talked about CSS Grid Layout module, by Chris House, which presents the Grid concepts as they exist in the very latest version of the specification

A Simple Use of CSS Grid
You’ve heard of the CSS Grid Layout and are ready to start experimenting with it? Read this pretty simple and easy example by front-end designer Timothy B Smith.

A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid
In this tutorial, which follows two introductory tutorials about the CSS Grid Layout module, Nitish Kumar goes over all the steps the auto-placement algorithm of CSS Grid follows when positioning elements.

The Holy Grail Layout with CSS Grid
Ire Aderinokun explains how to use CSS Grid to create the old three column layout that was dubbed “The Holy Grail Layout” in the early 2000s. It’s famously difficult to create simply in CSS without any hacks Ire’s solution is a great way to learn CSS Grid.

CSS Grid Layout and Comics (as Explained by Barry the Cat)
CSS Grid is pretty good at laying out online comics as it turns out, especially if you want your comics to be flexible. This tutorial uses Barry the Cat to demonstrate how to build a responsive comic.

Understanding Flexbox: Everything You Need to Know
This epic post by Ohans Emmanuel covers all the fundamental concepts you need to understand to master CSS Flexbox. He does so by walking you through building a lot of “small things” and wraps it all up with a music app completely laid out with Flexbox.

CSS Writing Modes
An excellent introduction by Jen Simmons to one of the less known but actually really well supported CSS properties: writing modes. Not only is this a very creative technique that’s especially useful when laying out pages in Chinese, Japanese, or Korean, but it also helps you understand Flexbox and Grid more.

How to Use CSS Shapes in Your Web Design
This article explores how the CSS Shapes Module will allow us the same freedom for arranging content layout that we know of newspapers and magazines. Learn how to create a shape, customise the size, the position, and the box model.

Responsive Design

How to Build a Responsive Grid System
We can highly recommend all of Zell Liew’s blog posts but this one is one of the best. Zell explains how easy it actually is to build a custom-made grid system without a framework. Essential reading.

The 100% Correct Way to Do CSS Breakpoints
David Gilbertson’s article on the correct way to do responsive breakpoints was one of the most popular CSS posts of 2016. It’s a very thoughtful post that focuses on ranges for devices rather than hard breakpoints. There will always be new devices with new sets of dimensions.

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today
Tommy Hodgins was wondering whether, by extending CSS, we could strengthen the material that websites are built from, developing better, stronger websites that require less external support and tools to build. The solution he found was element queries.

Responsive Images in CSS
In this must-read article Chris Coyier looks at how to implement responsive images in CSS, with a helpful combination of media queries and the background-image property.

Scaling Responsive Animations
Another excellent article on the treasure trove that is CSS-Tricks. Front-end developer Zach Saucier demonstrates various techniques for scaling your animations in a variety of contexts.

Build a Schedule Template in CSS and jQuery
A simple, responsive template for a calendar layout that lets you display events on a timeline, as well as organise them in groups. Written by Claudia Romano, co-founder of CodyHouse and Nucleo.

The State of Responsive 3D Shapes
Another great post by prolific CodePen contributor Ana Tudor. This time she shares different approaches for creating responsive 3D shapes.

Responsive Table Layout
Matt Smith demonstrates a quick and easy way to optimise your tables for mobile devices. This solution works for a table layout with relatively simple data content.

Email Newsletters

Build interactive emails with CSS
Email coding doesn’t have to be boring. In this excellent article, accompanied by a screencast, Mark Robbins explains how to create JavaScript-like functionality in HTML email campaigns just with CSS.

Dirty CSS Hacks for Responsive Emails
In a recent webinar for Shopify, Smashing Magazine’s Vitaly Friedman outlined two mind-blowing techniques for enhancing HTML emails by making them responsive — without using media queries! Make sure you watch the whole video for more downright dirty CSS tricks that you can use to enhance your design projects.

The Ultimate Guide to Web Fonts in Email
Over on the Litmus blog Jaina Mistry has written a comprehensive guide to web fonts in email, including how to use them, where to find them and which email clients support web fonts in email today.

Performance

How and Why You Should Inline Your Critical CSS
This SitePoint article explains how to significantly improve your website’s performance by inlining critical CSS and loading non-critical CSS asynchronously, using Grunt, npm modules and other tools.

Improving Perceived Performance with Multiple Background Images
Harry Roberts explains how to improve perceived performance of large images by applying the image’s average colour as a background-color so that the user isn’t looking at a huge white space whilst the image is loading. Chris Coyier also points us to a couple of alternative solutions.

Performant Parallaxing
Parallaxing is a fun effect when used thoughtfully, and — whether you love it or hate — is here to stay. Paul Lewis, design and performance advocate at Google, discusses an excellent solution for the parallax effect that is both performant and works cross-browser.

10 principles for smooth web animations
This is a complete guide to creating 60fps animations with CSS by Anand Sharma, founder of health tracking app Gyroscope. These are must-read tips for improving your animation performance.

Web Font Optimisation
Web performance expert Ilya Grigorik explains how optimised fonts, combined with a judicious strategy for how they are loaded and applied on the page, can help reduce the total page size and improve page rendering times.

Tools

PostCSS: Sass’s New Play Date
If you want to get started with PostCSS, you should read this guide by Nicolás J Engler, which walks you through the basics and also explains how to expand PostCSS with plugins and/or integrate with other CSS processors, task runners, and bundlers.

From Sass to PostCSS
Tyler Gaw explains how to easily make the switch from Sass and try a new styling setup with the cssnext plugin. Saw used Sass on every project he worked on over the last five years but says he really enjoys the shift in thinking his new setup brings.

Remove Unnecessary CSS With PurifyCSS and Grunt
This Tuts+ tutorial explains how to use Grunt and PurifyCSS to create a super-lightweight stylesheet with minimal effort. Learn how to install it and then run it with and without Grunt, to give us much more performant styles.

What’s your favourite CSS tutorial? Which one has changed the way you work? And what have we missed? Let us know in the comments below!