Содержание курса
12
разделов
162
урока
486
тестов
324
задачи
2 ч.
обн. 8 ноября 2026
Основы CSS: теория, тесты и практика с кодом
8 уроков
1.
Старт: HTML, CSS и первое изменение страницы
↗
2.
Синтаксис: пишем и читаем правила CSS
↗
3.
Первые свойства: текст, фон и размер шрифта
↗
4.
Внешний CSS: файлы, подключение и пути
↗
5.
Три способа применения CSS: выбираем подходящий
↗
6.
Селекторы по тегу: несколько элементов и правил
↗
7.
Диагностика: находим и исправляем ошибки CSS
↗
8.
Итоговая практика: две страницы с автопроверкой
↗
Селекторы и каскад: выбираем, сравниваем, исправляем
10 уроков
1.
Классы: выбираем элементы по назначению
↗
2.
ID, универсальный селектор и группировка
↗
3.
Вложенность: потомок и непосредственный ребёнок
↗
4.
Соседние элементы: комбинаторы + и ~
↗
5.
Селекторы атрибутов: наличие, значение и части строки
↗
6.
Наследование: что ребёнок получает от родителя
↗
7.
Каскад: применимые правила и порядок объявлений
↗
8.
Специфичность: сравниваем селекторы без мифов
↗
9.
Важность объявлений, inline-стили и границы приоритета
↗
10.
Диагностика в DevTools и итоговая практика
↗
Размеры и Box Model: единицы, отступы и расчёты
11 уроков
1.
Размеры элемента: CSS-пиксели, width и height
↗
2.
Проценты: относительно какого размера?
↗
3.
em и rem: размеры относительно шрифта
↗
4.
vw, vh, vmin и vmax: размеры относительно окна
↗
5.
Ограничения размеров: min, max и auto
↗
6.
Четыре области блока и расчёт content-box
↗
7.
Padding: внутренние отступы и сокращённая запись
↗
8.
Border-box: включаем padding и рамку в размер
↗
9.
Margin: внешние отступы, auto и отрицательные значения
↗
10.
Схлопывание margin: соседние блоки и родитель
↗
11.
Диагностика размеров и итоговая карточка
↗
Текст и визуальное оформление: от цвета до карточки
12 уроков
1.
Цвета: имена, HEX и RGB
↗
2.
HSL, прозрачность и currentColor
↗
3.
Фоновое изображение: повтор, позиция и размер
↗
4.
Градиенты и несколько фоновых слоёв
↗
5.
Шрифты: семейства, начертания и подключение
↗
6.
Line-height и интервалы между символами
↗
7.
Выравнивание, оформление и преобразование текста
↗
8.
Пробелы, переносы длинных строк и многоточие
↗
9.
Границы и скругления: стороны и углы
↗
10.
Изображения: object-fit, позиция и aspect-ratio
↗
11.
Тени элемента и текста
↗
12.
Диагностика оформления и итоговая карточка
↗
Поток, позиционирование и слои: от блока до каталога
13 уроков
1.
Нормальный поток и блочные элементы
↗
2.
Inline и inline-block: элементы внутри строки
↗
3.
Скрытие: display, visibility и opacity
↗
4.
Переполнение: visible, hidden, scroll и auto
↗
5.
Flow-root и границы блочной раскладки
↗
6.
Static и relative: смещение с сохранением места
↗
7.
Absolute: метка внутри карточки
↗
8.
Containing block: вложенность и растягивание
↗
9.
Fixed: привязка к области просмотра
↗
10.
Sticky: закрепление внутри прокрутки
↗
11.
Z-index: порядок перекрывающихся элементов
↗
12.
Контексты наложения: почему 9999 не спасает
↗
13.
Диагностика и итоговый прокручиваемый каталог
↗
Flexbox: оси, гибкие размеры и компоненты страницы
14 уроков
1.
Flex-контейнер и его непосредственные дети
↗
2.
Главная и поперечная оси: flex-direction
↗
3.
Justify-content: пространство по главной оси
↗
4.
Align-items: центрирование и растягивание
↗
5.
Gap: интервалы между элементами и линиями
↗
6.
Flex-wrap: перенос на новые линии
↗
7.
Align-content: распределение flex-линий
↗
8.
Align-self и автоматические margin
↗
9.
Order: визуальный порядок и доступность
↗
10.
Flex-grow: распределение свободного пространства
↗
11.
Flex-shrink: как элементы делят нехватку места
↗
12.
Flex-basis и сокращение flex
↗
13.
Автоматические минимумы и длинное содержимое
↗
14.
Диагностика и итоговая страница на Flexbox
↗
CSS Grid: треки, размещение и макеты страниц
14 уроков
1.
Grid: контейнер, элементы и двумерная сетка
↗
2.
Строки, колонки, ячейки и промежутки
↗
3.
Единица fr и распределение доступного места
↗
4.
Repeat: повторяющиеся треки без дублирования
↗
5.
Размещение по линиям: начало, конец и отрицательные номера
↗
6.
Span и галерея с крупными плитками
↗
7.
Именованные области и каркас страницы
↗
8.
Явная и неявная сетка: grid-auto-rows и columns
↗
9.
Автоматическое размещение и режим dense
↗
10.
Выравнивание элементов: items, self и place-items
↗
11.
Выравнивание всей сетки: content и свободное место
↗
12.
Minmax, auto-fit и auto-fill: гибкое число колонок
↗
13.
Вложенные сетки, автоматические минимумы и subgrid
↗
14.
Диагностика и итоговая страница на CSS Grid
↗
Состояния, псевдоэлементы и оформление форм
16 уроков
1.
Псевдоклассы: состояние, структура и составной селектор
↗
2.
Hover и active: наведение и момент активации
↗
3.
Focus, focus-visible и заметная рамка фокуса
↗
4.
Focus-within и подсветка группы элементов
↗
5.
First-child, last-child и only-child
↗
6.
Nth-child: чётность, формулы и тип элемента
↗
7.
Not: исключения и сочетание состояний
↗
8.
Before, after и декоративное содержимое
↗
9.
First-letter, first-line и оформление частей текста
↗
10.
Основа формы: подписи, группы и единое оформление
↗
11.
Input, textarea, select и placeholder
↗
12.
Checkbox, radio, checked и accent-color
↗
13.
Disabled, readonly, required и optional
↗
14.
Valid, invalid и бережная обратная связь
↗
15.
Компоненты: кнопка, навигация и карточка
↗
16.
Диагностика и итоговая учебная форма
↗
Современный CSS: переменные, функции и анимации
16 уроков
1.
CSS-переменные: имя, значение и var()
↗
2.
Область действия, наследование и локальная тема
↗
3.
Fallback, ошибки значений и зависимости переменных
↗
4.
calc(): арифметика размеров и единицы
↗
5.
min() и max(): верхняя и нижняя границы
↗
6.
clamp(): минимум, предпочтение и максимум
↗
7.
Transform и translate: визуальное смещение
↗
8.
Scale, rotate и skew: изменение формы
↗
9.
Порядок transform и точка transform-origin
↗
10.
Transition: плавное изменение состояния
↗
11.
Кривые скорости, задержка и несколько переходов
↗
12.
@keyframes: кадры и запуск CSS-анимации
↗
13.
Повторы и направление animation
↗
14.
Задержка, fill-mode и управление паузой
↗
15.
Уменьшенное движение и диагностика эффектов
↗
16.
Диагностика и итоговый компонент с темой и движением
↗
Адаптивная вёрстка: от viewport до container queries
16 уроков
1.
Viewport: CSS-пиксели и подготовка страницы
↗
2.
Гибкие размеры: контейнер, проценты и ограничения
↗
3.
Media queries: условия и точные границы
↗
4.
Mobile-first: базовый поток и расширение макета
↗
5.
Выбор порогов, диапазоны и сочетание условий
↗
6.
Адаптивные панели и навигация на Flexbox
↗
7.
Responsive Grid: явные и автоматические колонки
↗
8.
Гибкие изображения и управляемое кадрирование
↗
9.
Srcset, sizes и picture: выбор изображения
↗
10.
Адаптивная типографика и длинное содержимое
↗
11.
Формы, таблицы и доступные действия на узком экране
↗
12.
Высота viewport: svh, dvh и безопасная гибкость
↗
13.
Container queries: размер области компонента
↗
14.
Именованные контейнеры, cqi и базовый вариант
↗
15.
Диагностика адаптивности и возможности ввода
↗
16.
Итоговая практика: адаптивная учебная библиотека
↗
Организация CSS и DevTools: от компонента до диагностики
16 уроков
1.
Ответственность стилей и границы компонента
↗
2.
Defaults, reset и осмысленные глобальные стили
↗
3.
Структура файлов, зависимости и порядок подключения
↗
4.
BEM: блоки, элементы и понятные имена
↗
5.
Модификаторы и повторное использование компонентов
↗
6.
Переменные как договорённость: общая и локальная тема
↗
7.
Невысокая специфичность и управляемые переопределения
↗
8.
Слои каскада: явный порядок ответственности
↗
9.
DevTools: от выбранного элемента к причине значения
↗
10.
Недопустимое, переопределённое и неактивное CSS
↗
11.
Box Model: найти источник лишней ширины и отступа
↗
12.
Инспекторы Flexbox и Grid: проверяем гипотезы
↗
13.
Проверка состояний, ширин и условий
↗
14.
Network, Sources и сохранение исправлений
↗
15.
Coverage и рефакторинг без потери поведения
↗
16.
Итог: рефакторинг библиотеки и отчёт о проверке
↗
Финальный проект: адаптивное портфолио и проверка
16 уроков
1.
Задание на портфолио и первый рабочий каркас
↗
2.
Палитра, переменные и типографический ритм
↗
3.
Шапка, навигация и переход к содержимому
↗
4.
Главный экран: текст, действия и иллюстрация
↗
5.
Карточки работ: общая основа и содержимое
↗
6.
Каталог, метки и выделенная работа
↗
7.
Основная область и боковая колонка
↗
8.
Форма: подписи, поля и понятные состояния
↗
9.
Таблица: структура, оформление и локальная прокрутка
↗
10.
Диалоговое окно: CSS-оболочка и готовое поведение
↗
11.
Подвал, списки и устойчивость содержимого
↗
12.
Адаптивность всей страницы и граничные ширины
↗
13.
Состояния и полная проверка клавиатурой
↗
14.
Небольшая анимация и предпочтение уменьшить движение
↗
15.
Разбор двух регрессий и повторная проверка
↗
16.
Самостоятельная сборка, приёмка и завершение курса
↗