Модуль 39

Реальні кейси верстки

Ось готовий урок, створений за твоїм майстер-промптом у стилі David Malan (CS50).

🎓 Урок: Реальні кейси верстки (Layout Patterns)

Привіт, світе! 👋 Мене звати... (тут ваше ім’я), і це — CS50... тобто, курс із сучасної верстки!

Сьогодні ми не просто вивчатимемо теги чи властивості. Сьогодні ми перестанемо «розкидати» елементи по екрану навмання і почнемо будувати інтерфейси. Ми розглянемо патерни, які використовуються на 99% сайтів: від Google до Netflix.

Готові? Поїхали! 🚀

1. 🔥 Вступ: Проблема та мотивація

Уявіть, що ви переїжджаєте в нову квартиру. У вас є диван, телевізор і шафа. Якщо ви просто кинете їх у кімнату, вони впадуть абияк: диван перекриє двері, а телевізор опиниться екраном до стіни. Це — стандартна поведінка HTML-елементів (Normal Flow). Вони просто стають один під одним.

Але ви хочете, щоб диван стояв навпроти телевізора, а шафа — у кутку. Вам потрібна структура.

Питання до вас: Ви коли-небудь намагалися поставити картинку праворуч від тексту, використовуючи margin-left: 500px, а потім відкривали сайт на телефоні, і все ламалося? 😅

Це класична помилка. Веб — це не друкований журнал, де все зафіксовано. Веб — це «гумова» кімната, яка постійно змінює розмір. Сьогодні ми навчимося розставляти «меблі» (контент) так, щоб вони виглядали ідеально і в маленькій комірчині (смартфон), і у величезному залі (4K монітор).

2. 🧠 Теоретична база (Без нудних лекцій)

Перш ніж писати код, зрозуміймо логіку. У верстці є два "королі", які вирішують більшість задач розташування: Flexbox та Grid.

Як це працює "під капотом"?

Уявіть Батьківський контейнер (Parent) і Дочірні елементи (Children). У CSS магія відбувається не на самих елементах, а на їхньому Батьку. Це він каже дітям, як поводитися.

  1. Flexbox (Одразу в рядок)

    • Аналогія: Намистини на нитці. Ви можете зсунути їх у початок, у кінець або розподілити рівномірно.
    • Суть: Ідеально для одномірних макетів (тільки рядок або тільки стовпчик). Наприклад: меню навігації.

  2. CSS Grid (Сітка)

    • Аналогія: Шахівниця або таблиця Excel. Ви чітко кажете: "Ти займи клітинки з A1 по B2".
    • Суть: Ідеально для двовимірних макетів (і рядки, і стовпці одночасно). Наприклад: галерея товарів.

🔑 Що треба запам'ятати залізно:

  • Контейнер вирішує все. Ви пишете display: flex для батька, щоб вишикувати дітей.
  • Вісь (Axis). У Flexbox головна вісь — це напрямок, куди шикуються елементи.
  • Gap (Відступи). Більше не треба мучитися з margin-right, щоб розділити елементи. Властивість gap робить це автоматично і чисто.

Інтуїтивно: Думайте про верстку як про коробки в коробках. Кожна секція сайту — це велика коробка, всередині якої лежать менші коробки.

3. 🧪 Приклади (Від простого до реального)

Кейс №1: Святий Грааль (Центрування) 🎯

Найпопулярніше питання на StackOverflow: "Як відцентрувати div?".

Питання: Як ви думаєте, скільки рядків коду потрібно, щоб розмістити текст ідеально по центру екрана? 10? 20?

Дивимось:

.container {
  display: flex;         /* Вмикаємо Flexbox */
  justify-content: center; /* Рівняємо по горизонталі */
  align-items: center;     /* Рівняємо по вертикалі */
  height: 100vh;           /* На всю висоту екрана */
}

Чому так? justify-content рухає елементи вздовж "нитки", а align-items рухає саму "нитку" вгору-вниз (або поперек осі). Вуаля!

Кейс №2: Навігаційна панель (Navbar) 🧭

Типовий сайт: Логотип зліва, посилання — справа.

<nav class="navbar">
  <div class="logo">MyBrand</div>
  <ul class="links">
    <li>Головна</li>
    <li>Про нас</li>
    <li>Контакти</li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* Головний секрет! */
  align-items: center;
  padding: 20px;
}

Що тут відбулося? space-between бере все вільне місце і кидає його між елементами. Логотип притискається вліво, посилання — вправо. Жодних float: right або магічних відступів!

Кейс №3: Картки товарів (Responsive Grid) 🛍️

Задача: У нас є список товарів. На комп'ютері — 3 в ряд, на планшеті — 2, на телефоні — 1.

.product-grid {
  display: grid;
  /* Магія CSS Grid: повторюй колонки автоматично,
     мінімум 300px шириною, максимум — розтягуйся на 1 частку (1fr) */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; /* Відступи між картками */
}

Чому це круто? Ми навіть не використовували медіа-запити (@media)! Браузер сам порахує: "Ага, екран вузький, 300px не влазить три рази, значить поставлю по два". Це і є справжня адаптивність.

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

Прийшов час забруднити руки кодом! Відкривайте редактор.

Завдання 1: Navbar своїми руками Створіть хедер (шапку) сайту, де: * Зліва: Назва сайту. * По центру: Пошуковий рядок. * Справа: Кнопка "Увійти". * Підказка: Використовуйте display: flex і пограйтеся з justify-content або margin-left: auto.

Завдання 2: "Герой" (Hero Section) Зробіть блок на весь екран із фоновим зображенням. По центру має бути заголовок "Ласкаво просимо" і кнопка під ним. * Челлендж: Текст має бути білим, читабельним, і розміщеним чітко по центру.

Завдання 3: Виправити баг 🐛 У вас є ряд карток (display: flex), але коли тексту стає забагато, картки стискаються і стають занадто вузькими. * Завдання: Знайдіть властивість flex-wrap і застосуйте її так, щоб картки переносилися на новий рядок.

Завдання 4: Міні-кейс "Картка профілю" Зверстайте картку користувача: * Фото (кругле) зверху. * Ім'я під ним. * Короткий опис. * Внизу — ряд іконок соцмереж (Facebook, Twitter, Instagram). * Питання: Який тип layout (Flex чи Grid) ви оберете для іконок соцмереж? Чому?

Завдання 5: А що, якщо...? Що станеться з вашою сіткою товарів (приклад №3), якщо одне слово в назві товару буде дуже довгим (наприклад, "Супермегагігаекстрахолодильник")? * Перевірте це. Якщо верстка зламалась, спробуйте додати word-wrap: break-word або overflow: hidden.

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

Вивчаючи верстку, новачки часто потрапляють у пастки. Як їх уникнути?

  1. Заборона на фіксовану висоту (height: 500px).

    • Помилка: Ви задали блоку висоту 300 пікселів.
    • Реальність: Користувач зайшов з телефону, текст став більшим, не вліз у 300px і вивалився назовні.
    • Як думає профі: "Контент сам визначає висоту". Використовуйте min-height або просто padding.

  2. Магічні числа.

    • Помилка: margin-left: 137px; (щоб посунути "на око").
    • Як думає профі: "Чому 137? А якщо екран зміниться?". Використовуйте justify-content: center або auto. Довіряйте браузеру розрахунки.

  3. Дебаггінг кордонами.

    • Якщо верстка "пливе" і ви не розумієте чому — додайте всім елементам тимчасову рамку:
    • * { border: 1px solid red; }
    • Це як рентген для вашого сайту. Ви одразу побачите, хто займає більше місця, ніж треба.

6. 🧩 Підсумок

Друзі, що ми маємо в сухому залишку?

  • Ви зрозуміли, що Flexbox — це про лінію, а Grid — про площину.
  • Ви навчилися центрувати елементи (святий Грааль досягнуто!).
  • Ви побачили, як створювати адаптивні сітки без складних медіа-запитів.

Тепер ви не просто "кидаєте" теги на сторінку. Ви — архітектори простору браузера.

Що далі? Гарна структура — це круто. Але наш сайт поки що "мертвий". Він не реагує на кліки, не завантажує дані, не живе. На наступному уроці ми вдихнемо в нього життя. Готуйтеся, бо до нас приходить JavaScript! ⚡️

Це був CS50... тобто, наш урок верстки. Побачимось!

← До списку уроків Наступний урок →