Домашнє завдання #5: Мій продукт — семантичний лендінг

Це не звичайне ДЗ. Сьогодні ти приймаєш рішення, яке пройде з тобою весь курс.

Обери свій продукт

Придумай продукт-колекцію, який стане твоїм особистим проєктом. Ця тема буде рости разом з тобою: зараз — лендінг, у ДЗ #6 він отримає стилі, у ДЗ #13 оживе форма, у ДЗ #14 з'явиться каталог, а наприкінці курсу це буде повноцінний застосунок у твоєму портфоліо.

Ідеї на вибір:

🎬 Фільмотека — колекція переглянутих фільмів з оцінками
🎮 Бібліотека ігор — пройдені та бажані ігри
📚 Книжкова полиця — прочитане і плани
🍳 Колекція рецептів — улюблені страви
👟 Колекція кросівок — пари мрії
✈️ Щоденник подорожей — відвідані місця
🎵 Вінілові платівки — музична колекція
💡 Власна ідея — будь-яка колекція, яку цікаво вести

Обирай те, що тобі реально цікаво — з цією темою ти проведеш кілька місяців. Придумай продукту назву-бренд: коротку, дзвінку, латинкою. У прикладах нижче ми використовуємо фільмотеку з брендом FilmShelf — але твій лендінг має бути про твою тему.

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

Створи лендінг-сторінку свого продукту — так, ніби це реальний сервіс, на який ти запрошуєш користувачів. Поки що тільки HTML, без CSS — стилі будуть у ДЗ #6.

Структура сторінки (мокап на прикладі FilmShelf):

┌──────────────────────────────────────┐
│ header:  FilmShelf        [навігація]│
├──────────────────────────────────────┤
│ hero:    Твоя фільмотека —           │
│          завжди під рукою            │
│          [зображення]                │
├──────────────────────────────────────┤
│ section: Що всередині (списки)       │
├──────────────────────────────────────┤
│ section: Тарифи (таблиця)            │
├──────────────────────────────────────┤
│ section: Підписка (форма)            │
├──────────────────────────────────────┤
│ footer:  © контакти, соцмережі       │
└──────────────────────────────────────┘

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

Сторінка складається з header (назва-бренд + навігація по секціях через якірні посилання), main з окремими section для кожного блоку та footer.

2. Hero

h1 з назвою продукту
Опис в 1-2 речення: що це і для кого (на прикладі FilmShelf: «Записуй переглянуте, став оцінки, плануй кіновечори»)
Зображення з осмисленим alt

3. «Що всередині»

Заголовок h2
Список можливостей продукту (ul) — мінімум 4 пункти
Нумерований список (ol) «як почати за 3 кроки»

4. Тарифи або категорії (таблиця)

Таблиця з мінімум 3 колонками тарифів (напр. Безкоштовний / Кіноман / Режисерський) або категоріями колекції. Обов'язково:

caption з назвою таблиці
thead і tbody
th з атрибутом scope
Хоча б один colspan або rowspan

5. Форма підписки

Форма реєстрації у твій сервіс з полями:

Поле	Тип
Ім'я	text, обов'язкове
Email	email, обов'язкове
Телефон	tel
Вибір тарифу	select з варіантами з твоєї таблиці
Формат сповіщень	radio (напр. email / телеграм)
Згода з умовами	checkbox, обов'язковий
Побажання	textarea
Кнопка відправки	button або input type submit

Кожне поле має пов'язаний label (через for + id).

6. Footer

Копірайт з назвою бренду
Email-посилання через mailto:
2-3 посилання на «соцмережі» (заглушки # — це нормально)

Технічні вимоги

Тільки HTML — жодного CSS та атрибутів style
lang="uk" на тегу html, є meta charset та meta viewport
Ієрархія заголовків без пропусків: h1 → h2 → h3
Всі зображення мають alt, всі поля форми — label
Обов'язкові поля позначені атрибутом required

Як здати

Робота — у твоєму репозиторії курсу my-web-course, у папці hw-05/
У папці — index.html та README.md: 2-3 речення про твій продукт (яку тему обрав і чому) + як відкрити сторінку
Мінімум 3 коміти з осмисленими повідомленнями (не «fix» і не «update») — наприклад, окремо каркас, таблиця, форма
Здай посиланням на папку hw-05 у репозиторії

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

Критерій	Тип	Бали
Семантичний каркас: header з навігацією, main, окремі section, footer	[код]	20
Hero: h1 з назвою бренду, опис, зображення з осмисленим alt	[код]	10
Секція «Що всередині»: ul на 4+ пунктів та ol «як почати»	[код]	10
Таблиця: caption, thead/tbody, th зі scope, colspan або rowspan, 3+ тарифів	[код]	20
Форма: всі поля з таблиці вимог, кожне з label, required де вказано	[код]	20
Ієрархія заголовків без пропусків, lang, charset, viewport	[код]	10
Footer: копірайт, mailto-посилання, посилання на соцмережі	[код]	5
Якість коду	[код]	5
Разом		100
Бонус: FAQ з 3+ питань через details/summary	[код]	+10
Бонус: GitHub Pages увімкнено, посилання на живу сторінку в README	[код]	+10

Підказки

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

Не намагайся зробити все одразу. Спочатку каркас: header, main з порожніми section, footer — і одразу перший коміт. Потім наповнюй секції по одній зверху вниз. Навігація в header — це звичайні посилання на якорі: даєш секції id, а в href пишеш # та цей id.

Рівень 2: теги та атрибути

Тобі знадобляться: header, nav, main, section, footer — каркас; table, caption, thead, tbody, tr, th scope="col", td, colspan — таблиця; form, label for, input з типами text/email/tel/radio/checkbox, select + option, textarea, button type="submit" — форма. Для радіокнопок однієї групи атрибут name має збігатися. Посилання на пошту: href="mailto:адреса".

Рівень 3: покроковий план

Створи index.html з doctype, html lang="uk", head (charset, viewport, title з назвою бренду)
У body: header → всередині назва бренду та nav з 3 якірними посиланнями (#features, #pricing, #signup)
main → section з h1 (hero: назва, опис, img)
section id="features" → h2, ul з можливостями, ol з кроками
section id="pricing" → h2, table: caption → thead з рядком th (перша порожня клітинка + назви тарифів) → tbody з рядками характеристик, у першій клітинці рядка th scope="row"
section id="signup" → h2, form: для кожного поля — label з for + input з відповідним id
footer → p з копірайтом, a mailto, посилання-заглушки
Перевір у браузері: клік по навігації скролить до секції, required-поля не дають відправити порожню форму

Що далі

Цей лендінг — фундамент твого продукту. У ДЗ #6 він отримає стилі й перестане виглядати як документ з 1995 року. У ДЗ #13 форма підписки оживе — з'явиться справжня валідація. У ДЗ #14 поруч виросте каталог твоєї колекції. Не видаляй цей код!