Вопросы на собеседовании фронтендера: HTML/CSS
Семантика, блочная модель, Flexbox и Grid, специфичность, адаптивность и доступность. Часть вопросов проверяет не знание, а аккуратность формулировок: «работает» и «правильно» — разные ответы.
Уровень — минимальный, с которого вопрос уместен: junior — базовая тема, middle — нужен опыт промышленной разработки, senior — архитектура и компромиссы.
Вопросов в теме: 44. Эталонные ответы и разбор твоего ответа — внутри тренажёра.
Как отвечать на вопросы темы «HTML/CSS»
Здесь ловят на размытых формулировках. Называй конкретные свойства и правила вместо «оно так работает». Если речь о поведении браузера, уточняй этап: вычисление стилей, компоновка или отрисовка. И держи в голове доступность — про неё спрашивают даже там, где не ждёшь.
Это схема ответа, а не готовый ответ: формулировка вопроса ничего не стоит, если не можешь объяснить её вслух за две минуты.
Список вопросов темы «HTML/CSS»
- В чём отличие display: none от visibility: hidden?junior и вышетеория
Что проверяет: Понимание влияния display: none и visibility: hidden на поток документа
Из записи реального собеседования: Frontend c оффером на 400к (13.04.2026)
- В чём отличие margin от transform: translate при смещении элемента?junior и вышетеория
Что проверяет: Понимание влияния margin и transform на поток документа и соседние элементы
Из записи реального собеседования: Frontend c оффером на 400к (13.04.2026)
- В чём разница между CSS-модулями и обычным CSS?junior и вышетеория
Что проверяет: Понимание изоляции стилей и локальной области видимости классов
Из записи реального собеседования: Frontend на 390к (13.02.2026)
- Для чего обычно используют data-атрибуты?junior и вышетеория
Что проверяет: Назначение data-атрибутов и их применение на практике
Из записи реального собеседования: Frontend c оффером на 400к (13.04.2026)
- Если внутри внешнего div разместить три внутренних div, как они расположатся — в строку, в столбик или иначе?junior и вышетеория
Что проверяет: Понимание поведения блочных элементов по умолчанию
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Как будет выглядеть HTML-разметка с двумя вложенными div, у внутреннего заданы ширина, высота и border? Опиши словами, что увидим на экране.junior и вышетеория
Что проверяет: Понимание поведения блочных элементов и расчёта размеров с рамками
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Как правильно организовать стили: почему стоит использовать CSS-модули и классы вместо инлайн-стилей?junior и вышетеория
Что проверяет: Понимание изоляции стилей и масштабируемости подходов
Из записи реального собеседования: Топ-10 вопросов на Senior Frontend (React) (03.11.2023)
- Как работает наследование CSS-свойств и для каких свойств оно применяется?junior и вышетеория
Что проверяет: Понимание наследования CSS-свойств и примеров наследуемых/ненаследуемых свойств
Из записи реального собеседования: Frontend React на 280к (27.08.2024)
- Как реализовать аккордеон без JavaScript, только на HTML и CSS?junior и вышетеория
Что проверяет: Знание нативных HTML-механизмов раскрытия контента
Из записи реального собеседования: Frontend на 390к (13.02.2026)
- Как сдвинуть элемент вправо на 100 пикселей? Какие способы существуют?junior и вышетеория
Что проверяет: Знание способов позиционирования и смещения элементов
Из записи реального собеседования: Frontend c оффером 350к (13.02.2026)
- Как сделать смещение элемента плавным, например по ховеру, с линейной анимацией 300 мс?junior и вышетеория
Что проверяет: Умение применять transition для анимации
Из записи реального собеседования: Frontend c оффером 350к (13.02.2026)
- Как сделать так, чтобы три внутренних div встали в строку? Какие свойства для этого нужны?junior и вышетеория
Что проверяет: Знание способов выстроить блочные элементы в строку
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Какие ключевые псевдоклассы CSS ты знаешь?junior и вышетеория
Что проверяет: Знание основных псевдоклассов CSS
Из записи реального собеседования: Топ-10 вопросов на Senior Frontend (React) (03.11.2023); Frontend c оффером на 400к (13.04.2026)
- Каковы различия между inline, inline-block и block элементами?junior и вышетеория
Что проверяет: Понимание поведения элементов в потоке и поддержки размеров и отступов
Из записи реального собеседования: Frontend на 250к (11.04.2026)
- Можно ли в теге source использовать медиазапросы, чтобы для мобильного браузера грузить картинки с оптимизированным под мобилу разрешением?junior и вышетеория
Что проверяет: Знание атрибута media у source для адаптивных изображений
Из записи реального собеседования: Frontend с оффером на 270к (25.04.2026)
- Можно ли заставить наследоваться свойство, которое по умолчанию не наследуется?junior и вышетеория
Что проверяет: Знание значения inherit и универсального селектора для принудительного наследования
Из записи реального собеседования: Frontend React на 280к (27.08.2024)
- Почему в списке элементов не стоит использовать h1 и какие заголовки уместны?junior и вышетеория
Что проверяет: Знание иерархии заголовков и семантики
Из записи реального собеседования: Топ-10 вопросов на Senior Frontend (React) (03.11.2023)
- Расскажи про Flexbox и Grid: в чём разница и что используешь в работе?junior и вышетеория
Что проверяет: Понимание различий между Flexbox и Grid и критериев выбора
Из записи реального собеседования: Frontend с оффером на 270к (25.04.2026)
- Уместно ли использовать onClick на div или есть другие варианты?junior и вышетеория
Что проверяет: Понимание семантики и доступности интерактивных элементов
Из записи реального собеседования: Frontend на 390к (13.02.2026)
- Чем в контексте HTML отличается семантика от доступности?junior и вышетеория
Что проверяет: Понимание разницы между семантикой тегов и доступностью и связи между ними
Из записи реального собеседования: мок-собеседование на Senior Frontend от менторов сообщества (07.03.2025)
- Чем отличается блочный и блочно-строчный элемент от строчного?junior и вышетеория
Что проверяет: Понимание поведения display: block, inline и inline-block
Из записи реального собеседования: Frontend с оффером на 270к (25.04.2026)
- Что будет, если сделать список на div вместо ol/ul?junior и вышетеория
Что проверяет: Понимание последствий отказа от семантики для SEO и доступности
Из записи реального собеседования: Топ-10 вопросов на Senior Frontend (React) (03.11.2023)
- Что такое хлебные крошки и какими тегами их правильно размечать?junior и вышетеория
Что проверяет: Знание семантической разметки навигационной цепочки
Из записи реального собеседования: Frontend на 390к (13.02.2026)
- Что такое цветовые токены?junior и вышетеория
Что проверяет: Понимание связи дизайн-системы и CSS-переменных
Из записи реального собеседования: Топ-10 вопросов на Senior Frontend (React) (03.11.2023)
- Что такое Box Model в CSS и как она работает в браузере?junior и вышетеория
Что проверяет: Понимание блочной модели CSS
Из записи реального собеседования: Frontend разработчика оффер на 250k (03.11.2024)
- Что такое CSS-ресет, зачем он нужен и какие варианты существуют?junior и вышетеория
Что проверяет: Понимание дефолтных стилей браузера и способов их сброса
Из записи реального собеседования: Топ-10 вопросов на Senior Frontend (React) (03.11.2023)
- Зачем нужны семантические теги — header, nav, main, button — вместо div?junior и вышетеория
Что проверяет: понимание доступности и того, что разметка — это интерфейс, а не только структура.
- Как считается специфичность селекторов и почему !important — плохая идея?junior и вышетеория
Что проверяет: понимание каскада — из-за него чаще всего «стили не применяются».
- Flexbox или Grid — что и когда выбираешь?junior и вышетеория
Что проверяет: владение современной раскладкой и умение выбирать инструмент.
- Что нужно сделать, чтобы страница была доступной? Базовый чек-лист.junior и вышетеория
Что проверяет: практическую зрелость: доступность как норма, а не как отдельная задача.
- В карточке текст выходит за границы, а кнопки должны быть зафиксированы внизу. Как сделать скролл только внутри карточки и зафиксировать кнопки?middle и вышетеория
Что проверяет: Умение управлять переполнением и позиционированием внутри контейнера
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Дизайнер принёс макет карточки товара. Что в нём кажется странным и что бы ты спросил у дизайнера?middle и вышетеория
Что проверяет: Умение критически оценивать макет и предлагать правки
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Если сравнить Tailwind и CSS как две технологии, в чём Tailwind выигрывает, а в чём проигрывает?middle и вышетеория
Что проверяет: Понимание trade-off'ов утилитарного и классического CSS
Из записи реального собеседования: Frontend с оффером на 5000$ (06.04.2026)
- Как будешь писать стили на новом проекте?middle и вышетеория
Что проверяет: Понимание компромиссов между разными подходами к стилизации
Из записи реального собеседования: Frontend с оффером на 300к (23.03.2026)
- Как лучше расположить элементы управления в модалке — сверху или снизу, и почему?middle и вышетеория
Что проверяет: Понимание юзабилити на мобильных устройствах
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Как сделать так, чтобы у body не было скролла, а кнопки всегда были прижаты к низу контейнера со статьёй и не перекрывали текст?middle и вышетеория
Что проверяет: Умение прижимать элементы к низу контейнера и избегать перекрытия контента
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Какой вариант контрола непрозрачности лучше — выпадающий select или слайдер, и как дать пользователю выставить точное значение, например 42%?middle и вышетеория
Что проверяет: Понимание юзабилити контролов и способов точного ввода
Из записи реального собеседования: JavaScript на 250к (19.08.2025)
- Класс header title должен быть 16px, а на ширине 768px становиться 14px, но почему-то не становится. В чём причина?middle и вышетеория
Что проверяет: Понимание работы SCSS-плейсхолдеров и @extend
Из записи реального собеседования: Frontend на 250к (30.10.2025)
- Можно ли вместе с transition анимировать margin или left? Что при этом происходит?middle и вышетеория
Что проверяет: Понимание разницы между анимацией layout-свойств и transform
Из записи реального собеседования: Frontend c оффером 350к (13.02.2026)
- На старте нового проекта на React нужно выбрать технологию для стилей: SCSS, Tailwind CSS или styled-components. Что скажешь?middle и вышетеория
Что проверяет: Умение сравнивать подходы к стилизации по критериям, а не выбирать вслепую
Из записи реального собеседования: Frontend с оффером на 5000$ (06.04.2026)
- Почему использование 100vh для анимации может быть проблемой и как это исправить?middle и вышетеория
Что проверяет: Понимание поведения единиц viewport на мобильных и способов их обхода
Из записи реального собеседования: Frontend React на 280к (27.08.2024)
- Что подразумевается под изоляцией CSS и какими способами её достигают?middle и вышетеория
Что проверяет: Знание подходов к инкапсуляции стилей
Из записи реального собеседования: мок-собеседование на Senior Frontend от менторов сообщества (07.03.2025); Frontend c оффером 350к (13.02.2026)
- Для чего нужен accessibility (a11y)?middle и вышетеория
- Что такое Critical CSS и почему он влияет на загрузку?middle и вышетеория
Проверить себя по этим вопросам
Список вопросов — это чек-лист подготовки, но на собеседовании проверяют другое: умеешь ли ты объяснить это вслух за две минуты. Тренажёр задаёт вопрос голосом, записывает ответ и разбирает его по четырём критериям найма. 15 ответов в месяц бесплатно, без карты.