Ось готовий урок, створений за твоїм майстер-промптом. Це CS50-вайб: енергійно, зрозуміло і з фокусом на "навіщо".

🎓 УРОК: Одиниці виміру в CSS (px, %, em, rem, vw, vh)

1. 🔥 Вступ: Чому ваш сайт ламається на телефоні?

Уявіть собі ситуацію. Ви купили дорогий, красивий диван. Він ідеально вписався у вашу вітальню. Але потім ви вирішили переїхати в іншу квартиру, де кімната трохи менша. І що стається? Диван просто не пролазить у двері, або займає 90% кімнати, і вам ніде ходити.

Чому це сталося? Тому що диван має фіксований розмір (в метрах і сантиметрах), а кімната — змінилася.

У веб-розробці ми стикаємося з цією проблемою щодня. Ви верстаєте сайт на своєму великому моніторі. Все виглядає чудово. Але потім ваш користувач відкриває цей сайт на iPhone. І все... Текст занадто дрібний, картинка вилізла за екран, кнопка "Купити" взагалі не натискається.

❓ Питання до вас: Як зробити так, щоб наш "диван" (елемент сайту) магічним чином зменшувався, коли зменшується "кімната" (екран браузера)?

Сьогодні ми розберемося, як керувати простором. Ми перестанемо мислити тільки "сантиметрами" (пікселями) і навчимося мислити пропорціями. Це — ключ до адаптивного дизайну.

2. 🧠 Теоретична база: Абсолютне vs Відносне

В CSS всі одиниці виміру діляться на два табори: Солдати (Абсолютні) та Хамелеони (Відносні).

🧱 1. Абсолютні одиниці: `px` (Пікселі)

Це найпростіше. Один піксель — це "цеглинка" на екрані (умовно). * Як це працює: Якщо ви сказали width: 200px, цей блок буде шириною 200 пікселів і на годиннику Apple Watch, і на телевізорі 4K. Йому байдуже на оточення. * Плюс: Точність. Ви знаєте, що отримаєте. * Мінус: Негнучкість. Це той самий диван, який не влазить у двері.

🌊 2. Відносні одиниці: %, em, rem, vw, vh

Це хамелеони. Вони змінюють свій розмір залежно від контексту. Але контекст у кожного свій.

🔹 `%` (Відсотки)

Логіка: "Я буду займати частину від мого батька".
Якщо батьківський блок 500px, а ви кажете width: 50%, дочірній буде 250px.

🔹 `vw` та `vh` (Viewport Width / Height)

Логіка: "Я дивлюся на розмір вікна браузера".
1vw = 1% від ширини вікна.
100vh = 100% висоти вікна (повний екран).
Аналогія: Це як шпалери — скільки є стіни, стільки ми і закриємо.

🔹 `em` vs `rem` (Битва шрифтів)

Це найскладніше для новачків, тому слухайте уважно. Обидва залежать від розміру шрифту (font-size).

em (Relative to Parent):
- Дивиться на розмір шрифту батьківського елемента.
- Проблема: Ефект снігової кулі. Якщо ви вкладете один блок в інший, розміри множаться. Це часто призводить до хаосу.
rem (Relative to Root HTML):
- Дивиться тільки на кореневий розмір шрифту (налаштування браузера, зазвичай 16px).
- Чому це круто: Це стабільність. 2rem завжди буде 32px (2 * 16), де б цей елемент не знаходився.

💡 Запам'ятайте головне: * Для відступів і шрифтів зараз стандарт — rem. * Для сітки та ширини блоків — %, vw, або Flexbox/Grid (про них пізніше). * Для дрібних деталей (рамки, тіні) — px.

3. 🧪 Приклади: Від теорії до практики

Давайте подивимось, як це працює в коді.

Приклад 1: Проблема пікселів

Що буде, якщо ми задамо блоку фіксовану ширину?

.box {
  width: 800px; /* Жорстко! */
  background: red;
}

Результат: На телефоні (ширина екрану ~375px) цей блок створить горизонтальну прокрутку. Користувач буде злитися.

Приклад 2: Магія відсотків

Виправляємо попередній приклад.

.box {
  width: 80%; /* Гнучко! */
  margin: 0 auto; /* Центруємо */
  background: green;
}

Результат: Блок завжди займатиме 80% екрану, чи то телефон, чи то монітор. Жодної прокрутки!

Приклад 3: `rem` для типографіки (Сучасний стандарт)

Уявіть заголовок і текст.

html {
  font-size: 16px; /* Це стандарт браузера, але ми можемо змінити */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

p {
  font-size: 1rem; /* 1 * 16 = 16px */
  padding: 1rem;   /* Відступ теж 16px */
}

Чому це краще, ніж px? Якщо користувач у налаштуваннях браузера змінить "Розмір шрифту" на "Великий" (для людей з поганим зором), базовий розмір стане 20px. Всі ваші rem автоматично збільшаться. Сайт залишиться зручним. З px цього б не сталося.

Приклад 4: Hero-секція (Перший екран)

Ви хочете, щоб ваша заставка займала весь екран одразу при завантаженні?

.hero {
  height: 100vh; /* 100% від висоти вікна */
  background: blue;
  color: white;
}

Результат: Незалежно від того, відкрив користувач сайт на планшеті чи ноутбуці, синій фон закриє весь екран ідеально.

4. 🛠 Практична частина

Час "забруднити руки" кодом. Виконайте ці завдання:

🔹 Виправлення помилки: Створіть div з класом card. Задайте йому width: 600px. Зменште вікно браузера до мінімуму. Побачили скрол? Тепер замініть width на max-width: 600px і додайте width: 100%. Подивіться різницю. Опишіть своїми словами, що змінилося.
🔹 Експеримент з vw: Зробіть заголовок h1. Задайте йому розмір шрифту font-size: 10vw. Почніть змінювати ширину вікна браузера. Що відбувається з текстом? Чи зручно це читати на великому екрані?
🔹 em пастка (Mini-Case): Створіть список <ul> з розміром шрифту 1.5em. Вкладіть у нього ще один <ul> з таким самим розміром, і ще один. Напишіть текст у кожному рівні. Питання: Чому текст на третьому рівні такий гігантський? (Це покаже вам, чому rem зазвичай краще).
🔹 Реальна задача: Створіть кнопку.
- Зробіть відступи (padding) у em (щоб вони залежали від розміру тексту кнопки).
- Зробіть рамку (border) у px (бо рамка має бути тонкою завжди).
- Змініть font-size кнопки. Перевірте, чи гармонійно збільшилися відступи.

5. 💡 Мислення як у розробника

Як думає Senior Developer, коли обирає одиниці виміру? Він не вгадує. Він слідує системі.

❌ Типова помилка новачка:

"Я поставлю тут 18px, а тут margin 25px, бо так красиво виглядає на моєму екрані".

✅ Мислення профі:

"Мені потрібно, щоб відступи були пропорційні тексту, тому я візьму rem. А ширина контейнера має адаптуватися, тому візьму % або max-width. Пікселі залишу тільки для рамок та тіней, які не повинні масштабуватися".

Золоті правила: 1. Шрифт? Тільки rem. Це стандарт доступності (accessibility). 2. Сітка/Layout? Відсотки %, vw/vh або Flexbox/Grid. 3. Дрібні деталі (border, shadow)? px. 4. Медіа-запити (адаптивність)? Використовуйте em або px, але будьте послідовні.

6. 🧩 Підсумок

Отже, що ми сьогодні поклали у ваш інструментарій?

Ви зрозуміли, що пікселі (px) — це надійно, але не гнучко.
Ви дізналися, що відсотки (%) дозволяють елементам "дихати" в межах батька.
Ви тепер знаєте, що rem — це найкращий друг для текстів і відступів, бо він передбачуваний.
Ви побачили силу vh/vw для створення повноекранних блоків.

Тепер ви вмієте: Створювати елементи, які не ламаються при зміні розміру екрану. Ви зробили перший крок до Responsive Web Design.

🚀 Тизер наступного уроку: Добре, ми навчилися задавати розміри блокам. Але як розташувати їх поруч? Як зробити так, щоб три колонки стали однією на телефоні? Наступного разу ми познайомимося з найпотужнішою системою розташування елементів — Flexbox. Це як гра в тетріс, тільки ви завжди виграєте.

До зустрічі на наступному уроці! Happy coding! 👨‍💻👩‍💻