Підготовка до співбесіди з HTML & CSS
Зібрали найчастіші питання для співбесіди з HTML і CSS, які реально ставлять junior та middle frontend-розробникам та верстальникам в українських IT-компаніях. Кожне питання має розгорнуту відповідь з прикладом коду: блокова модель і box-sizing, різниця між flexbox і grid, специфічність селекторів, position, псевдокласи, семантична верстка та адаптивність. Готуйтесь системно: проходьте питання по черзі, перевіряйте себе followup-запитаннями і закривайте прогалини перед технічним інтерв'ю.
Часті запитання
Які питання з HTML і CSS найчастіше ставлять на співбесіді junior?
Найчастіше питають про блокову модель і box-sizing, різницю між flexbox і grid, специфічність CSS-селекторів, типи position (relative, absolute, fixed, sticky), різницю між display: none і visibility: hidden, а також про семантичну верстку HTML5 і адаптивність через медіа-запити.
Скільки питань треба знати, щоб пройти співбесіду з верстки?
Для рівня junior достатньо впевнено відповідати на 40-50 базових питань з HTML і CSS. Важливіша не кількість, а глибина: вміння пояснити чому, навести приклад коду і відповісти на followup. У цій категорії зібрано 47 питань, які покривають типову технічну співбесіду верстальника.
Чим відрізняється flexbox від grid і коли що використовувати?
Flexbox: одновимірна система (рядок АБО колонка), зручна для компонентів і вирівнювання елементів. Grid: двовимірна (рядки І колонки одночасно), підходить для складних макетів сторінки. На практиці їх часто комбінують: grid для загальної сітки, flexbox всередині блоків.
Що таке специфічність у CSS і як вона рахується?
Специфічність визначає, яке правило застосує браузер при конфлікті стилів. Спрощено: inline-стиль = 1000, id = 100, клас/псевдоклас/атрибут = 10, тег/псевдоелемент = 1. Вища сума виграє. !important перебиває все, але його варто уникати.
Як підготуватися до технічної співбесіди з HTML і CSS?
Проходьте питання тематичними блоками: спершу основи (box model, селектори, специфічність), потім layout (flexbox, grid, position), далі семантику і доступність, наприкінці адаптивність та оптимізацію. Промовляйте відповіді вголос і обов'язково розбирайте followup-запитання.