info

Питання для підготовки до Tech-Check

HTML (20 питань)

Базові питання

  1. Що таке HTML і для чого він використовується?
  2. Яка різниця між тегами <div> та <span>?
  3. Назвіть 5 семантичних тегів HTML5 та поясніть їх призначення.
  4. Що таке атрибути в HTML? Наведіть приклади.
  5. Яка різниця між id та class атрибутами?

Форми та елементи

  1. Які типи input ви знаєте? Назвіть хоча б 7.
  2. Яка різниця між GET та POST методами форми?
  3. Що робить атрибут required у формах?
  4. Як створити випадаючий список (dropdown) в HTML?
  5. Поясніть різницю між <button> та <input type="button">.

Box Model та структура

  1. Що включає в себе CSS Box Model? Перерахуйте всі частини.
  2. Яка різниця між margin та padding?
  3. Що таке DOCTYPE і навіщо він потрібен?
  4. Поясніть структуру базового HTML документа.
  5. Що таке BEM методологія? Наведіть приклад класу за BEM.

Складніші питання

  1. Як правильно підключити зовнішній CSS файл до HTML?
  2. Яка різниця між <section>, <article> та <div>? Коли використовувати кожен?
  3. Що таке accessibility (доступність) в HTML? Назвіть 3 способи покращити доступність.
  4. Поясніть різницю між inline, block та inline-block елементами.
  5. Як створити таблицю в HTML? Які основні теги використовуються?

CSS (25 питань)

Селектори та специфічність

  1. Що таке CSS селектори? Назвіть 5 різних типів селекторів.
  2. Як працює специфічність (specificity) в CSS? Який селектор має найвищу специфічність?
  3. Яка різниця між #id та .class селекторами?
  4. Що робить селектор > (дочірній селектор)?
  5. Поясніть різницю між :hover та :focus псевдокласами.

Кольори та шрифти

  1. Які способи задання кольорів в CSS ви знаєте?
  2. Що таке font-family і як правильно задавати fallback шрифти?
  3. Яка різниця між font-size, font-weight та font-style?
  4. Що робить властивість line-height?
  5. Як зробити текст напівпрозорим?

Позиціонування

  1. Поясніть різницю між static, relative, absolute та fixed позиціонуванням.
  2. Що таке z-index і як він працює?
  3. Як центрувати елемент горизонтально та вертикально?
  4. Що робить float властивість і чому вона менше використовується зараз?
  5. Як працює clear властивість?

Flexbox

  1. Що таке Flexbox і для чого він використовується?
  2. Яка різниця між justify-content та align-items?
  3. Що робить flex-direction: column?
  4. Поясніть властивості flex-grow, flex-shrink та flex-basis.
  5. Як зробити елементи однакової висоти за допомогою Flexbox?

Grid та адаптивність

  1. Що таке CSS Grid і чим він відрізняється від Flexbox?
  2. Як створити простий grid з 3 колонками?
  3. Що таке Media Queries і як вони працюють?
  4. Напишіть media query для мобільних пристроїв (до 768px).
  5. Що таке mobile-first підхід в адаптивному дизайні?

SCSS (15 питань)

Основи SCSS

  1. Що таке SCSS і чим він відрізняється від звичайного CSS?
  2. Як оголосити змінну в SCSS? Наведіть приклад.
  3. Що таке nesting (вкладеність) в SCSS? Покажіть приклад.
  4. Як використовувати батьківський селектор & в SCSS?
  5. Що таке mixins в SCSS і навіщо вони потрібні?

Функції та можливості

  1. Як створити та використати mixin в SCSS?
  2. Що таке @import в SCSS і як він працює?
  3. Яка різниця між @import та @use в сучасному SCSS?
  4. Як створити цикл (loop) в SCSS?
  5. Що таке функції в SCSS? Наведіть приклад простої функції.

Практичні питання

  1. Як організувати структуру SCSS файлів у великому проекті?
  2. Що таке partials в SCSS і як їх використовувати?
  3. Як компілювати SCSS в CSS?
  4. Поясніть переваги використання SCSS над звичайним CSS.
  5. Як створити адаптивний mixin для різних розмірів екранів?

Додаткові питання (15 питань)

Продвинуті CSS концепції

  1. Що таке CSS Custom Properties (CSS змінні) і як вони відрізняються від SCSS змінних?
  2. Поясніть різницю між em, rem, vh, vw та % одиницями вимірювання.
  3. Що таке CSS Transitions і CSS Animations? Яка між ними різниця?
  4. Як працює calc() функція в CSS? Наведіть практичний приклад.
  5. Що таке CSS псевдоелементи ::before та ::after? Коли їх використовувати?

Оптимізація та продуктивність

  1. Поясніть концепцію “mobile-first” vs “desktop-first” в CSS.
  2. Що таке CSS Grid Areas і як їх використовувати?
  3. Поясніть різницю між display: none, visibility: hidden та opacity: 0.
  4. Як працює object-fit властивість для зображень?