Как записать любой цвет: имена, hex, rgb, hsl, oklch, прозрачность и смешивание.

px, em, rem, %, vw, vh, dvh, ch и функции calc, min, max, clamp.

Семейство, свои шрифты через @font-face, размер, насыщенность, начертание, межстрочный интервал.

Выравнивание, подчёркивания, регистр, интервалы, тени, переносы и обрезка длинного текста.

Маркеры списков, ::marker и состояния ссылок: :link, :visited, :hover, :focus, :active.

Собираем красивую страницу меню из цвета, шрифтов и оформления текста.

Каждый элемент — коробка: содержимое, padding, border, margin, ширина и высота.

Почему карточка шире, чем задано, и куда пропадают вертикальные отступы.

border-width, border-style, border-color, border-radius, outline и outline-offset.

Фоновые картинки, размер, позиция, повтор, градиенты и несколько фонов сразу.

box-shadow, filter, backdrop-filter и mix-blend-mode.

block, inline, inline-block, none; visibility; overflow; object-fit; aspect-ratio.

Собираем карточку из блочной модели, фона, теней и пропорций.

Выбор по атрибуту и его значению: [href], [type="email"], ^=, $=, *=.

Потомок, прямой ребёнок, соседи: пробел, >, + и ~.

Структурные, логические и для форм: :first-child, :nth-child(), :not(), :is(), :where(), :has() и другие.

::before и ::after с content, ::first-letter, ::first-line, ::selection, ::placeholder, ::backdrop.

display: flex, направление, перенос и промежутки gap.

justify-content, align-items, align-self, align-content и order.

flex-grow, flex-shrink, flex-basis и короткая запись flex.

Собираем адаптивную шапку: логотип, меню, кнопка брони.

display: grid, grid-template-columns и rows, единица fr, repeat() и minmax().

grid-column, grid-row, span, grid-area и именованные области grid-template-areas.

auto-fill и auto-fit, неявные строки grid-auto-rows и grid-auto-columns, grid-auto-flow и dense.

justify-items, justify-self, place-items, place-content, place-self и subgrid.

Адаптивное меню из карточек на Grid с широкой карточкой хита.

static, relative, absolute, fixed, sticky и координаты top, right, bottom, left, inset.

z-index, контекст наложения и isolation.

float, clear, columns, column-count, column-gap и column-rule.

@media, ширина экрана, mobile-first, viewport-единицы и meta viewport.

prefers-color-scheme, prefers-reduced-motion, hover, pointer и orientation.

container-type, container-name, @container и единицы cqi.

Главная сайта: телефон, планшет, компьютер и тёмная тема.

transition-property, duration, timing-function, delay, сокращение transition и cubic-bezier().

transform, translate, rotate, scale, transform-origin и perspective.

@keyframes, animation-name, duration, iteration-count, direction, fill-mode, play-state и сокращение animation.

scroll-behavior, scroll-snap-type, scroll-snap-align, scroll-margin, scroll-padding и overscroll-behavior.

Пользовательские свойства --x, var() с запасным значением, область видимости и @property.

Нативная вложенность с &, каскадные слои @layer и область @scope.

margin-inline, margin-block, padding-inline, padding-block, inline-size, block-size, inset-inline и writing-mode.

color-scheme, функция light-dark(), проверка поддержки @supports и практика clamp().

accent-color, appearance, caret-color, cursor, pointer-events, user-select, resize и field-sizing.

counter-reset, counter-increment, counter() и content в псевдоэлементах.

Контраст, видимый фокус, forced-colors, скрытый для глаз текст sr-only и размер целей.

content-visibility, contain, will-change, clip-path и практика фильтров и object-fit.

@media print, @page, break-inside, а также border-collapse, border-spacing, table-layout и caption-side.

Собираем всё: переменные, сетка, адаптив, анимации, доступность.