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.

Introduction to CSS Container Queries

CSS Container Queries are a game-changing tech that’ll forever transform how we think about responsiveness. We’re going to build a fluid, adaptive chat and dive into the key features of container queries.

CSS Container Queries, Part 2: A Product Case

The best part of this course is diving into real-world product cases. In chapter two, we're building a genuine service card with some seriously complex fluid behavior and container-based responsiveness.

CSS Container Queries, Part 3: A Product Case

In chapter three, we're diving into another product case — a responsive card list where the number of cards per row adapts to the container's size, and the cards themselves stretch to fill the space.

nebo.css — inverted corners made a breeze

Check out this CSS library from HTML Academy that makes whipping up and tweaking inverted corners (negative border radius) a total snap. It even works on mixed backgrounds, and it’s all done in pure CSS.

CSS if(): Breakthrough or Breakdown?

Let’s unpack one of 2025’s most debated CSS updates — the experimental if() function now available in Chrome. We’ll look at how it works, where it falls short, and what future it might have.

Comparing CSS Variables in Pure CSS

We’re standing on the brink of a new CSS era — where style conditions can live right inside your stylesheets! Until recently, there was no easy way to compare CSS variables. But now there is. Let’s explore a surprisingly simple trick that opens the door to this brave new world of CSS.

A complex circular progress bar — with a surprisingly simple implementation

Back in the day, circular progress bars meant SVG: calculating angles, juggling attributes, and generally suffering. Even today, opening DevTools on some legacy projects still hurts. Now it’s just one div and a single CSS property — and you end up with a progress bar that animates and changes color on its own, without a single line of JavaScript.

Radial Gradients, Part 1

We’ll get familiar with the radial-gradient() function, learn how to build simple gradients, control the list of color stops, and position the center of the gradient. We’ll also see what affects the shape of a radial gradient.

Radial Gradients, Part 2

We’ll keep exploring radial gradients, learn how to force their shape and control their size, and work through the keywords closest-side, farthest-side, closest-corner, and farthest-corner.

Conic Gradients

We’ll get familiar with the conic-gradient() function, learn how to build simple gradients, and control the list of color stops, the center position, and the starting angle of the gradient.

Workshop: A Pulsing Gradient Text Fill

In this workshop, we'll use radial gradients to create striking decorative effects and break down how to build a pulsing gradient fill for text.

Workshop: The Glow Effect

In this workshop, we'll continue using radial gradients to create striking decorative effects and break down how to build a glowing effect for the Implosion illustration.

Cutouts in blocks, the old way and the modern way

We’ll build a cutout card in two different ways: the traditional old-school one and the modern one. Then we’ll compare the amount of code, the simplicity, and the flexibility of both implementations and see for ourselves that the future is already here.

Interactive tutorials

Log in

Sign up

Restore access