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.