HTML/CSS: вопросы на собеседовании

Вопросы и ответы по HTML/CSS: подготовка, примеры и типичные ошибки.

1. Что такое блочная модель CSS (box model) и как box-sizing: border-box её меняет?
   Junior· спрашивают почти всегда· полный разбор — Jobs/Boost
2. Что такое специфичность CSS (specificity) и как она вычисляется?
   Senior· спрашивают почти всегда· полный разбор — Jobs/Boost
3. Что такое Flexbox и чем он отличается от Grid? Когда использовать каждый?
   Middle· спрашивают почти всегда
4. В каких типах frontend-проектов HTML/CSS даёт реальный выигрыш, а где будет избыточен или неудачен?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
5. В чём разница между <script> с атрибутами defer и async?
   Middle· спрашивают почти всегда· полный разбор — Jobs/Boost
6. Что такое семантический HTML и почему он важен? Приведите примеры семантических элементов.
   Junior· спрашивают почти всегда· полный разбор — Jobs/Boost
7. Что такое ARIA-атрибуты и почему они важны для доступности (accessibility)?
   Middle
8. В чём разница между блочными (block-level) и строчными (inline) элементами в HTML?
   Junior· полный разбор — Jobs/Boost
9. Что такое critical CSS и почему это важно для производительности?
   Senior· полный разбор — Jobs/Boost
10. Что такое каскад CSS и как работает наследование?
    Middle
11. Что такое CSS custom properties (переменные) и как их использовать?
    Middle· полный разбор — Jobs/Boost
12. Как работает CSS Grid? Объясните grid-template-columns, grid-template-rows и grid-area.
    Middle· полный разбор — Jobs/Boost
13. В чём разница между position: relative, absolute, fixed, sticky и static?
    Middle
14. Каковы наиболее распространённые методы веб-производительности, связанные с CSS (ленивая загрузка изображений, font-display и т.д.)?
    Senior· полный разбор — Jobs/Boost
15. Как сравнить HTML/CSS с ближайшими альтернативами по DX, performance, SEO, accessibility, hiring и поддержке команды?
    Middle
16. Как понять, что проблема в проекте связана с HTML/CSS, а не с API, сетью, дизайном состояния или плохой архитектурой?
    Senior· полный разбор — Jobs/Boost
17. Представьте, приложение на HTML/CSS стало медленно открываться или часто перерисовываться. Как вы будете искать причину?
    Senior· полный разбор — Jobs/Boost
18. Какие архитектурные решения HTML/CSS навязывает вокруг rendering, state, routing, styling, data loading или deployment?
    Middle· полный разбор — Jobs/Boost
19. Какие production-риски есть у HTML/CSS: hydration, bundle size, caching, accessibility, browser compatibility или observability?
    Senior· полный разбор — Jobs/Boost
20. Проект на HTML/CSS вырос из небольшого интерфейса в большой продукт. Какие архитектурные проблемы вы ожидаете увидеть?
    Senior
21. В чём разница между HTML и HTML5? Какие новые элементы ввёл HTML5?
    Junior
22. В чём разница между атрибутами id и class в HTML?
    Junior· полный разбор — Jobs/Boost
23. Что такое media query и как реализовать адаптивный дизайн?
    Middle· полный разбор — Jobs/Boost
24. Что такое mobile-first дизайн и как он влияет на написание media queries?
    Middle
25. Что такое CSS z-index и как работает контекст наложения (stacking context)?
    Middle
26. Что такое CSS container queries и чем они отличаются от media queries?
    Middle
27. Что такое CSS transitions vs animations? В чём разница?
    Middle· полный разбор — Jobs/Boost
28. В чём разница между единицами em, rem, px, vw и vh в CSS?
    Middle
29. Что такое data-атрибуты (data-*) в HTML5 и как получить к ним доступ через JavaScript?
    Middle· полный разбор — Jobs/Boost
30. В чём разница между display: none, visibility: hidden и opacity: 0?
    Middle
31. В чём разница между <div> и <span>?
    Junior· полный разбор — Jobs/Boost
32. Что такое cascade layers (@layer) и как они помогают управлять CSS в больших проектах?
    Middle
33. Расскажите о случае, когда вы улучшали performance, accessibility, testing или maintainability в проекте на HTML/CSS.
    Middle· полный разбор — Jobs/Boost
34. Как правильно проектировать focus states и keyboard navigation для сложного интерфейса?
    Middle· полный разбор — Jobs/Boost
35. В чём разница между margin: auto и margin: 0 auto для центрирования?
    Middle
36. Что такое мета-теги (meta tags) и какие из них наиболее важны для SEO и адаптивности?
    Junior· полный разбор — Jobs/Boost
37. Что такое соглашение об именовании BEM (Block Element Modifier) и зачем оно используется?
    Middle· полный разбор — Jobs/Boost
38. В чём разница между flex-direction: row и flex-direction: column?
    Junior· полный разбор — Jobs/Boost
39. В чём разница между <link> и <import> для подключения стилей?
    Middle· полный разбор — Jobs/Boost
40. Что такое CSS псевдоклассы (pseudo-classes) и псевдоэлементы (pseudo-elements)? Приведите примеры.
    Middle· полный разбор — Jobs/Boost