Вивчай
Домашнє завдання #6 ·
балівbeginner

Стилізуй HTML-сайт за допомогою CSS

Час перетворити твій HTML-сайт з Block 2 на щось красиве! У цьому завданні ти застосуєш все, що вивчив про CSS: селектори, кольори, Box Model та типографіку.


Завдання

Візьми свій багатосторінковий сайт з ДЗ #1 (або створи новий HTML з 2-3 сторінок) та стилізуй його зовнішнім CSS-файлом.

Вимоги

1. Файлова структура:

my-styled-site/
├── index.html
├── about.html
├── contacts.html
└── style.css          ← один файл стилів для всіх сторінок

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

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

3. Box Model:

  • box-sizing: border-box на всіх елементах (*, *::before, *::after)
  • Правильні padding та margin (немає тексту, що "прилипає" до країв)
  • Хоча б один елемент з border та border-radius
  • margin: 0 auto для центрування основного контейнера

4. Типографіка:

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

5. Кольори:

  • Обрана кольорова палітра (2-3 основні кольори)
  • Достатній контраст тексту на фоні
  • Різний колір для посилань та hover-ефект на них

6. Селектори:

  • Використай селектори елементів, класів та хоча б один id-селектор
  • Використай хоча б один вкладений селектор (наприклад, nav a)
  • Використай хоча б один псевдоклас (:hover, :first-child, або інший)

Приклад результату

Сторінка повинна мати:

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

Підказки

  • Почни з "CSS Reset": box-sizing: border-box + margin: 0 на body
  • Обери палітру на Coolors або Color Hunt
  • Шрифт обери на Google Fonts (рекомендую Inter або Roboto)
  • Перевіряй контраст на WebAIM Contrast Checker
  • Використовуй Chrome DevTools (F12) для налагодження стилів

Критерії оцінки

КритерійБали
Зовнішній CSS + Google Fonts20
box-sizing + правильні відступи20
Кольорова палітра + контраст20
Типографіка (font-size, line-height, ієрархія)20
Селектори (класи, вкладені, псевдокласи)20