Вивчай
Домашнє завдання #6 · CSS: селектори, Box Model, типографіка
100 балів+15 бонусbeginner

Домашнє завдання #6: Стилі для твого лендінгу

Твій продукт вже має лендінг — але поки що він виглядає як чорний текст на білому тлі. Час це виправити. Сьогодні лендінг отримає обличчя: кольори, шрифт, повітря між блоками.

Що ти вже маєш

Семантичний лендінг свого продукту з ДЗ #5: hero, секція можливостей, таблиця тарифів, форма підписки. Саме його ти й стилізуєш — не сайт з ДЗ #1 і не новий HTML.

Скопіюй index.html з hw-05/ у нову папку hw-06/ — кожне ДЗ у репозиторії самодостатнє.

Завдання

Створи файл style.css і підключи його до лендінгу. Файлова структура:

hw-06/
├── index.html
├── style.css          ← всі стилі тут
├── screenshots/
│   └── desktop.png
└── README.md

1. Підключення CSS

  • Один зовнішній файл style.css, підключений через link
  • Жодного inline-стилю (style="...") і жодного тегу style в HTML

2. Box Model

  • box-sizing: border-box на всіх елементах (селектор *, *::before, *::after)
  • Основний контейнер контенту обмежений по ширині та відцентрований через margin: 0 auto
  • Продумані padding та margin: текст ніде не «прилипає» до країв
  • Хоча б один елемент з border та border-radius (наприклад, картка тарифу чи кнопка)

3. Типографіка

  • Шрифт з Google Fonts (Inter, Roboto або інший на твій смак)
  • Базовий font-size: 16px на body
  • line-height: 1.6 для основного тексту
  • Видима ієрархія заголовків: h1 більший за h2, h2 — за h3

4. Кольори

  • Обрана палітра з 2-4 узгоджених кольорів (акцентний колір бренду + нейтральні)
  • Достатній контраст тексту на фоні
  • Посилання мають власний колір та hover-ефект

5. Селектори

  • Селектори елементів, класів та хоча б один id-селектор
  • Хоча б один вкладений селектор (наприклад, посилання всередині навігації)
  • Хоча б один псевдоклас: :hover, :focus, :first-child — на вибір

Як зробити скріншот

Це перше ДЗ, де чекер дивиться на результат очима — через скріншоти. Два способи:

  • DevTools (рекомендую): F12 → іконка device toolbar (Cmd+Shift+M) → обери розмір → меню «⋮» → Capture full size screenshot. Так виходить скрін усієї сторінки, а не лише видимої частини
  • macOS: Cmd+Shift+4 і виділи вікно браузера (простіше, але без повної висоти сторінки)

Поклади результат у hw-06/screenshots/desktop.png (ширина ~1440px).

Як здати

  1. Робота — у репозиторії my-web-course, у папці hw-06/
  2. У папці — index.html, style.css, screenshots/desktop.png та README.md (2-3 речення: яку палітру та шрифт обрав + як відкрити)
  3. Мінімум 3 коміти з осмисленими повідомленнями — наприклад, окремо базова типографіка, кольори, стилі таблиці та форми
  4. Здай посиланням на папку hw-06 у репозиторії

Критерії оцінювання

КритерійТипБали
Зовнішній style.css через link, нуль inline-стилів[код]15
box-sizing: border-box, центрований контейнер, border + border-radius[код]15
Google Fonts підключено, font-size, line-height, ієрархія заголовків[код]15
Селектори: класи, id, вкладений, псевдоклас з hover-ефектом на посиланнях[код]15
Палітра з 2-4 узгоджених кольорів, текст читабельний на фоні[скрін]10
Однакові вертикальні відступи між секціями, текст не прилипає до країв[скрін]10
Форма і таблиця виглядають охайно, не розповзаються по ширині[скрін]10
Якість коду[код]10
Разом100
Бонус: кнопка форми стилізована (фон, padding, border-radius, hover з transition) — не схожа на дефолтну[скрін]+15

Підказки

Рівень 1: напрямок

Почни з «фундаменту»: box-sizing, обнулення margin на body, контейнер з обмеженою шириною по центру, базовий шрифт. Потім іди по секціях зверху вниз — header, hero, можливості, таблиця, форма, footer. Палітру не вигадуй з голови: візьми готову на Coolors або Color Hunt — 1 акцентний колір + темний для тексту + світлий для фону вже достатньо.

Рівень 2: властивості та інструменти

Знадобляться: max-width + margin: 0 auto для контейнера; padding для внутрішнього повітря секцій, margin-bottom — для відступів між ними (обери одне значення і використовуй всюди); font-family з fallback після Google Fonts; border-collapse: collapse зробить таблицю охайнішою, а padding на td/th дасть клітинкам дихати; для полів форми — padding, border, border-radius і однакова ширина. Контраст перевіряй на WebAIM Contrast Checker, стилі налагоджуй у DevTools (F12).

Рівень 3: покроковий план
  1. Reset: універсальний селектор з box-sizing, body з margin 0, font-family, font-size 16px, line-height 1.6, колір тексту і фону з палітри
  2. Клас-контейнер: max-width близько 900-1100px, margin 0 auto, горизонтальний padding
  3. Header: фон акцентним або темним кольором, посилання навігації — контрастним, з hover
  4. Секції: однаковий вертикальний padding (наприклад, 3rem), h2 з відступом знизу
  5. Таблиця: border-collapse, padding у клітинках, thead виділено фоном, caption стилізовано
  6. Форма: поля на всю ширину блоку, label над полем, кнопка акцентного кольору
  7. Footer: темний фон, світлий текст
  8. Пройдися по сторінці й перевір: чи всі відступи однакові, чи ніщо не прилипає — потім скріншот

Що далі

Тепер твій продукт виглядає як сайт, а не як конспект. У ДЗ #7 та ДЗ #8 ти прокачаєш верстку через Flexbox і роботу з макетом Figma, а в ДЗ #13 форма підписки на цьому лендінгу оживе — з'явиться справжня валідація на JavaScript. Не видаляй цей код!

Пов'язані уроки