Домашнє завдання #5: Семантичний лендінг з формою

Тема: Створення лендінгу з правильною семантикою, формою та таблицею

Мета завдання

Застосувати все, що ти вивчив у Block 2: семантичні теги, таблиці, форми, зображення та посилання. Ти створиш повноцінну лендінг-сторінку, яка виглядає як справжній сайт (поки без CSS — тільки HTML).

Що потрібно зробити

Створи лендінг-сторінку для вигаданого IT-курсу (або будь-якої іншої теми — школа танців, спортзал, кав'ярня). Сторінка повинна містити:

1. Семантична структура

Використай правильні теги:

<header>    — логотип/назва + навігація
<main>      — весь основний контент
  <section> — кожна секція лендінгу
  <aside>   — бічний контент (необов'язково)
<footer>    — копірайт, контакти

2. Секція "Герой" (Hero)

Заголовок <h1> з назвою курсу/бізнесу
Короткий опис (1-2 речення)
Зображення або логотип (<img> з alt)

3. Секція "Про нас"

Заголовок <h2>
Кілька параграфів тексту
Список переваг (<ul> або <ol>)

4. Секція "Ціни" (таблиця)

Таблиця з тарифами, яка містить:

<thead>, <tbody>, <tfoot>
<th> з scope
<caption>
Мінімум colspan або rowspan хоча б раз

Приклад:

	Базовий	Стандарт	Преміум
Уроки	10	20	40
Підтримка	Email	Chat	Особисто
Ціна	500 ₴	900 ₴	1500 ₴

5. Секція "Реєстрація" (форма)

Форма з такими полями:

Ім'я (text, required)
Email (email, required)
Телефон (tel)
Вибір курсу/тарифу (select)
Формат навчання (radio: онлайн/офлайн)
Згода з умовами (checkbox, required)
Коментар (textarea)
Кнопка відправки

6. Footer

Копірайт
Email-посилання (mailto:)
Посилання на соціальні мережі (можуть бути заглушками #)

Вимоги

Тільки HTML — без CSS (стилізація буде в Block 3!)
Всі зображення мають alt
Всі поля форми мають label
Ієрархія заголовків: h1 → h2 → h3 без пропусків
Є атрибут lang="uk" на тегу <html>
Є <meta charset="UTF-8"> та <meta name="viewport">

Як здати завдання

Створи репозиторій на GitHub
Запуш HTML-файл(и)
Надішли посилання на репозиторій

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

Критерій
Правильна семантична структура (header, main, section, footer)	✓
Таблиця з thead/tbody та caption	✓
Форма з різними типами полів та label	✓
Зображення з alt-текстом	✓
Вбудована валідація (required)	✓
Ієрархія заголовків без пропусків	✓
Код чистий та відформатований	✓

Бонусні завдання

+10 балів: Додай тег <details> з FAQ (3+ питання-відповіді)
+10 балів: Увімкни GitHub Pages та додай посилання на живий сайт у README
+10 балів: Створи другу сторінку (about.html або contacts.html) з навігацією між сторінками