Pixel Perfect: HTML и CSS с нуля до профессионала
Полный курс HTML5 и CSS3: от первого тега до профессиональной вёрстки. Flexbox, Grid, адаптивность, анимации, SCSS, BEM, accessibility и современный CSS 2025.
Программа курса
Семантические теги: <header>, <nav>, <main>, <footer>
10 задач
Секции и статьи: <section>, <article>, <aside>
10 задач
Заголовки: <h1>-<h6> и иерархия страницы
8 задач
Текстовые теги: p, strong, em, span, br
6 задач
Списки: `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`
8 задач
Ссылки `<a>`: адреса, якоря и поведение
9 задач
Изображения: <img> и атрибут alt
6 задач
Таблицы: table, thead, tbody, tr, td, th
7 задач
Медиа: video, audio, picture и source
6 задач
Формы: <form>, <input>, <label>, <button>
10 задач
Типы input: text, email, tel, number, date, checkbox, radio
8 задач
`<select>`, `<textarea>`, `<fieldset>` и `<legend>`
6 задач
Финальный проект модуля: HTML-портфолио
8 задач
Подключение CSS через link, style и inline-стили
8 задач
Селекторы тегов, классов и ID
6 задач
Комбинированные селекторы: потомок, прямой ребенок и соседи
6 задач
Атрибутные селекторы: [attr], [attr="val"], [attr^="val"]
8 задач
Специфичность: как браузер выбирает CSS-правило
10 задач
Каскад: источники стилей и порядок
8 задач
Наследование: что наследуется, а что нет
7 задач
Единицы измерения: px, %, em, rem
8 задач
Единицы вьюпорта: vw, vh, vmin, vmax, dvh
8 задач
Цвет в CSS: hex, rgb() и rgba()
9 задач
Цвет в CSS: hsl(), oklch(), color-mix() и currentColor
8 задач
DevTools: работа с CSS
8 задач
Финальный проект модуля: стилизованное портфолио
7 задач
Box model: content, padding, border, margin
7 задач
`box-sizing: border-box`: почему это стандарт
7 задач
display: block, inline и inline-block
6 задач
`display: none` vs `visibility: hidden` vs `opacity: 0`
9 задач
Размеры в CSS: width, height, min и max ограничения
8 задач
`overflow`: `hidden`, `scroll`, `auto`, `clip`
8 задач
`position: static` и `position: relative`
8 задач
position: absolute и z-index
8 задач
position: fixed
6 задач
position: sticky
6 задач
`margin: auto` и центрирование блоков
7 задач
Финальный проект модуля: карточный интерфейс
6 задач
Что такое Flexbox: контейнер и элементы
8 задач
`flex-direction`: row, column и reverse-значения
8 задач
`justify-content`: выравнивание по главной оси
8 задач
`align-items`: выравнивание по поперечной оси
8 задач
`flex-wrap` и `align-content`
6 задач
`gap`, `row-gap`, `column-gap`
6 задач
`flex-grow`: как элементы растягиваются
10 задач
`flex-shrink`: как элементы сжимаются
8 задач
`flex-basis` и сокращение `flex`
10 задач
`align-self` и `order`
10 задач
Паттерн Holy Grail Layout на Flexbox
10 задач
Паттерн: идеальное центрирование с Flexbox
8 задач
Финальный проект модуля: Flexbox-лендинг
7 задач
Что такое CSS Grid: строки и колонки
7 задач
`grid-template-columns` и единица `fr`
6 задач
`grid-template-rows` и `auto`
8 задач
`gap` в CSS Grid
10 задач
`grid-column` и `grid-row`: размещение элементов
8 задач
`grid-template-areas`: именованные области
7 задач
`minmax()`: адаптивные колонки
8 задач
`auto-fill` и `auto-fit`: автоматические колонки
8 задач
`justify-items`, `align-items` и `place-items` в Grid
10 задач
`justify-content` и `align-content` в Grid
6 задач
`justify-self`, `align-self`, `place-self`
6 задач
`dense`-упаковка: `grid-auto-flow: dense`
7 задач
Subgrid: выравнивание вложенных грид-элементов
6 задач
Grid и Flexbox: когда что использовать
5 задач
Финальный проект модуля: дашборд аналитики
7 задач
Viewport: что это такое и зачем он нужен
6 задач
Mobile-first подход: почему это стандарт
7 задач
Media queries: синтаксис `@media`
6 задач
Стандартные брейкпоинты: мобильный, планшет, десктоп
6 задач
Адаптивная типографика: `clamp()` для шрифтов
5 задач
Адаптивные изображения: srcset, sizes и picture
6 задач
Адаптивный Flexbox: flex-wrap и медиазапросы
7 задач
Адаптивный Grid: auto-fit и медиазапросы
6 задач
Media queries для тёмной темы: `prefers-color-scheme`
5 задач
`prefers-reduced-motion`: уважаем пользователей
6 задач
DevTools: эмуляция устройств
6 задач
Финальный проект модуля: адаптивное портфолио
6 задач
Объявление и использование CSS-переменных
6 задач
:root и глобальные переменные
6 задач
Fallback-значения: var(--x, fallback)
6 задач
CSS-переменные и JavaScript: setProperty
6 задач
Тёмная тема через переменные и `data-theme`
6 задач
Design tokens: цвета, отступы, радиусы и тени
6 задач
Финальный проект модуля: дизайн-система с темами
6 задач
`font-family`, системные шрифты и font stack
6 задач
Google Fonts: подключение и оптимизация
6 задач
`@font-face`: самостоятельное подключение шрифта
5 задач
`font-display`: стратегии загрузки шрифтов
5 задач
Variable fonts: один файл для диапазона начертаний
8 задач
`font-size`, `line-height`, `letter-spacing`, `word-spacing`
7 задач
`font-weight`, `font-style`, `font-variant`
7 задач
`text-transform`, `text-decoration`, `text-shadow`
8 задач
Обрезка текста: `text-overflow: ellipsis` и `line-clamp`
6 задач
Финальный проект модуля: типографическая система
6 задач
`::before` и `::after`: декоративный контент
6 задач
Типографические псевдоэлементы: первая строка, первая буква и выделение
6 задач
Псевдоэлементы `::placeholder`, `::marker`, `::backdrop`
6 задач
Псевдоклассы состояния: :hover, :focus, :active
6 задач
Псевдоклассы форм: :checked, :disabled, :valid, :invalid, :placeholder-shown
7 задач
Структурные псевдоклассы: :first-child, :last-child и :nth-child()
5 задач
:nth-of-type(), :only-child, :empty и :not()
6 задач
:is(), :where() и :has(): современные псевдоклассы
6 задач
`:focus-visible` vs `:focus`: умный фокус
5 задач
`:target`: стилизация якорной навигации
6 задач
Финальный проект модуля: интерактивные компоненты
8 задач
`transition`: базовые переходы
6 задач
`transition-timing-function`: easing-функции
5 задач
Что анимировать дешево: compositor-only свойства
7 задач
`@keyframes`: синтаксис CSS-анимаций
5 задач
`animation`: применение `@keyframes`
6 задач
`animation-fill-mode`: состояние до и после анимации
6 задач
`animation-play-state`: пауза и запуск анимации
7 задач
Fade-in при появлении в области видимости
6 задач
`prefers-reduced-motion`: безопасные анимации
5 задач
Финальный проект модуля: анимированный hero и лоадер
6 задач
Смещение через transform: translate()
6 задач
`scale()`: масштабирование
6 задач
`rotate()` и `skew()`
6 задач
`transform-origin`: точка трансформации
6 задач
Множественные transform-функции
7 задач
`perspective` и 3D-пространство
6 задач
rotateX(), rotateY(), rotateZ() и translateZ()
6 задач
`backface-visibility`: изнанка 3D-карточки
7 задач
Финальный проект модуля: 3D flip-карточки
5 задач
`calc()`: вычисления в CSS
7 задач
`min()` и `max()`: ограничение значений
6 задач
`clamp()`: плавное масштабирование
6 задач
Container Queries: @container
6 задач
Единицы размера контейнера: cqi и cqb
6 задач
:has() как parent selector
7 задач
:is() и :where(): группировка селекторов
6 задач
CSS Nesting: вложенность без препроцессора
6 задач
@layer: каскадные слои
6 задач
Финальный проект модуля: современный компонент
5 задач
Базовый синтаксис SVG
6 задач
SVG-фигуры: `<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<path>`
5 задач
Встраивание SVG: <img> vs inline vs <use>
5 задач
Стилизация SVG через CSS: fill, stroke, currentColor
5 задач
SVG-анимации через CSS
6 задач
Адаптивный SVG: preserveAspectRatio
6 задач
Финальный проект модуля: SVG-иконки и иллюстрация
5 задач
CSS Scroll Snap: scroll-snap-type
5 задач
`scroll-snap-align` и `scroll-snap-stop`
7 задач
`scroll-padding` и `scroll-margin`
6 задач
Контроль прокрутки с overscroll-behavior
5 задач
CSS Logical Properties: inline и block
6 задач
Logical Properties: `padding-block`, `border-inline`, `inset-block`
5 задач
Финальный проект модуля: Snap-слайдер и RTL-компонент
5 задач
Зачем нужна доступность: WCAG 2.1 AA
6 задач
Семантика: первый уровень доступности
5 задач
ARIA-роли: role, aria-label и aria-labelledby
5 задач
ARIA-состояния: aria-expanded, aria-hidden, aria-live
6 задач
Фокус и навигация с клавиатуры
6 задач
Контраст цветов: инструменты и метрики
6 задач
Тестирование со скринридерами: VoiceOver и NVDA
6 задач
`prefers-reduced-motion` и `prefers-contrast`
5 задач
Финальный проект модуля: A11y-аудит портфолио
6 задач
Зачем нужна CSS-архитектура
5 задач
BEM: Block - что это такое
5 задач
BEM: Element - части блока
5 задач
BEM: Modifier и варианты
5 задач
BEM на практике: рефакторинг компонента
4 задач
Файловая структура CSS по компонентам
5 задач
Mix в BEM: компонент с несколькими ролями
5 задач
Финальный проект модуля: рефакторинг на BEM
5 задач
Что такое препроцессор и зачем он нужен
6 задач
Установка Sass: Node.js и CLI-команда `sass`
5 задач
SCSS-переменные: `$variable`
6 задач
SCSS Nesting: вложенность правил
6 задач
@mixin и @include: переиспользуемые блоки стилей
5 задач
`@extend` и `%placeholder`: наследование стилей
4 задач
SCSS-функции: от darken() и lighten() к color.scale() и math.div()
7 задач
`@use` и `@forward`: модульная система Sass
6 задач
`@each` и `@for`: циклы в SCSS
5 задач
Финальный проект модуля: SCSS-компонентная библиотека
6 задач
Can I Use: как проверять поддержку свойств
5 задач
@supports: проверка возможностей CSS
6 задач
Vendor prefixes: история и современность
6 задач
CSS Reset и Normalize: зачем и что выбрать
5 задач
Critical CSS: что это и зачем
6 задач
Reflow и Repaint: как CSS влияет на производительность
6 задач
`will-change`: подсказки браузеру
5 задач
CSS Containment: `contain` и `content-visibility`
5 задач
Print CSS: @media print
6 задач
Финальный проект модуля: оптимизированный лендинг
6 задач