Современные HTML и CSS: от документа к каталогу
Новые курсы · Все опубликованные курсы
В 32 уроках соберём layout-lab — страницу каталога с шестью курсами. Начнём со структуры документа и оформления, затем перейдём к организации CSS, современной сетке, размерам, позиционированию и встроенным интерфейсам браузера.
Учебные программы и измерения пока не запускались; описанные состояния являются ожидаемыми.
Перед началом
Умение создавать и сохранять текстовые файлы. Для первых уроков JavaScript не нужен; в опытах с dialog и popover разобран небольшой модуль с обычным вариантом без улучшения.
После каждого урока сохранён самостоятельный снимок HTML и CSS. Продолжение использует те же шесть курсов и объясняет, когда прежнее правило надо заменить целиком. Для финальной страницы предусмотрен простой совместимый вариант оформления.
Основа: уроки 1–16
- Структура HTML-документа: первая страница каталога
- Семантический HTML: структура веб-страницы
- Ссылки в HTML: пути, относительные URL и якоря
- Изображения в HTML: карточки учебных курсов
- HTML-форма: поля и отправка параметров
- Каскад и наследование CSS
- Специфичность CSS и классы компонентов
- Блочная модель CSS: размеры элементов
- Поток документа в CSS: расположение и интервалы
- CSS Flexbox: навигация и метаданные страницы
- CSS Grid: сетка каталога курсов
- Адаптивная вёрстка страницы на CSS
- CSS-переменные: пользовательские свойства
- CSS: состояния ссылок, полей и кнопок
- Container queries в CSS: адаптация карточки курса
- Каталог курсов на HTML и CSS: сборка страницы
Продолжение: уроки 17–32
- Cascade layers в CSS: слои каскада
- Логические свойства CSS: размеры и отступы
- CSS subgrid: согласование вложенных сеток
- Intrinsic sizing в CSS: внутренние размеры элементов
- CSS clamp(): гибкие размеры элементов
- Позиционирование элементов в CSS
- Контексты наложения в CSS: порядок слоёв
- CSS position: sticky — закрепление элемента при прокрутке
- CSS overflow: переполнение и прокрутка
- CSS scroll snap: управляемая прокрутка
- CSS aspect-ratio: соотношение сторон компонента
- CSS object-fit: вписывание изображений
- HTML dialog: нативное диалоговое окно
- Popover API в HTML: всплывающий блок
- CSS nesting: вложенные правила стилей
- Прогрессивное улучшение CSS-компонента
Учебные исходники
Исходники первой части · Исходники продолжения. В архивах есть инструкции, целые файлы и отдельные состояния примеров.