Современные HTML и CSS: от документа к каталогу
Новые курсы · Все опубликованные курсы
В 32 уроках соберём layout-lab — страницу каталога с шестью курсами. Начнём со структуры документа и оформления, затем перейдём к организации CSS, современной сетке, размерам, позиционированию и встроенным интерфейсам браузера.
Учебные программы и измерения пока не запускались; описанные состояния являются ожидаемыми.
Перед началом
Умение создавать и сохранять текстовые файлы. Для первых уроков JavaScript не нужен; в опытах с dialog и popover разобран небольшой модуль с обычным вариантом без улучшения.
После каждого урока сохранён самостоятельный снимок HTML и CSS. Продолжение использует те же шесть курсов и объясняет, когда прежнее правило надо заменить целиком. Для финальной страницы предусмотрен простой совместимый вариант оформления.
Основа: уроки 1–16
- HTML-документ и первые данные каталога
- Семантическая структура страницы
- Ссылки, пути и якоря
- Изображения в карточках курсов
- HTML-форма и отправка параметров
- Каскад и наследование CSS
- Специфичность и классы компонентов
- Размеры элементов и блочная модель
- Обычный поток и интервалы
- Flexbox для навигации и метаданных
- CSS Grid для каталога курсов
- Адаптивная компоновка страницы
- Пользовательские свойства CSS
- Состояния ссылок, полей и кнопок
- Запросы контейнера для карточки курса
- Сборка каталога на HTML и CSS
Продолжение: уроки 17–32
- Слои каскада
- Логические свойства размеров и отступов
- Согласование вложенных сеток с subgrid
- Внутренние размеры элементов
- Гибкие размеры с clamp
- Позиционирование элементов
- Контексты наложения
- Поведение position sticky
- Переполнение и прокрутка
- Управляемая прокрутка с scroll snap
- Соотношение сторон компонента
- Вписывание изображений
- Диалог на основе dialog
- Всплывающий блок с Popover API
- Вложенные правила CSS
- Постепенное улучшение CSS-компонента
Учебные исходники
Исходники первой части · Исходники продолжения. В архивах есть инструкции, целые файлы и отдельные состояния примеров.