Тренажёры

Учись HTML и CSS на практике

Мини-игры про котов и коробки — каждая учит одному разделу CSS через живую обратную связь: пишешь код, кот сразу реагирует.

Расставь котов по коробкам с помощью Flexbox: justify-content, align-items, order и другие свойства — уровень за уровнем.

Перемести кота на нужную по цвету коробку с помощью CSS Grid: grid-column, grid-row, span и другие свойства сетки.

Выбери нужных котов на полке с помощью CSS-селекторов: классы, id, комбинаторы, псевдоклассы и другие приёмы.

Расставь котов свойством position: relative, absolute, fixed, sticky — и разберись, кто кого перекрывает через z-index.

Подгони кота под нужный размер и отступы: px, %, em, rem, padding и margin — включая отрицательные значения и автоцентрирование.

Оживи кота свойствами animation и transition: длительность, кривые скорости, повторы, направление и задержки.

Замени div на семантические теги и почини доступность настоящим HTML: header/nav/article, aria-label, alt и другие атрибуты.

Совмести кота с полупрозрачным призраком-целью: translate, rotate, scale, skew и transform-origin.