HTML и CSS

Раздел закрывает браузерный фундамент, который реально проверяют на собеседованиях: как HTML и CSS работают под капотом, как строится страница, как устроены раскладки и подходы к стилизации в современном вебе.

10 статей 69 вопросов

Начни с базы

Основы HTML и CSS: разметка, селекторы, box model

Фундамент HTML и CSS для начинающих: структура документа, семантическая разметка, базовый синтаксис CSS, селекторы, box model и display. Отсюда — путь к глубоким статьям раздела: каскаду, layout, позиционированию.

6 вопросов

Каскад, специфичность и современные селекторы

Cascade, specificity и @layer — алгоритм, по которому браузер решает, какое правило победит. Псевдоклассы :is, :where, :has, :not, нативный nesting и logical properties делают селекторы выразительнее, не ломая предсказуемость каскада.

8 вопросов

Flexbox и Grid: современные механизмы раскладки

Flexbox и Grid — два основных механизма раскладки в современном CSS. Flexbox работает вдоль одной оси, Grid — по двум. Разбираем алгоритмы распределения пространства, выравнивание и ключевые различия подходов.

7 вопросов

Positioning, stacking context и formatting contexts

Позиционирование, stacking context и formatting contexts объясняют, как браузер размещает элементы и рисует их слоями. Containing block, BFC, margin collapse и порядок отрисовки — фундамент предсказуемой вёрстки.

7 вопросов

Углубись в детали

Media queries, container queries, viewport units и `prefers-*`

Адаптивность изначально строилась вокруг viewport: ширина экрана определяла, как выглядит интерфейс. Но в компонентной эре этого недостаточно: один и тот же компонент может жить и в узком сайдбаре,...

6 вопросов

Семантический HTML, landmarks и доступность

Семантика — это не про то, чтобы заменить `div` на `section` ради красивого слова. Это про контракт между разметкой и вспомогательными технологиями: скринридерами, поисковиками, клавиатурной навига...

6 вопросов

Формы и валидация: Constraint Validation API

Формы — это контракт между пользователем, DOM и сервером: какие данные собирать, как их проверять и как сообщать об ошибках. Разбираем встроенную валидацию HTML, Constraint Validation API, псевдоклассы валидации и событие formdata.

6 вопросов

Парсинг HTML, критический путь рендеринга и производительность CSS

Как браузер превращает байты в пиксели: парсинг HTML, DOM/CSSOM, Render Tree, Layout, Paint, Composite. И как писать анимации через transform/opacity, чтобы не тормозить страницу: will-change, contain, content-visibility, prefers-reduced-motion.

8 вопросов

Способы применения CSS, токены и архитектура стилей

На современном фронтенде стили можно писать десятком способов — от архаичного `style={}` до zero-runtime компиляции. Плюс системы токенов, методологии именования и CSS custom properties для темизации. Разбираем trade-offs каждого подхода.

8 вопросов

Дизайн-токены, темизация и Figma

Дизайн-токены: уровни primitive/semantic/component, Style Dictionary pipeline, Figma как source of truth, Figma MCP и Code Connect, runtime theming через CSS custom properties, multi-brand и компонентные токены в UI-китах.

7 вопросов