❓ Співбесіда з Front-еnd розробником: відповіді на загальні запитання для джунів
Підготували для вас відповіді на запитання, які допоможуть вам на технічних інтерв’ю на позицію Front-еnd:
🔹Що таке HTML, CSS та JavaScript? Яка їхня роль у Front-end розробці?
HTML (HyperText Markup Language) – це мова розмітки, яка створює структуру веб-сторінки, визначаючи, що і де буде розташовано (текст, зображення, таблиці тощо).
CSS (Cascading Style Sheets) – мова стилів, яка визначає, як виглядає ця структура: кольори, шрифти, розміри, відступи тощо.
JavaScript – це мова програмування, яка додає інтерактивність до веб-сторінок (наприклад, анімації, динамічні елементи, перевірка форм).
У Front-end розробці HTML забезпечує "скелет", CSS – "зовнішній вигляд", а JavaScript – "поведінку".
🔹Що таке DOM, і як ви з ним працюєте?
DOM (Document Object Model) – це структуроване представлення HTML-документа у вигляді об’єкта. Воно дозволяє JavaScript взаємодіяти з елементами веб-сторінки.
Робота з DOM включає:
🔵Пошук елементів (document.getElementById, document.querySelector).
🔵Зміну їх властивостей (текст, стиль).
🔵Додавання або видалення елементів (appendChild, removeChild).
🔵Реакцію на події (наприклад, element.addEventListener("click", ...)).
🔹Чим відрізняються id і class у HTML?
id – це унікальний ідентифікатор елемента. На сторінці може бути тільки один елемент з певним id. Використовується для специфічної стилізації або доступу через JavaScript.
class – це загальний ідентифікатор для групи елементів, які мають спільні властивості. Один елемент може мати кілька класів, і класи можна використовувати повторно.
🔹Що таке семантичний HTML? Наведіть приклади семантичних тегів.
Семантичний HTML використовує теги, які мають зрозуміле значення як для людей, так і для пошукових систем. Це покращує доступність і SEO.
Приклади семантичних тегів:
– для верхньої частини сторінки.
– для нижньої частини сторінки.
– для самостійного контенту.
– для розділу сторінки.
– для навігації.
– для основного контенту сторінки.
🔹Яка різниця між relative, absolute, fixed та sticky позиціонуванням у CSS?
elative – елемент залишається у своєму початковому місці, але його можна зсунути відносно цього положення.
absolute – елемент позиціонується відносно найближчого батьківського елемента з position: relative, absolute або fixed. Якщо такого немає, він позиціонується відносно всієї сторінки.
fixed – елемент прив’язаний до конкретної позиції у вікні браузера та залишається на місці навіть при прокручуванні сторінки.
sticky – елемент поєднує властивості relative та fixed: він залишається відносним до певного моменту, після чого фіксується у заданій позиції під час прокручування.
Ставте — 🔥, якщо робити другу частину!
👉🏼 Джун в ІТ
Підготували для вас відповіді на запитання, які допоможуть вам на технічних інтерв’ю на позицію Front-еnd:
🔹Що таке HTML, CSS та JavaScript? Яка їхня роль у Front-end розробці?
HTML (HyperText Markup Language) – це мова розмітки, яка створює структуру веб-сторінки, визначаючи, що і де буде розташовано (текст, зображення, таблиці тощо).
CSS (Cascading Style Sheets) – мова стилів, яка визначає, як виглядає ця структура: кольори, шрифти, розміри, відступи тощо.
JavaScript – це мова програмування, яка додає інтерактивність до веб-сторінок (наприклад, анімації, динамічні елементи, перевірка форм).
У Front-end розробці HTML забезпечує "скелет", CSS – "зовнішній вигляд", а JavaScript – "поведінку".
🔹Що таке DOM, і як ви з ним працюєте?
DOM (Document Object Model) – це структуроване представлення HTML-документа у вигляді об’єкта. Воно дозволяє JavaScript взаємодіяти з елементами веб-сторінки.
Робота з DOM включає:
🔵Пошук елементів (document.getElementById, document.querySelector).
🔵Зміну їх властивостей (текст, стиль).
🔵Додавання або видалення елементів (appendChild, removeChild).
🔵Реакцію на події (наприклад, element.addEventListener("click", ...)).
🔹Чим відрізняються id і class у HTML?
id – це унікальний ідентифікатор елемента. На сторінці може бути тільки один елемент з певним id. Використовується для специфічної стилізації або доступу через JavaScript.
class – це загальний ідентифікатор для групи елементів, які мають спільні властивості. Один елемент може мати кілька класів, і класи можна використовувати повторно.
🔹Що таке семантичний HTML? Наведіть приклади семантичних тегів.
Семантичний HTML використовує теги, які мають зрозуміле значення як для людей, так і для пошукових систем. Це покращує доступність і SEO.
Приклади семантичних тегів:
– для верхньої частини сторінки.
– для нижньої частини сторінки.
– для самостійного контенту.
– для розділу сторінки.
– для навігації.
– для основного контенту сторінки.
🔹Яка різниця між relative, absolute, fixed та sticky позиціонуванням у CSS?
elative – елемент залишається у своєму початковому місці, але його можна зсунути відносно цього положення.
absolute – елемент позиціонується відносно найближчого батьківського елемента з position: relative, absolute або fixed. Якщо такого немає, він позиціонується відносно всієї сторінки.
fixed – елемент прив’язаний до конкретної позиції у вікні браузера та залишається на місці навіть при прокручуванні сторінки.
sticky – елемент поєднує властивості relative та fixed: він залишається відносним до певного моменту, після чого фіксується у заданій позиції під час прокручування.
Ставте — 🔥, якщо робити другу частину!
👉🏼 Джун в ІТ