HTML и CSS

Для чего модуль

Научиться верстать не «чтобы выглядело похоже», а как инженер: с семантикой, доступностью, устойчивым layout и предсказуемым поведением в реальных данных.

Результат после прохождения

1. Вы проектируете разметку как контракт для браузера, скринридеров и SEO.
2. Вы выбираете Flex/Grid/адаптивные техники по задаче, а не по привычке.
3. Вы управляете каскадом и специфичностью без хаотичных !important.
4. Вы умеете снижать CLS и визуальные регрессии на реальных экранах.

Термины и аббревиатуры

Термин	Коротко
Semantic HTML	Смысловая разметка
ARIA	Атрибуты доступности
Specificity	Приоритет CSS
Responsive	Адаптация под экраны
CLS	Метрика визуального сдвига

Фокус по грейдам

1. Junior: понимать базовые механики и объяснять их простыми примерами.
2. Middle: применять тему в продуктовых сценариях с учетом рисков и ограничений.
3. Senior: управлять архитектурными trade-offs, метриками и эволюцией решения.

Как работать с модулем

1. Берите один реальный экран (каталог, форма, карточка) и улучшайте его по урокам.
2. После каждого урока проверяйте страницу в keyboard-only режиме.
3. Для каждой правки фиксируйте причину: UX, a11y, производительность, поддерживаемость.

Программа модуля

Урок 1. Семантика и доступность

Цель: строить HTML-структуру, которую корректно читают браузер, assistive-технологии и поисковики.

Семантика как структура смысла

1. Используйте header/main/nav/aside/footer для смысловых областей.
2. Заголовки (h1...h6) должны отражать иерархию контента.
3. Кнопка — для действия, ссылка — для навигации.

Формы и доступность

1. У каждого input должен быть связанный label.
2. Ошибки валидации должны быть программно связаны с полем.
3. Состояния focus, disabled, invalid — обязательная часть UX.

<label for="email">Email</label>
<input id="email" name="email" type="email" aria-describedby="email-error" />
<p id="email-error" role="alert">Введите корректный email</p>

ARIA: только когда нативного HTML недостаточно

1. Сначала используйте нативные элементы.
2. ARIA не исправляет плохую структуру, а дополняет корректную.
3. Избыточная ARIA часто ухудшает доступность.

Где ломается в проде

1. Placeholder используется как замена label.
2. Модалка не держит focus trap.
3. Нельзя пройти ключевой user-flow с клавиатуры.

Мини-задача (обязательная)

Возьмите форму логина и доведите до базового a11y уровня: label, ошибки, keyboard-nav, видимый focus, корректные role/aria.

Что спросит интервьюер: почему placeholder не заменяет label.

Критерий готовности по уроку: вы можете пройти критичный сценарий страницы только клавиатурой и объяснить, почему разметка семантически корректна.

Урок 2. Layout и адаптивность

Цель: собирать устойчивые layout, которые не разваливаются от реального контента.

Flexbox vs Grid

1. Flex — одно измерение (ряд или колонка).
2. Grid — двумерная сетка (ряды + колонки).
3. В сложных экранах обычно используется комбинация Flex + Grid.

Responsive стратегии

1. Mobile-first как дефолт.
2. min/max/clamp для гибкой типографики и размеров.
3. Проверка edge-cases: длинные слова, пустые блоки, сверхдлинные списки.

Типовые источники layout-багов

1. Неправильные min-width в flex-контейнере.
2. 100vh на mobile без учета системных UI панелей.
3. Неуправляемый overflow и «прыжки» интерфейса.

Мини-задача (обязательная)

Сверстайте карточный список с 3 breakpoints и проверьте: очень длинный заголовок, пустое описание, 50+ карточек.

Что спросит интервьюер: когда Grid лучше Flexbox и наоборот.

Критерий готовности по уроку: layout остается стабильным на основных ширинах и edge-cases без ad-hoc фиксов.

Урок 3. CSS-архитектура

Цель: сделать стили масштабируемыми и безопасными для командной разработки.

Каскад и специфичность

1. Сначала управляйте порядком и слоем, а не повышайте специфичность.
2. Используйте :where()/слои/утилитарные классы осознанно.
3. !important — только как исключение с документированной причиной.

Стратегии организации стилей

1. Component-scoped стили для локальности.
2. Design tokens для цветов/spacing/typography.
3. Единые naming rules и правила композиции классов.

Антипаттерны

1. Глобальные селекторы, которые задевают чужие компоненты.
2. Копипаст переменных и «почти одинаковых» классов.
3. Стили, завязанные на структуру DOM, которая часто меняется.

Мини-задача (обязательная)

Разберите конфликт специфичности в существующем экране и устраните его без !important. Добавьте короткий комментарий, почему решение устойчивое.

Что спросит интервьюер: как вы организуете CSS в команде из нескольких разработчиков.

Критерий готовности по уроку: вы можете объяснить CSS-структуру проекта так, чтобы новый разработчик не ломал соседние фичи.

Урок 4. Производительность и UX

Цель: понимать, как решения в HTML/CSS влияют на скорость и визуальную стабильность.

Влияние верстки на метрики

1. Ресурсы выше fold влияют на LCP.
2. Нестабильные размеры блоков и media влияют на CLS.
3. Тяжелые CSS-эффекты могут ухудшать responsiveness.

Практические техники

1. Резервируйте размеры для изображений/баннеров.
2. Оптимизируйте font loading и fallback-шрифты.
3. Проверяйте критические состояния skeleton/loading/empty.

Где ломается в проде

1. Асинхронно подгружается контент без зарезервированного пространства.
2. Иконки/шрифты подменяются с заметным layout shift.
3. Стили «для красоты» ухудшают время интерактивности.

Мини-задача (обязательная)

Уменьшите CLS одного экрана и зафиксируйте: исходное значение, изменения, итоговое значение и визуальный эффект.

Что спросит интервьюер: какие CSS-решения чаще всего вызывают деградацию рендеринга.

Критерий готовности по уроку: вы связываете каждое изменение в верстке с метрикой и пользовательским эффектом.

Практика

1. Сверстайте экран с формой и карточным списком в 3 брейкпоинтах.
2. Проведите a11y-проверку: keyboard-only, roles, labels, errors, focus.
3. Исправьте один конфликт специфичности без !important.
4. Сделайте одну оптимизацию по CLS/LCP и зафиксируйте baseline/after.
5. Закрепите в Junior JavaScript вопросах и в Песочнице.

Связь с треками и вопросами

1. Треки: Junior трек, Middle трек, Senior трек.
2. Вопросы: Junior JavaScript, Middle JavaScript и React.
3. Повторение: 3-5 вопросов без подсказок -> сверка с модулем -> повтор через 24 часа.

Критерий готовности

Вы аргументируете HTML/CSS-решения через доступность, устойчивость layout и измеримый UX-эффект.

Артефакты после модуля

1. Шаблон доступной формы (разметка + правила ошибок).
2. Чек-лист адаптивной верстки и anti-patterns.
3. Мини-отчет по оптимизации визуальной стабильности (CLS).
4. Набор из 5 сильных ответов по HTML/CSS собеседованию.

Куда дальше

1. JavaScript
2. React
3. HTML
4. CSS