CSS

Придай своим страницам стиль

CSS превращает сырой документ в аккуратный интерфейс. Селекторы, блочная модель, Flexbox, Grid и адаптивная вёрстка, затем анимации и архитектура CSS: это направление даёт всё, что нужно, чтобы оформлять страницы методично.

Основы

Новичок - база, шаг за шагом

• Подключение CSS к страницеУзнай, что такое CSS, как подключить его к HTML-странице и как написать своё самое первое правило.
• Базовые селекторы и цветаНаучись точно нацеливаться на элементы с помощью селекторов по тегу, классу и id, а затем задавать им цвета.
• Блочная модельПойми, что каждый элемент - это блок из содержимого, внутреннего отступа, рамки и внешнего отступа, и освой box-sizing.
• Текст и шрифтыВыбери шрифт через font-family, а затем настрой размер, насыщенность и межстрочный интервал, чтобы текст было приятно читать.
• Первые макетыНаучись отличать блочные элементы от строчных и освой классические приёмы центрирования элемента.

Развитие

Средний уровень - создавай реальные проекты

• Каскад, специфичность и наследованиеНаучись предсказывать, какое правило CSS победит, с помощью специфичности, и используй наследование, чтобы писать меньше кода.
• Flexbox: оси, justify/align, gap, flex-growОсвой две оси Flexbox, чтобы выравнивать, центрировать и распределять элементы в повседневных макетах.
• Grid: колонки, строки, областиСобирай галереи и полные макеты страниц с помощью колонок, строк и именованных областей CSS Grid.
• Позиционирование: relative, absolute, fixed, sticky, z-indexЗакрепляй бейджи, шапки и модальные окна ровно там, где нужно, с помощью позиционирования CSS и продуманной шкалы z-index.
• Адаптивная вёрстка: медиазапросы, относительные единицыПодстраивай интерфейсы под любой размер экрана с подходом mobile-first, медиазапросами и единицами rem, % и vw.

Продвинутый

Уверенный уровень - продвинутые паттерны и производительность

• CSS-переменные и функции calc/clampОсвой пользовательские свойства, то, как они разрешаются во время выполнения внутри каскада, и функции calc() и clamp() для плавных, адаптивных интерфейсов.
• Переходы и анимации: @keyframes, transform, таймингАнимируй на композиторе через transform и opacity, выстраивай свои @keyframes и уважай предпочтения пользователей по движению.
• Современные селекторы: :has, :is, :where, продвинутый :nth-childИспользуй недавние функциональные псевдоклассы, чтобы выбирать по содержимому, группировать селекторы без раздувания специфичности и попадать в сложные шаблоны.
• Архитектура CSS: BEM, utility-first, организация файловСравни BEM и подход utility-first, их реальные компромиссы в команде, и выстрой свои файлы через слои каскада.
• Контейнерные запросы и нативная вложенность CSSСделай компоненты отзывчивыми к своему контейнеру, а не к вьюпорту, и структурируй таблицы стилей нативной вложенностью.

Мастерство

Эксперт - архитектура, внутренности и крайние случаи

• Конвейер рендеринга: reflow, repaint, композитингРазберись в четырёх фазах отрисовки в браузере, чтобы точно знать, какие свойства CSS обходятся дорого и как will-change работает изнутри.
• Слои каскада (@layer) и @scopeОсвой два новых критерия каскада - слои и близость области - чтобы выстраивать архитектуру стилей без войн специфичности.
• Цвета и продвинутые функции: oklch, color-mix, min/maxИспользуй перцептивные цветовые пространства, относительный синтаксис цвета и типизированные математические функции, чтобы строить дизайн-системы, которые браузер считает за тебя.
• Экспертные сетки: subgrid, auto-fit и minmaxСтрой самонастраивающиеся сетки без медиазапросов и выравнивай вложенные компоненты по трекам родителя с помощью subgrid.
• Современные взаимодействия: scroll-snap, view transitionsОрганизуй магнитную прокрутку, переходы между состояниями, которые анимирует сам браузер, и строгое уважение к prefers-reduced-motion.