← Все навыки

HTML и CSS: фундамент вёрстки

курс семантической вёрстки для начинающих фронтендеров уровня Junior, готовящий к техническим собеседованиям по HTML и CSS. Студент научится верстать доступные, адаптивные и масштабируемые интерфейсы, объяснять специфичность и каскад «под капотом» и уверенно отвечать на классические вопросы про центрирование и подсчёт селекторов.

6 модулей, 24 темы Junior Индивидуально с ментором

Программа

Вводный модуль

  • О курсе и как с ним работать

Модуль 1. HTML: структура и смысл

  • Лекция 1.1. HTML-документ и семантика: разметка, которая имеет значение
  • Практика 1.1. HTML-документ и семантика: разметка, которая имеет значение
  • Лекция 1.2. Формы и нативные контролы
  • Практика 1.2. Формы и нативные контролы

Модуль 2. CSS: как применяются стили

  • Лекция 2.1. Каскад, специфичность и наследование
  • Практика 2.1. Каскад, специфичность и наследование
  • Лекция 2.2. Боксовая модель: размеры, отступы и их ловушки
  • Практика 2.2. Боксовая модель: размеры, отступы и их ловушки
  • Лекция 2.3. Единицы измерения и кастомные свойства
  • Практика 2.3. Единицы измерения и кастомные свойства

Модуль 3. Раскладка

  • Лекция 3.1. Поток документа и позиционирование
  • Практика 3.1. Поток документа и позиционирование
  • Лекция 3.2. Flexbox: одномерная раскладка
  • Практика 3.2. Flexbox: одномерная раскладка
  • Лекция 3.3. Grid: двумерная раскладка
  • Практика 3.3. Grid: двумерная раскладка
  • Лекция 3.4. Адаптивность: media queries и mobile-first
  • Практика 3.4. Адаптивность: media queries и mobile-first

Модуль 4. CSS в проекте

  • Лекция 4.1. Организация стилей: методологии и изоляция
  • Практика 4.1. Организация стилей: методологии и изоляция
  • Лекция 4.2. Переходы и анимации
  • Практика 4.2. Переходы и анимации

Модуль 5. Вопросы с собеседований

  • Вопросы с собеседований по темам курса

Что разбираем

  • Структура документа, DOCTYPE, метатеги viewport и charset
  • Блочные и строчные элементы
  • Семантические теги header/nav/main/article/section/aside/footer, их роль для SEO и скринридеров
  • Формы, типы input, атрибуты валидации, Constraint Validation API, novalidate
  • Доступность (a11y) — ARIA-роли и атрибуты, навигация с клавиатуры, контраст, WCAG
  • Основы SEO — sitemap, robots.txt, Open Graph, schema.org
  • Селекторы, специфичность, каскад, наследование, единицы измерения px/em/rem/%/vw/vh
  • Блочная модель — content/padding/border/margin, box-sizing: border-box, схлопывание margin
  • Позиционирование static/relative/absolute/fixed/sticky, z-index и stacking context
  • Flexbox — main/cross axis, justify-content, align-items, flex-grow/shrink/basis, wrap
  • CSS Grid — grid-template, fr, minmax(), auto-fill/auto-fit, grid-area
  • Адаптивная вёрстка — media queries, mobile-first, responsive images через srcset, container queries
  • Transition, animation, @keyframes, transform, will-change
  • Препроцессоры и методологии — Sass/SCSS (переменные, вложенность, миксины, partials, @use/@forward), PostCSS и Autoprefixer, методология BEM (Block/Element/Modifier), CSS Modules

Практика

  • Сверстать семантическую страницу-лендинг без div-супа: header, nav, main, несколько section/article, footer
  • Собрать форму регистрации с нативной валидацией через типы input и атрибуты required/pattern, отключить браузерную через novalidate и показать кастомные ошибки через Constraint Validation API
  • Пройти по странице скринридером и клавиатурой, проставить ARIA-атрибуты, добиться контраста по WCAG
  • Реализовать 5 способов центрирования блока (Flexbox, Grid, absolute + transform, margin: auto, line-height) и объяснить, когда какой применим
  • Посчитать вручную специфичность набора селекторов и предсказать, какое правило победит в каскаде
  • Воспроизвести и починить «поехавший» макет из-за box-sizing и схлопывания margin
  • Собрать навбар и карточную сетку на Flexbox (одномерная раскладка), затем дашборд на Grid с minmax() и auto-fit (двумерная)
  • Сделать адаптив mobile-first с брейкпоинтами через media queries и отдачей разных картинок через srcset
  • Реализовать липкую шапку на position: sticky и модалку с корректным z-index через понимание stacking context
  • Переписать плоский CSS на SCSS с переменными, миксинами и partials, разбить компоненты по BEM
  • Настроить PostCSS с Autoprefixer в сборке и убедиться, что вендорные префиксы проставляются автоматически
  • Анимировать появление элемента только через transform и opacity, объяснить, почему это дешевле для рендера, чем анимация left/width

Как проходит обучение

  • Занятия один на один с ментором под ваш темп и пробелы
  • Материалы курса открываются в личном кабинете, практику разбираете на встречах
  • Программа собирается под цель: подготовка к собеседованию или рабочая задача