Advanced CSS and Sass, Animations and more

The most advanced and modern CSS course on the internet!

4.6 (8 ratings)
846 students enrolled
Created by Steve T. Scaife
Last updated 23.03.2020
English, German
English, German
€35.98 €179.90 (80% off)
Log in to buy
This course includes
34 hours on-demand video
9 articles
14 downloadable resource
Full lifetime access
Access on mobile and TV
Certificate of Completion
What you'll learn
Tons of modern CSS techniques to create stunning designs and effects
How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
Flexbox layouts: build a huge real-world project with flexbox
Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
Responsive images in HTML and CSS for faster pageloads
The NPM ecosystem: development workflows and building processes
Downloadable lectures, code and design assets for all projects
Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.


Tons of modern cutting-edge CSS techniques to create stunning designs and effects: clip-path, background-clip, mask-image, background-blend-mode, shape-outside, filter, backdrop-filter, object-fit, transform, column-count, hyphens, perspective, calc() and custom CSS properties.

Advanced CSS animations with @keyframes, animation and transition.

Advanced CSS selectors, pseudo-classes and pseudo-elements required for modern CSS development.

How CSS works behind the scenes: the cascade, specificity, inheritance, value processing, the visual formatting model, the box model, box types, positioning schemes and stacking contexts.

CSS architecture: The 7-1 rule, component-based design, the BEM methodology, writing reusable, maintainable and scalable code.

Introduction to Sass: variables, nesting, partials, imports, mixins, functions, extends, and more.

Using Sass in real-world projects: setting global variables, building for reusability, architecting CSS and managing media queries.

The NPM ecosystem: setting up a development process to compile Sass and automatic browser reload, and creating a build process to concatenate, prefix and compress CSS files

Modern responsive design: fluid grids, layout types, flexible images, using media queries to test for different screen widths, pixel densities and touch capabilities

Flexbox layouts: main concepts, introduction to both flex container and flex item specific properties, advanced positioning techniques applied to a huge real-world project

CSS Grid layouts: main concepts, CSS grid vs flexbox, and layout techniques applied to a real-world project. This part alone could be an entire course!


This not a beginner course — You should be confident in coding HTML and CSS before taking the course

Any computer and OS will work — Windows, macOS or Linux

There is no need for any paid software — The text editor you already have works just fine


Steve T. Scaife

Steve T. Scaife

Senior System Architect



Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis.

Ben Hadley

Ben Hadley

Technical Operations Officer



Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores.

Jennifer Hardy

Jennifer Hardy

Senior Software Engineer



Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.


Course Rating: 4.6