← Усі теми

Питання на співбесіді з верстки (Junior) з відповідями

75 запитань для співбесіди з теми Верстка (Junior) - з правильними відповідями, поясненнями й посиланнями на документацію.

Пройти цей тест
  1. 1.Навіщо на початку HTML-документа пишуть <!DOCTYPE html>?
  2. 2.Який набір складається лише із семантичних тегів HTML5?
  3. 3.Скільки видимих елементів <main> може бути на сторінці і для чого він потрібен?
  4. 4.Чим <div> відрізняється від <span> за замовчуванням?
  5. 5.Ви задали width: 200px; height: 50px елементу <span> без інших стилів. Що станеться?
  6. 6.Чим display: inline-block відрізняється від inline?
  7. 7.Як отримати в JavaScript значення атрибута data-user-id="42"?
  8. 8.Яка головна відмінність між атрибутами id і class?
  9. 9.Навіщо посиланню з target="_blank" додають rel="noopener noreferrer"?
  10. 10.Який type за замовчуванням має <button> усередині <form>?
  11. 11.Навіщо пов'язувати <label> та <input> через for і id?
  12. 12.Який alt правильно вказати в суто декоративного зображення (наприклад, візерунок-роздільник)?
  13. 13.Що робить box-sizing: border-box?
  14. 14.Чим padding відрізняється від margin?
  15. 15.Два блоки стоять один під одним. У верхнього margin-bottom: 20px, у нижнього margin-top: 30px. Яка відстань буде між ними?
  16. 16.Який селектор переможе, якщо обидва задають color одному посиланню: #nav a чи .menu .item a.link?
  17. 17.Яка з цих властивостей успадковується дочірніми елементами за замовчуванням?
  18. 18.Чим display: none відрізняється від visibility: hidden?
  19. 19.Як поводиться елемент із position: relative; top: 10px?
  20. 20.Відносно чого позиціонується елемент із position: absolute?
  21. 21.Як працює position: sticky; top: 0?
  22. 22.Для яких елементів працює z-index?
  23. 23.Чим rem відрізняється від em?
  24. 24.Чому дорівнює 50vw?
  25. 25.Як зазвичай пишуть медіазапити за підходу mobile-first?
  26. 26.Навіщо потрібен <meta name="viewport" content="width=device-width, initial-scale=1">?
  27. 27.Уздовж якої осі вирівнює елементи justify-content у flex-контейнері?
  28. 28.Контейнер: display: flex; flex-direction: column; justify-content: center. Як будуть вирівняні дочірні елементи?
  29. 29.Що робить flex-wrap: wrap?
  30. 30.Як найпростіше задати однакову відстань між flex-елементами, не додаючи відступ після останнього?
  31. 31.Який спосіб коректно центрує блок по горизонталі й вертикалі всередині батька?
  32. 32.Що задає grid-template-columns: repeat(3, 1fr)?
  33. 33.Як розтягнути grid-елемент на всю ширину сітки, незалежно від кількості колонок?
  34. 34.Чим псевдоклас відрізняється від псевдоелемента?
  35. 35.Як без JavaScript зробити червоним останній пункт списку будь-якої довжини?
  36. 36.Чому не відображається ::before, у якого задано лише width, height і background?
  37. 37.Як правильно оголосити й використати CSS-змінну?
  38. 38.Що означають дві останні цифри в кольорі #3366ff80?
  39. 39.Коли зображення краще вставити через <img>, а не через background-image?
  40. 40.Навіщо потрібні різні рівні заголовків <h1>–<h6>, якщо розмір можна задати стилями?
  41. 41.Коли треба використовувати <a>, а коли <button>?
  42. 42.Для чого потрібен список <dl>?
  43. 43.Форму надіслано методом GET. Куди потраплять дані полів?
  44. 44.Що дає поле <input type="email"> порівняно з type="text"?
  45. 45.Що робить атрибут required у поля форми?
  46. 46.У чому суть підходу utility-first у Tailwind CSS?
  47. 47.Що означає клас md:flex у Tailwind?
  48. 48.Чому дорівнює клас p-4 у Tailwind за налаштувань за замовчуванням?
  49. 49.Як у Tailwind змінити фон кнопки під час наведення?
  50. 50.Як за замовчуванням працює варіант dark: у Tailwind v4?
  51. 51.Коли використовувати <article>, а не <section>?
  52. 52.Чим <strong> відрізняється від <b>?
  53. 53.Що станеться, якщо помістити <div> усередину <p> в HTML?
  54. 54.Коли <table> - правильний вибір?
  55. 55.Що надсилається на сервер для непозначеного чекбокса?
  56. 56.Чому placeholder не замінює <label>?
  57. 57.Як правильно розмітити групу пов'язаних радіокнопок?
  58. 58.Для чого потрібні <figure> і <figcaption>?
  59. 59.Чим overflow: auto відрізняється від overflow: scroll?
  60. 60.Чому text-align: center не центрує <div> фіксованої ширини всередині батька?
  61. 61.Чому безрозмірний line-height: 1.5 зазвичай кращий за line-height: 24px?
  62. 62.Чим opacity: 0.5 у картки відрізняється від background: rgb(0 0 0 / 0.5)?
  63. 63.Як застосовувати hover-стилі лише на пристроях, які справді вміють наводити курсор?
  64. 64.Чим відрізняються .menu a і .menu > a?
  65. 65.Який елемент вибирає h2 + p?
  66. 66.Що вибирає input[type="email"]?
  67. 67.Чому img { max-width: 100%; height: auto; } - часте базове правило?
  68. 68.Що задає margin: 10px 20px?
  69. 69.Як зробити квадратну аватарку круглою?
  70. 70.Навіщо закінчувати список font-family загальним сімейством на кшталт sans-serif?
  71. 71.У чому ризик для доступності під час перестановки flex-елементів через order?
  72. 72.Чому flex-елементи в рядку за замовчуванням однакової висоти?
  73. 73.Що перемагає: правило в таблиці стилів чи інлайн-атрибут style?
  74. 74.Що робить class="hidden md:block" у Tailwind?
  75. 75.Навіщо задавати атрибут lang у <html>?