Практичний проєкт 1 · після модуля 5
Responsive landing page
Створіть оригінальну односторінкову презентацію синтетичного продукту або події. Результат має працювати від 320 CSS px до wide desktop, підтримувати keyboard і preferences, використовувати responsive media та містити відтворюваний QA evidence.
Що здати
- Публічний HTTPS artifact без login і небезпечних forms.
- Source repository або archive з HTML/CSS/assets.
- README: intent, structure, breakpoints, container query та media decisions.
- Breakpoint register і responsive QA matrix із retest evidence.
- Короткий self-review за рубрикою нижче.
Portfolio-safe scope
Використовуйте лише власний або synthetic content. Не додавайте API keys, credentials, trackers, production endpoints, чужі персональні дані чи форму, яка реально збирає інформацію.
Обов’язкові acceptance checks
- Semantic document і логічний DOM/heading order.
- Mobile-first normal flow; Flexbox/Grid за роллю, а не absolute layout.
- Принаймні один content-driven media breakpoint і одна обґрунтована container query.
- Responsive image із intrinsic dimensions та поясненим
srcset/sizesабоpictureрішенням. - Без horizontal page scroll на 320 CSS px; коректно при 200% text zoom.
- Keyboard access, visible focus, достатні targets, light/dark і reduced-motion behavior.
Рубрика · 100 балів
| Критерій | Бали | Що доводить результат |
|---|---|---|
| Semantic HTML і content structure | 20 | Landmarks, headings, meaningful order, alt text |
| Responsive layout engineering | 20 | Fluid baseline, justified breakpoint, Flex/Grid, no overflow |
| Autonomous component | 20 | Named container, same DOM у narrow/wide context |
| Media, access і preferences | 20 | Stable responsive image, keyboard/focus, zoom, theme/motion |
| QA evidence і delivery | 20 | Matrix, boundary tests, Network evidence, README, clean source |
Прийняття: щонайменше 80/100 та відсутність blocking defect: inaccessible core action, page-level overflow, secret/PII exposure або artifact, який не відкривається.
Як відбувається review
- Завершіть урок 20 і його тест — форма здачі відкриється автоматично.
- Надішліть HTTPS artifact та посилання на source.
- SEOWORK перевірить gates і кожний критерій рубрики.
- Якщо результат нижче 80 або є blocker, ви отримаєте опис проблем і зможете подати нову версію.
Подання роботи на перевірку
Передайте HTTPS-посилання на папку або репозиторій із доступом для перегляду. Не додавайте паролі, API-ключі, персональні дані клієнтів чи production-вивантаження.
- Публічний HTTPS artifact без login, trackers або небезпечних forms
- Source repository або archive з semantic HTML, mobile-first CSS та local assets
- README з intent, structure, breakpoints, container query і responsive-media decisions
- Breakpoint register та responsive QA matrix із boundary, zoom, keyboard і preference evidence
- Self-review за рубрикою та portfolio-safe handoff без PII або secrets
- Semantic HTML and content structure — 20
- Responsive layout engineering — 20
- Autonomous component and container query — 20
- Media, accessibility and user preferences — 20
- QA evidence and delivery — 20