HTML & CSS
Интерактивный справочник-курс по вёрстке: HTML5, CSS3, семантика, Flexbox, Grid, адаптивность — 50 уроков
📚 Что повторить перед изучением
- Основы работы с браузером: открыть DevTools (F12), вкладка Elements и Styles
- Командная строка / терминал: cd, mkdir, ls/dir
- Git: init, add, commit, branch, checkout
- VS Code: установка, открытие папки, терминал, Live Server
🌐 Раздел 1: Введение (Уроки 1–2)
История развития HTML и CSS; как браузер превращает код в страницу.
📄 Раздел 2: Основы HTML (Уроки 3–9)
Структура документа, теги, семантика, текст, медиа, таблицы, формы и доступность.
Урок 03 — Структура HTML-документа
DOCTYPE, html, head, body; мета-теги, lang, charset; валидный скелет страницы
Урок 04 — Теги, атрибуты, вложенность
Открывающие и закрывающие теги, атрибуты, правила вложенности, блочные и строчные элементы
Урок 05 — Семантическая разметка
header, nav, main, section, article, aside, footer; зачем семантика важна для SEO и доступности
Урок 06 — Текст, заголовки, списки, ссылки
h1–h6, p, strong, em, span, ul, ol, li, dl; ссылки: href, target, rel, абсолютные и относительные пути
Урок 07 — Изображения, видео, аудио
img: src, alt, width, height; figure/figcaption; video, audio, source; форматы медиа и оптимизация
Урок 08 — Таблицы и формы
table, thead, tbody, tr, th, td; form, input, textarea, select, label, button; типы input и атрибуты валидации
Урок 09 — Доступность: alt, label, aria, клавиатура
Alt-тексты, label+id, role, aria-label, aria-describedby, tabindex, навигация с клавиатуры
🎨 Раздел 3: Основы CSS (Уроки 10–14)
Подключение стилей, селекторы, каскад, единицы измерения, цвета и шрифты.
Урок 10 — Подключение CSS: способы и порядок
Встроенный (style), внутренний (style-тег), внешний (link); порядок загрузки и специфичность источника
Урок 11 — Селекторы CSS
Теговые, классовые, ID, атрибутные, псевдоклассы :hover/:focus, псевдоэлементы ::before/::after, комбинаторы
Урок 12 — Каскад, наследование, специфичность
Правила приоритета, вес селекторов, !important, inherit, initial, unset; порядок применения стилей
Урок 13 — Единицы измерения: px, %, em, rem, vw, vh
Абсолютные vs относительные единицы; когда использовать rem vs em; vw/vh для адаптивности
Урок 14 — Цвета, шрифты, типографика
HEX, RGB, HSL, opacity; font-family, font-size, line-height, letter-spacing, Google Fonts, системный стек
📦 Раздел 4: Блочная модель и классическая вёрстка (Уроки 15–21)
Box model, display, позиционирование, z-index, float и основы макетирования.
Урок 15 — Блочная модель (box model)
content, padding, border, margin; разница box-sizing: content-box vs border-box; инспектирование в DevTools
Урок 16 — Свойство display
block, inline, inline-block, none, contents; как display влияет на поведение элемента в потоке документа
Урок 17 — margin, padding, border, box-sizing
Схлопывание margin, авто-центрирование, shorthand-нотация, outline vs border, box-shadow
Урок 18 — Позиционирование (static/relative/absolute/fixed/sticky)
Поток документа, контейнер позиционирования, top/right/bottom/left, fixed-хедер, sticky-элементы
Урок 19 — z-index и контекст наложения (stacking context)
Как работает z-index, создание stacking context, типичные ловушки с z-index в реальных проектах
Урок 20 — Блочная вёрстка: float и clearfix
float: left/right, clear, BFC (Block Formatting Context), clearfix-хак; почему float не для макетов в 2024
Урок 21 — Основы макетирования
Многоколоночные макеты, header-main-footer, сайдбар, центрирование блоков; сборка простого макета
⚡ Раздел 5: Flexbox (Уроки 22–25)
Введение в Flexbox, главная и поперечная оси, выравнивание, практические шаблоны.
Урок 22 — Введение во Flexbox
display: flex, flex-container vs flex-items, основные свойства flex-direction, flex-wrap, flex-flow
Урок 23 — Главная и поперечная оси
Main axis vs cross axis, как меняются оси при flex-direction: column; flex-grow, flex-shrink, flex-basis
Урок 24 — Выравнивание: justify-content, align-items, gap
justify-content, align-items, align-self, align-content, order, gap; центрирование по двум осям
Урок 25 — Практические шаблоны на Flexbox
Holy Grail, карточный список, навбар, footer внизу экрана, адаптивная сетка; реальные компоненты
🗂️ Раздел 6: CSS Grid (Уроки 26–30)
Сетка Grid, строки и колонки, grid-area, сравнение с Flexbox и когда что использовать.
Урок 26 — Введение в CSS Grid
display: grid, grid-container vs grid-items, grid-template-columns/rows, fr-единицы, repeat()
Урок 27 — Строки, колонки, grid-template
grid-column, grid-row, span, минимакс minmax(), auto-fill vs auto-fit, gap в Grid
Урок 28 — grid-area и сложные сетки
grid-area, grid-template-areas, именованные области, вложенные сетки, subgrid
Урок 29 — Flexbox vs Grid: сравнение
Одномерный vs двумерный макет, таблица различий, когда Flexbox лучше, когда Grid лучше
Урок 30 — Когда что использовать
Паттерны выбора Flexbox/Grid/позиционирование; сборка страницы с комбинированным макетом
📱 Раздел 7: Адаптивная и отзывчивая вёрстка (Уроки 31–38)
Viewport, DPR, media queries, mobile-first, адаптивные изображения, типографика, prefers-*.
Урок 31 — Проблемы разных экранов: viewport, DPR
meta viewport, device pixel ratio, логические и физические пиксели, экраны Retina
Урок 32 — Адаптивная, резиновая, отзывчивая вёрстка
Фиксированная, резиновая, адаптивная, отзывчивая (RWD): определения и принципиальные различия
Урок 33 — Media queries: min/max-width, ориентация
@media синтаксис, breakpoints, min-width vs max-width, portrait/landscape, prefers-color-scheme
Урок 34 — Mobile-first подход
Стратегия mobile-first: стили по умолчанию для мобильных, расширение через min-width breakpoints
Урок 35 — Desktop-first подход
Стратегия desktop-first: стили по умолчанию для широких экранов, сужение через max-width breakpoints
Урок 36 — Адаптивные изображения: srcset, sizes, picture
srcset + sizes для разных экранов, picture с source и media, WebP с фолбэком, art direction
Урок 37 — Адаптивная типографика и отступы
Fluid typography с clamp(), адаптивные отступы, масштабируемая модульная система, типографическая сетка
Урок 38 — prefers-* media: доступность и тема
prefers-color-scheme, prefers-reduced-motion, prefers-contrast; реализация тёмной темы без JS
✨ Раздел 8: Современные CSS-практики (Уроки 39–45)
clamp(), CSS-переменные, псевдоклассы, анимации, трансформации, организация кода, БЭМ.
Урок 39 — clamp(), min(), max(), calc()
Математические функции CSS: гибкие значения без media-queries, fluid-spacing, clamp() для типографики
Урок 40 — CSS-переменные (custom properties)
--var-name: value; var(), наследование, область видимости, переопределение в media-queries и :root
Урок 41 — Псевдоклассы и псевдоэлементы
:hover, :focus, :focus-visible, :nth-child, :not(), :is(), :where(); ::before, ::after, ::placeholder, ::selection
Урок 42 — Анимации и переходы: transition и @keyframes
transition: property duration easing delay; @keyframes, animation-name/duration/iteration/fill-mode; GPU-анимации
Урок 43 — Трансформации: transform, 2D/3D
translate, rotate, scale, skew; matrix; perspective, rotateX/Y/Z; transform-origin; составные трансформации
Урок 44 — Организация CSS: структура, порядок свойств
Порядок свойств в объявлении, разбивка файлов, ITCSS, utility-first; комментарии и документация
Урок 45 — БЭМ: block__element--modifier
Методология БЭМ: блок, элемент, модификатор; именование классов, изоляция компонентов, примеры
♿ Раздел 9: Доступность, кроссбраузерность и оптимизация (Уроки 46–49)
Типичные ошибки вёрстки, кроссбраузерность, валидация HTML/CSS, производительность.
Урок 46 — Типичные ошибки вёрстки
Антипаттерны: пиксели вместо rem, !important, inline-стили, отсутствие семантики, слабая доступность
Урок 47 — Кроссбраузерность: @supports, фолбэки
@supports для прогрессивного улучшения, вендорные префиксы, caniuse.com, фолбэки для старых браузеров
Урок 48 — Валидация HTML и CSS
W3C Markup Validator, CSS Validator, автоматическая проверка в VS Code, eslint-plugin-html
Урок 49 — Оптимизация и производительность
Critical CSS, минификация, удаление неиспользуемого CSS (PurgeCSS), Lighthouse-аудит, Core Web Vitals
🏁 Раздел 10: Итоговый проект (Урок 50)
Адаптивный многостраничный сайт от нуля до готового результата — сборка всего пройденного.
📚 Справочники предмета
Справочники готовы и открываются без сервера.
Глоссарий основных терминов HTML/CSS
DOM, каскад, специфичность, box model, BFC, stacking context и другие ключевые понятия
Справочник HTML-тегов
Все теги HTML5 с описанием, атрибутами, примерами использования и категориями контента
Справочник CSS-свойств
Все CSS-свойства с синтаксисом, допустимыми значениями, начальными значениями и примерами
Таблица сравнения Flexbox и Grid
Рядом: свойства Flexbox vs Grid, когда что применять, матрица задач и решений
Чек-лист хорошей HTML-разметки
Семантика, доступность, aria-атрибуты, валидность, мета-теги — что проверить перед публикацией
Чек-лист хорошей CSS-вёрстки
Специфичность, организация, избегание !important, CSS-переменные, именование — критерии качества
Чек-лист адаптивной вёрстки
Viewport meta, breakpoints, mobile-first, тестирование на устройствах, адаптивные изображения
Каталог типичных проблем на разных экранах
Горизонтальный скролл, переполнение текста, мелкие тапабельные зоны — причины и способы решения
План самостоятельной практики после прохождения учебника
Проекты для портфолио, ресурсы для углубления, roadmap фронтенд-разработчика