Interactive tutorials

Workshop: animated starfall on pure CSS

Step by step, with clear explanation of each step, let's create an animated starfall on pure CSS. This effect can be used as a background for promo blocks and navigation blocks.

Mastering the :nth-child pseudoclass

The use of the :nth-child and :nth-of-type pseudo-classes, which allows you to select elements by their sequence number, is discussed in detail.
We dig into the :nth-child(an + b) syntax, give examples of creating simple, complex and combined element sets, and give examples of calculating sequence numbers for these sets.

Gradient border

Creating a card with a nice gradient border using repeating-linear-gradient.

repeating-linear-gradient VS linear-gradient

A study with excellent visualization. On the example of solving one and the same task, we clearly and in detail analyzed the differences between repeating-linear-gradient and linear-gradient. It turns out that repeating-linear-gradient is the coolest tool in its class.

Workshop: card with 3D flip animation

Using the transform family of properties and the backface-visibility property, we create a card that flips beautifully in 3D when hovered over. And then we'll use animations to explain how this 3D effect works.

Gallery with interesting image switching

Creating a gallery with animated image switching on CSS transformations. Using the trick with animation-fill-mode: both.

Background animation with waves

Create a background animation with waves using pure CSS. Use the animation property family for this purpose.

Custom Properties. Part 1: Introduction

The first section of this interactive course is about CSS Custom Properties, aka CSS Variables, where you will learn their syntax and typical usage examples.

Custom Properties. Part 2: Values and value splitting

We will learn about one of the killer features of custom properties. They allow you to break multi-component CSS values into parts and conveniently work with individual components. Which is invaluable when working with colors, shadows, gradients, animations and other compound CSS values.

Animated gradient border

Create an animated gradient border using pure CSS. We will need only one container, without any additional wrappers or pseudo elements. The background-origin property and the @property directive play a key role.

Collection of neomorphism style buttons

Let's get acquainted with neomorphism and understand how to implement components in this style. We will create neomorphic buttons of simple shape, buttons with frames, and then neomorphic buttons of complex shape.

Shutter Hover Effect

Create a beautiful hover effect that looks like a camera shutter. We will learn about a completely unexpected way of using CSS shadows.

Button with complex animation on hover

Let's create a button with an unusual effect of lifting and rotating on hover. To realize the effect we will use CSS transformations, shadows and smooth transitions.

Rotating 3D cube

We'll create a rotating 3D cube and understand how 3D transformations work. We will see with our own eyes what effect the perspective and backface-visibility properties have. We will understand how multiple transformations work.

Sorting Algorithms Made Visual: Bubble Sort

In this chapter, we're diving into bubble sort with cool visualizations. Algorithms might seem complicated, but not here! We turn those abstract sorting ideas into clear, easy-to-follow animations so you can see everything in action. Learn effortlessly as you watch algorithms work in real time!

Sorting Algorithms Made Visual: Insertion Sort

In chapter two, we explore insertion sort. At the end, you’ll see a cool visualization that compares the performance of both bubble sort and insertion sort.

Atomic CSS on the mlut framework. Part 1: Getting Started

In the first chapter of this course, we’ll get familiar with the fundamentals of the Atomic CSS approach. We’ll also explore the basic ideas behind the mlut tool, which helps streamline your layout process under this methodology. This is the official course by the framework’s creator, Valentin Ulyanov.

Interactive tutorials

Log in

Sign up

Restore access