Вводные вопросы к фронтенд-разработчику, чтобы разрядить обстановку
Об HTML — для проверки основ
CSS — еще о базе
Двигаемся к стеку фронтенда — JavaScript
Углубленные знания JavaScript
React и фреймворки
Вопросы из практики
В заключение
Собеседование — всега испытание: знаний, навыков, опыта и компетенций. Чтобы получить желаемую должность, важно быть готовым к любому вопросу от HR-специалиста. Задача же HR-а в этой ситуации, сделать все возможное, чтобы выяснить стек и навыки соискателя еще на этапе первичных интервью. В этой статье мы собрали 70 вопросов для собеседования Frontend-разработчика, разделили их по уровням сложности и назначению.
Изучайте, если что-то непонятно или неясно, ищите более развернутые ответы, чтобы быть готовыми к любым неожиданностям на собеседовании. Если совсем "темный лес", возможно стоит подумать об углублении знаний. Для этого у нас на сайте есть подборки курсов по Фронтенду, после прохождения этих образовательных программ, вопросов не останется.
Нетология
Бруноям
Eduson Academy
Skillbox
Skillfactory
ProductStar
Контур.Школа
Международная Школа Профессий
Вводные вопросы к фронтенд-разработчику, чтобы разрядить обстановку
1. Расскажите о себе и вашем опыте во фронтенде.
→ Обычно отвечают кратко о стеке: HTML, CSS, JavaScript, один-два фреймворка (например, React), опыт проектов (интернет-магазин, админ-панели и т.д.).
2. Почему вы выбрали frontend-разработку?
→ Потому что фронтенд позволяет видеть результат сразу, работать на стыке UX и технологий, влиять на пользовательский опыт.
3. Какой проект в вашей практике был самым сложным и почему?
→ Пример: большой SPA с SSR, оптимизация производительности, работа с WebSocket или сложные интеграции.
4. Какие frontend-инструменты и библиотеки вы используете чаще всего?
→ VS Code, Git, Webpack/Vite, React, ESLint, Prettier, Chrome DevTools, Jest.
5. Как вы организуете рабочее окружение и структуру проекта?
→ Разделение на компоненты и модули, использование линтеров, git-flow, документация в README.
6. Какими принципами вы руководствуетесь при написании кода?
→ Читаемость, переиспользуемость, KISS, DRY, SOLID.
7. Как вы отслеживаете новые технологии и тренды во фронтенде?
→ Чтение Medium, dev.to, Twitter, YouTube-каналы, конференции.
8. Как вы работаете с командой — дизайнерами, backend-разработчиками, QA?
→ Agile/Scrum, code review, задачи в Jira/Trello, синхронизация по API-контрактам.
9. Какие инструменты для контроля версий вы используете?
→ Git, GitHub/GitLab/Bitbucket, работа через feature-ветки и pull requests.
10. Что, по вашему мнению, делает frontend-разработчика хорошим специалистом?
→ Умение писать поддерживаемый код, разбираться в архитектуре, учитывать UX и бизнес-задачи.
Об HTML — для проверки основ
11. Что такое семантическая разметка и зачем она нужна?
→ Семантические теги (header, main, article) описывают структуру, улучшают SEO и доступность.
12. В чём разница между блочными и строчными элементами?
→ Блочные (div, p) занимают всю ширину, строчные (span, a) — только по содержимому.
13. Для чего нужен doctype?
→ Чтобы указать браузеру режим отображения. В HTML5: <!DOCTYPE html>.
14. В чём разница между тегами <section>, <article> и <div>?
→ section — тематический блок, article — самостоятельный контент, div — универсальный контейнер.
15. Как правильно использовать теги <label> и <input> вместе?
→ label связывается через for с id инпута или вложением. Это улучшает UX и доступность.
16. Что такое accessibility (доступность) и какие теги помогают её улучшить?
→ Это доступность для людей с ограничениями. Используются alt, aria-*, правильные семантические теги.
17. Как работает атрибут alt у изображений?
→ Даёт описание картинки для screen-reader, SEO и при ошибке загрузки.
18. Что такое data-атрибуты (data-*) и для чего их используют?
→ Позволяют хранить кастомные данные на DOM-элементе и читать их в JS.
19. В чём разница между <script>, <script async> и <script defer>?
<script>— блокирует парсинг.async— загружается параллельно и выполняется сразу.defer— загружается параллельно, выполняется после загрузки HTML.
20. Какие типы input существуют в HTML5?
→ text, number, email, date, file, checkbox, radio, password, color, range и др.
CSS — еще о базе
21. В чём разница между relative, absolute, fixed и sticky позиционированием?
relative — смещение относительно себя;
absolute — относительно ближайшего предка с position;
fixed — относительно окна;
sticky — как relative, но становится fixed при прокрутке.
22. Что такое flexbox и grid, и в каких случаях применять каждый из них?
→ Flexbox — одномерная раскладка (по строке или колонке). Grid — двумерная (строки + колонки).
23. В чём разница между em, rem, % и px?
px — фиксированные пиксели;
% — от родителя;
em — от шрифта родителя;
rem — от шрифта root (html).
24. Что такое каскадность и специфичность CSS?
→ Каскадность — порядок применения стилей. Специфичность: inline > id > class > tag.
25. В чём разница между inline, inline-block и block?
→ inline — внутри строки, inline-block — как inline, но с размерами, block — занимает всю строку.
26. Как работает z-index?
→ Определяет порядок наложения. Работает только у позиционированных элементов.
27. Что такое CSS-переменные и как их использовать?
→ Определяются как --name: value;, используются через var(--name). Поддерживают переопределение.
28. В чём разница между transition, transform и animation?
transform — изменяет элемент (scale, rotate).
transition — плавное изменение одного свойства.
animation — сложные анимации по keyframes.
29. Что такое медиазапросы и как сделать адаптивную верстку?@media (max-width: 768px) { ... }. Меняют стили в зависимости от ширины экрана.
30. В чём разница между relative units и absolute units?
Относительные (%, em, rem) зависят от окружения. Абсолютные (px, cm) фиксированные.
Двигаемся к стеку фронтенда — JavaScript
31. Объясните отличие var, let и const.
var — функциональная область видимости, hoisting;
let/const — блочная область, нельзя переобъявить;
const — нельзя переназначить ссылку.
32. Что такое область видимости (scope) в JS?
Может быть глобальная, локальная, блочная. Определяет доступность переменных.
33. В чём разница между == и ===?== — сравнивает с приведением типов, === — строгое сравнение.
34. Как работает замыкание (closure)?
Функция «помнит» окружение, даже если вызвана вне него.
35. Что такое hoisting в JavaScript?
Поднятие объявления функций и переменных var вверх области видимости.
36. В чём разница между null и undefined?
null — намеренное отсутствие значения, undefined — значение не присвоено.
37. Как работает this в разных контекстах?
В функции — глобальный объект, в методе — объект, в стрелочных — внешний this.
38. Что такое стрелочные функции и чем они отличаются от обычных?
Короткий синтаксис, не имеют своего this и arguments.
39. Что такое event bubbling и event delegation?
bubbling — событие всплывает вверх;
delegation — обработчик на родителе обрабатывает события дочерних.
40. В чём разница между синхронным и асинхронным кодом?
Синхронный — выполняется последовательно. Асинхронный — задачи откладываются (промисы, колбэки).
Углубленные знания JavaScript
41. Что такое промисы и как они работают?
Это объект для асинхронности: состояния pending → fulfilled/rejected.
42. В чём разница между async/await и промисами?async/await — синтаксический сахар, делает асинхронный код более читаемым.
43. Как работает Event Loop в JavaScript?
JS — однопоточный. Event Loop управляет выполнением задач: stack, microtasks (промисы), macrotasks (setTimeout).
44. Что такое генераторы (function*) и где их применять?
Функции, которые можно «останавливать» и возобновлять. Используются для итераторов и асинхронных задач.
45. В чём разница между shallow copy и deep copy объектов?
Shallow копирует верхний уровень, вложенные объекты остаются по ссылке. Deep делает полную копию.
46. Что такое прототипное наследование?
Объекты наследуют свойства через цепочку прототипов (__proto__).
47. Как работает Object.create()?
Создаёт объект с указанным прототипом.
48. В чём отличие map, forEach, reduce, filter?
map — преобразует;
forEach — перебирает;
reduce — аккумулирует;
filter — фильтрует.
49. Что такое call, apply, bind и чем они отличаются?
Все меняют this.
call — вызов с аргументами через запятую,
apply — с массивом аргументов,
bind — возвращает новую функцию.
50. Что такое WeakMap и WeakSet?
Хранят только объекты, удаляются сборщиком мусора, не препятствуя очистке памяти.
React и фреймворки
51. Что такое Virtual DOM и как он работает?
Это облегчённая копия DOM. React сравнивает Virtual DOM и обновляет только изменённые части.
52. В чём разница между контролируемыми и неконтролируемыми компонентами?
Контролируемые — состояние хранится в React.
Неконтролируемые — состояние в DOM (через
ref).
53. Что такое hooks в React и зачем они нужны?
Позволяют использовать состояние и эффекты в функциональных компонентах (useState, useEffect).
54. Чем useEffect отличается от useLayoutEffect?
useEffect — после рендера;
useLayoutEffect — синхронно до отрисовки.
55. В чём разница между state и props?
props — приходят извне, state — хранится внутри компонента.
56. Зачем нужен key в списках React?
Для уникальной идентификации элементов и оптимизации рендера.
57. Что такое Context API и когда его использовать?
Передача данных без проп-дриллинга (например, тема, язык, авторизация).
58. Как работает React.memo?
Мемоизирует компонент: если пропсы не изменились, не перерисовывается.
59. Что такое серверный рендеринг (SSR) и зачем он нужен?
Рендеринг на сервере — быстрее первая загрузка, лучше SEO.
60. В чём отличие CSR, SSR и SSG?
CSR — рендеринг на клиенте;
SSR — на сервере;
SSG — статическая генерация заранее.
Вопросы из практики
61. Как оптимизировать загрузку сайта (performance best practices)?
Минификация, кэширование, lazy loading, code splitting, CDN, оптимизация картинок.
62. Что такое критический рендеринг (Critical Rendering Path)?
Процесс преобразования HTML/CSS/JS в пиксели: парсинг, layout, paint.
63. Как уменьшить вес JavaScript-бандла?
Tree shaking, динамический импорт, code splitting, удаление ненужных зависимостей.
64. Как работает lazy loading изображений?
Картинки загружаются при попадании во viewport (loading="lazy").
65. Что такое CORS и как его настроить?
Политика браузера для защиты от запросов между доменами. Настраивается заголовком Access-Control-Allow-Origin.
66. Как работает localStorage, sessionStorage и cookies?
localStorage — хранение без срока;
sessionStorage — до закрытия вкладки;
cookies — отправляются на сервер.
67. Что такое Service Workers и PWA?
Service Worker — прокси в браузере: кэш, оффлайн, push. PWA — приложение с оффлайн-режимом и установкой.
68. Как защитить frontend от XSS и CSRF атак?
XSS: экранирование, CSP, не доверять вводу.
CSRF: токены, SameSite cookies.
69. Как протестировать и отладить верстку на разных устройствах?
Chrome DevTools, responsive mode, BrowserStack, реальное тестирование на устройствах.
70. Как бы вы реализовали бесконечный скролл (infinite scroll) на практике?
Использовать Intersection Observer для отслеживания нижнего элемента и подгружать данные по API.
В заключение
Главное в прохождении собеседования — уверенность. Скиллы — это максимально важная штука, но если вы придете и будете мямлить даже правильный ответ, скорее всего вам откажут в трудоустройстве. HR-ы оценивают не только навыки кандидатов. Их задача понять, впишется ли специалист в команду, как он будет взаимодействовать с другими членами коллектива, насколько он способен к росту по карьере и можно ли вырастить из него лида.
Помните, вопросы для фронтенд-разрабочика могут сильно разниться в зависимости от целей работодателя. Одни — направлены на простое понимание способоностей кандидата, как иосполнителья. Другие — направлены на определение управленческих качеств. Третьи — ориентированы на понимание способности работы в сложных условиях.
