КУРС С ПРАКТИКОЙ В БРАУЗЕРЕ

CSS: следующий уровень.

Переменные, :hover и плавные переходы, keyframes-анимации, Grid-сетки — и проекты: неоновая кнопка и живая карточка.

8 уроков100 XPВ своём темпе

ЧТО ТЫ ИЗУЧИШЬ

Программа курса

01
Переменные в CSS
Кнопка серая. Объяви переменную --accent со своим цветом в :root и покрась фон кнопки через var(--accent).
10 XP
02
Кнопка оживает
Добавь кнопке .btn эффект наведения: правило .btn:hover, которое при наведении меняет цвет фона (или текста).
10 XP

03
Плавные переходы
Карточка меняет цвет мгновенно, дёргано. Добавь ей transition: плавное изменение transform за 0.3 секунды.
10 XP
04
Анимация пульса
Сделай точку-индикатор «в эфире»: опиши @keyframes pulse (масштаб 1 → 1.4 → 1) и запусти её на .dot: animation: pulse 1s infinite.
10 XP

05
Галерея на Grid
Плитки галереи стоят столбиком. Собери из .gallery сетку 2×2: display: grid и две колонки в grid-template-columns.
10 XP
06
Шапка сайта
Собери шапку: логотип прижат к левому краю, меню — к правому. Понадобятся display: flex и justify-content: space-between.
10 XP

07
Проект: неоновая кнопка
Оформи неоновую кнопку: фон — градиент из двух цветов (linear-gradient), свечение — box-shadow, скругление — от 10px. Наведи мышь: пусть светится сильнее (необязательно, но красиво).
10 XP
08
Босс: живая карточка
Собери финал: .cards — грид из двух колонок с промежутками; у .card — скругление от 8px и тень; плавный подъём — transition на .card и .card:hover { transform: translateY(-6px) }. Наведи на карточку в превью — она приподнимется.
30 XP

В каждом уроке: задание, редактор кода, живой результат, подсказки и проверка. Начни с простого и собери собственные учебные проекты.

Можно заниматься без регистрации. Создай аккаунт, если хочешь сохранять прогресс между устройствами.