Практика вёрстки
Готовые учебные компоненты и подробные разборы: карточки, меню, формы, таблицы, отладка CSS и проверка сайта перед публикацией.
Практика: учебная панель с именованными областями Grid
Небольшая панель с планом урока и заметками помогает отработать именованные области на реальном составе блоков. Важная задача — сохранить логичный порядок чтения при смене числа колонок.
Практика: дополнительная подсказка к полю через details
Длинное объяснение формата можно вынести в раскрывающийся блок, сохранив краткую обязательную инструкцию рядом с полем. Так пользователь понимает минимум требований без дополнительных действий.
Практика: адаптивный список учебных показателей
Набор кратких показателей должен сохранять связь числа и подписи на любой ширине. В упражнении статистика представлена списком описаний, а раскладка не меняет порядок чтения.
Практика: обязательные поля без загадочной звёздочки
Пользователь должен заранее понимать, какие поля обязательны. Упражнение показывает явные текстовые обозначения и нативный required вместо зависимости от цвета или необъяснённого символа.
Практика: двухуровневое раскрывающееся оглавление
В небольшом учебном оглавлении вложенные details позволяют показать дополнительные подразделы по запросу. Нужно сохранить понятные подписи уровней и не превратить навигацию в длинную цепочку скрытых действий.
Практика: закрепляемые подписи разделов в длинном списке
В длинном списке закреплённое название группы помогает понять, к какому разделу относятся видимые пункты. Упражнение показывает sticky внутри отдельных секций, а не неподвижный заголовок всей страницы.
Практика: карточка, понятная без изображения
Карточка не должна терять название и назначение при недоступной картинке. В этом упражнении смысл хранится в обычном HTML-тексте, а декоративная иллюстрация не повторяет его для экранного диктора.
Практика: таблица с заголовками строк и колонок
В сравнительной таблице число или короткий ответ часто понятны только на пересечении строки и колонки. Упражнение помогает сохранить оба направления контекста через заголовочные ячейки.
Практика: карточка с двухуровневым планом темы
Вложенный список помогает показать, какие подпункты относятся к конкретному этапу. Важно вложить дочерний список внутрь соответствующего li, а не разместить его случайным соседом общего списка.
Практика: этапы работы в адаптивной полосе
Последовательность этапов можно показать горизонтально при достаточной ширине и вертикально на узком экране. Порядок должен оставаться понятным без соединительных стрелок и цветовых кодов.
Практика: место под изображение до его выбора
В редакторе или прототипе полезно заранее показать область будущего изображения. Пустое состояние должно объяснять, что ресурс ещё не выбран, а не выглядеть как сломанная картинка или вечная загрузка.
Практика: общая инструкция для группы полей
Несколько связанных полей иногда требуют одной общей инструкции. Упражнение сочетает fieldset и legend с короткой подсказкой, доступной рядом с группой и связанной с полями.
Практика: кнопка с длинной подписью без обрезки
Длинная подпись кнопки должна оставаться читаемой на узком экране и при увеличении шрифта. В упражнении высота зависит от содержимого, а текст может переходить на следующую строку.
Практика: карточка с расширенной областью одной ссылки
Карточка с единственным переходом может получить большую область нажатия без превращения всего article в самодельную кнопку. При этом ссылка остаётся обычным элементом навигации с понятным текстом.
Практика: длинный идентификатор кода внутри абзаца
Короткие фрагменты code часто располагаются прямо в тексте статьи. Длинное имя может растянуть страницу, поэтому для него нужно отдельно определить правила переноса, сохранив исходные символы.
Практика: один термин с несколькими пояснениями
Список описаний может связывать один термин с несколькими значениями или пояснениями. Такая структура полезна, когда сведения относятся к одному названию, но их не стоит сливать в длинный абзац.
Практика: оформление открытого состояния details
Раскрывающийся блок можно оформить так, чтобы открытое состояние было заметно без отдельного JavaScript. Атрибут open уже отражает состояние нативного элемента и доступен CSS-селекторам.
Практика: заголовок статьи с компактными метаданными
Верхняя часть статьи должна оставаться понятной, когда название занимает несколько строк. Упражнение отделяет заголовок, краткое описание и дату без принудительной одинаковой высоты.
Практика: листинг кода с видимой подписью
Подпись листинга объясняет назначение примера до чтения кода. Figure и figcaption позволяют связать самостоятельный фрагмент с пояснением, не превращая его в обычное изображение.
Практика: временно отключённая группа полей
Группа связанных полей может стать недоступной до выполнения предыдущего шага. Важно объяснить причину вне отключённой области и не рассчитывать только на серый цвет элементов.
Практика: короткая вертикальная метка рядом с текстом
Вертикальное письмо может использоваться для короткой вспомогательной метки, если основной текст остаётся удобно читаемым. Упражнение показывает writing-mode без поворота всей карточки через transform.
Практика: код и объяснение результата рядом
При обучении полезно сопоставить небольшой фрагмент кода с тем, что он делает. Две колонки должны превращаться в последовательное чтение на узком экране без потери подписей.
Практика: измеряемая величина с подписью meter
Meter подходит для скалярного значения в известном диапазоне, например занятого места учебного архива. Он отличается от progress, который показывает ход выполняемой задачи.
Практика: группы вариантов в нативном select
Optgroup помогает разделить варианты выбора на понятные категории. Это полезно, когда небольшой список уже трудно просматривать одной непрерывной последовательностью.
Практика: ограничение textarea с честной подсказкой
Ограничение длины текста нужно объяснять до отправки формы. Упражнение показывает maxlength и видимую подсказку, не обещая автоматический счётчик, которого в разметке нет.
Практика: поиск с явным выбором раздела
Поиск по нескольким разделам должен ясно показывать область действия. В упражнении строка запроса и выбор раздела отправляются как разные параметры одной формы.
Практика: памятка, которая остаётся полезной на бумаге
Печатная версия памятки должна сохранять основные инструкции без ненужных экранных действий. Упражнение разделяет содержание и пояснение, которое нужно только при работе в браузере.