Інтеграція штучного інтелекту у веб-розробку є найбільшим стрибком в ІТ індустрії. Сучасний розробник — це не просто людина, що пише код, це диригент, який керує ШІ-інструментами, критично оцінює результат і забезпечує архітектурну та візуальну якість.
Підсумкова самостійна робота - це не просто іспит, а повноцінний випускний проєкт (Minimum Viable Product, MVP), який демонструє здатність студента поєднувати фундаментальні технології з генеративним ШІ. Нижче наведено розгорнуті загальні вимоги до роботи.
Загальні вимоги
Кожен студент має розробити, оптимізувати та опублікувати в мережі Інтернет повноцінний вебдодаток або багатосторінковий сайт відповідно до обраного чи отриманого індивідуального варіанта (бізнес-тематики). Проєкт має бути створений за допомогою ШІ-технологій, але з обов'язковим ручним аналізом, доопрацюванням, тестуванням та фінальним релізом.
Архітектурні та технічні вимоги до проєкту
Проєкт має чітко відображати знання фундаментальних технологій вебу та навички інтеграції сучасних ШІ-інструментів розробки.
- Структура та масштабованість. Мінімум 3 логічні сторінки (наприклад: Головна сторінка, Каталог/Послуги, Про нас/Контакти з інтерактивною формою) або складний Single Page Application (SPA) з чітким таб-інтерфейсом чи динамічною маршрутизацією.
- Технологічний стек:
- Семантичний, валідний код HTML5.
- Сучасна адаптивна стилізація за допомогою фреймворку Tailwind CSS (допускається використання ізольованих компонентів v0.dev або Radix UI).
- Динамічна бізнес-логіка та обробка подій на чистому JavaScript (або React/Vite, якщо архітектура проєкту згенерована через Bolt.new).
- Інтерактивність та ШІ-компоненти. Обов'язкова наявність щонайменше одного складного інтерактивного віджета (калькулятор вартості, трекер, система фільтрації даних, інтерактивний тест-опитувальник або функціональний кошик покупок), логіка якого спроєктована за допомогою ШІ.
- Динамічні медіа. Інтеграція сторонніх JS-бібліотек (слайдери, каруселі, модальні вікна, галереї) через CDN.
- Валідація та адаптивність. Стовідсоткова адаптивність (Fluid-дизайн) під мобільні пристрої, планшети та десктопи. Робоча форма зворотного зв'язку з обов'язковою клієнтською перевіркою введення даних за допомогою регулярних виразів (перевірка емейлу, маска телефону тощо).
- Реліз (Деплой). Проєкт має бути завантажений в Git-репозиторій і опублікований на платформі Vercel або Netlify з налаштованим кастомним безкоштовним субдоменом.
Додаткові вимоги для отримання найвищого балу (A/Відмінно)
Щоб отримати максимальну оцінку, майбутній спеціаліст має вийти за межі базових інструкцій і впровадити в проєкт передові інженерні практики:
- Dark/Light Mode (Перемикач тем). Реалізація повноцінної зміни тем оформлення сайту за допомогою утиліт Tailwind CSS (dark:) з обов'язковим збереженням вибору користувача в localStorage браузера.
- Аналітика та SEO-просування. Інтеграція безкоштовних інструментів веб-аналітики (наприклад, Vercel Analytics або Google Analytics) та повне налаштування Open Graph метатегів для коректного й красивого відображення картки сайту при поширенні в соцмережах і месенджерах.
- Робота з Mock-даними (JSON). Винесення контенту сайту (наприклад, списку товарів, послуг чи відгуків) в окремий локальний файл data.json та його динамічне завантаження й рендеринг на сторінці за допомогою асинхронних запитів JavaScript (fetch/async-await).
- Унікальний ШІ-дизайн медіаактивів. Використання генеративного ШІ (наприклад, Midjourney, Adobe Firefly чи Stable Diffusion) для створення унікальних інтерфейсних зображень, банерів, фірмових іконок чи логотипів, з описом відповідних промптів в звіті (повна відмова від стандартних стокових картинок).
- Автоматизація CI/CD. Налаштування автоматичного тестування та деплою сайту на хостинг при кожному git push в гілку main репозиторію через налаштовані ШІ-скрипти GitHub Actions (замість ручного завантаження файлів).
Формат прийняття та оцінювання роботи
Підсумкова робота приймається в форматі бліц-презентації (10-15 хвилин). Студент повинен:
- Продемонструвати працюючий сайт за посиланням в інтернеті.
- Відкрити режим інспектора в браузері (DevTools) і показати ідеальну адаптивність під різні екрани.
- Пояснити логіку написання промптів для свого калькулятора чи віджета та показати, як саме він змусив ШІ обробити помилкові дані користувача.
Такий підхід повністю унеможливлює "списування" або сліпе копіювання коду з інтернету. Студент захищає не просто набір символів, а свою власну логіку взаємодії з штучним інтелектом та розуміння архітектури вебу. Це саме ті навички, які зроблять його затребуваним і високооплачуваним спеціалістом на ринку праці.
Форма звітності
Для успішного захисту підсумкової самостійної роботи студент має підготувати та завантажити на диск папку, що містить такі матеріали:
- Електронний звіт (в форматі PDF), що обов'язково містить:
- Титульний лист з зазначенням теми проєкту, ПІБ студента та академічної групи.
- Дослідницький бриф. Текстова карта сайту та аналіз трендів, які були попередньо узгоджені й структуровані в дослідницькому блокноті NotebookLM чи Gemini.
- Технічний опис проєкту. Обраний стек технологій, опис логіки роботи ШІ-віджета та структура бази даних (якщо використовується data.json).
- Промпт-паспорт (Prompt Log). Таблиця з детальним ланцюжком промптів (системні інструкції, Few-shot запити, коригувальні промпти), котрі застосовувалися для для створення архітектури, дизайну, генерації контенту та логіки коду. Студент має показати логічний ланцюжок від ідеї до виправлення помилок ШІ.
- Скріншоти та результати аудиту Lighthouse. Показники продуктивності (Performance), доступності (Accessibility), найкращих практик (Best Practices) та SEO для мобільної версії сайту. Оцінки мають бути не менше 85 балів (цільовий орієнтир — 90+).
- Посилання на відкритий GitHub-репозиторій з чистим, структурованим кодом проєкту.
- Графічний QR-код (розміщений на першій сторінці звіту). Пряме посилання на «живий» опублікований сайт (Vercel або Netlify) та згенерований QR-код для швидкого тестування викладачем прямо зі смартфона під час захисту.
Критерії оцінювання
Оцінювання проєкту базується на комплексному аналізі технічної складової, глибини використання ШІ та якості захисту роботи.
- Технічна реалізація та архітектура
Проєкт містить більше як 3 логічні сторінки (або повноцінний SPA з динамічною маршрутизацією). Код HTML5 повністю валідний та семантичний. Логіку JavaScript написано чисто, без критичних помилок в консолі.
Присутні незначні помилки у валідації HTML або логіці JS, які не заважають користувачу. Архітектура дещо спрощена, але відповідає вимогам.
Сайт не працює, містить грубі помилки в коді, структура не відповідає вимогам.
- Інтерактивність та ШІ-компоненти
- Інтегровано унікальний складний віджет (калькулятор, квіз тощо), логіку якого детально пропрацьовано через ШІ. Обробка помилкових даних користувача (наприклад, ділення на нуль, некоректні символи) реалізовано бездоганно. Сторонні бібліотеки підключені коректно.
- Віджет присутній, але має просту логіку або дає збої при специфічних сценаріях використання користувачем.
- Віджет відсутній або повністю скопійований без адаптації під бізнес-тематику.
- Адаптивність, UX/UI дизайн та SEO
- Повна адаптивність (Fluid-дизайн) під будь-які розміри дисплею та пристрої. Форми зворотного зв'язку мають клієнтську валідацію за допомогою регулярних виразів. Оцінка Lighthouse за всіма параметрами становить 85–100 балів.
- Присутні незначні візуальні «зсуви» на специфічних мобільних розширеннях. Валідацію форми спрощено. Оцінка Lighthouse в межах 70–84 балів.
- Адаптивність відсутня, форма не працює, оцінки Lighthouse критично низькі.
- Промпт-інженерія та документація
- Звіт містить детальний Промпт-паспорт з чіткою структурою запитів, що демонструє розвиток думки та взаємодію з ШІ. Дослідницький бриф структуровано професійно.
- Промпт-паспорт поверхневий (прості однорядкові запити типу "напиши мені код для сайту"), немає системності у взаємодії з ШІ.
- Звіт відсутній або виконаний не за вимогами.
- Захист проєкту
- Студент вільно володіє матеріалом під час бліц-презентації (10-15 хв), демонструє роботу через DevTools, чітко пояснює кожен рядок згенерованого коду та логіку промптів.
- Студент вагається з відповідями на технічні питання, не може пояснити логіку роботи створеного калькулятора/віджета.
- Студент не здатний усно захистити роботу, виникає обґрунтована підозра в повному плагіаті без розуміння коду.
Бонусна шкала (додаткові бали)
Впровадження одної або кожної з передових практик
- Dark Mode з localStorage.
- Асинхронне завантаження data.json.
- Налаштований CI/CD через GitHub Actions.
- Унікальний ШІ-дизайн медіаактивів без стоків
- Інтеграція аналітики.
Контрольні запитання
- Що таке адаптивна верстка за принципом Mobile-First і як вона реалізується в Tailwind CSS?
- Поясніть різницю між методами Few-Shot Prompting та Chain-of-Thought. Як ви використали їх у вашому проєкті?
- Для чого у вашому JavaScript-коді використовується об'єкт localStorage і як саме ви реалізували збереження теми оформлення (Dark/Light Mode)?
- Що таке асинхронні запити та fetch() в JavaScript? Чому завантаження даних з data.json має бути асинхронним?
- Що таке валідація форми на стороні клієнта за допомогою регулярних виразів (RegEx) та навіщо вона потрібна, якщо є серверна валідація?
- Поясніть концепцію "Grounding" (заземлення) в контексті роботи з NotebookLM або моделями Gemini.
- Як працює автоматизація CI/CD за допомогою GitHub Actions у вашому проєкті?
- Що вимірює інструмент Google Lighthouse і чому показник продуктивності (Performance) є критично важливим для мобільних пристроїв?
- Для чого потрібні метатеги Open Graph (og:title, og:image тощо) в коді вашої сторінки?
- Як утиліти переповнення (overflow) та позиціонування у Tailwind CSS допомагають створювати складні інтерфейси (наприклад, модальні вікна чи фіксовану навігацію)?
- Що таке DOM (Document Object Model) та як ви використовували методи маніпуляції DOM у вашому JavaScript-коді для рендерингу товарів чи послуг?
- Чому небезпечно сліпо копіювати весь JS-код, який генерує ШІ (наприклад, Claude або ChatGPT), і які інструменти браузера ви використовували для його відлагодження?
Глосарій термінів. Повний життєвий цикл створення сучасного вебпродукту
Рекомендовано для вивчення перед захистом Самостійної роботи
- HTML5 (HyperText Markup Language 5) — п'ята версія стандарту мови розмітки вебсторінок, яка вводить нові семантичні елементи (<header>, <article>, <section>, <main>) та вбудовану підтримку мультимедіа.
- JavaScript (JS) — мультипарадигмова мова програмування, що виконується d браузері користувача та забезпечує динамічну поведінку, інтерактивність та обробку подій на вебсторінці.
- DOM (Document Object Model) — незалежний від платформи та мови інтерфейс програмування застосунків (API), який представляє HTML-документ у вигляді дерева об'єктів, надає JavaScript можливість динамічно змінювати контент та структуру сайту.
- Fetch API — сучасний інтерфейс JavaScript, що надає простий та логічний спосіб асинхронного отримання ресурсів (наприклад, JSON-файлів або даних з API) через мережу за допомогою промісів (Promises).
- JSON (JavaScript Object Notation) — легкий текстовий формат обміну даними, що базується на синтаксисі об'єктів JavaScript і є золотим стандартом передачі структурованої інформації у вебі.
- Tailwind CSS — утилітарний (Utility First) CSS-фреймворк, який замість готових компонентів пропонує набір низькорівневих класів для швидкої та гнучкої стилізації безпосередньо в HTML-коді.
- Адаптивний вебдизайн (Responsive/Fluid Design) — підхід до проєктування інтерфейсів, який забезпечує коректне та візуально привабливе відображення сайту на пристроях з будь-якими розмірами екранів та роздільною здатністю.
- SPA (Single Page Application) — односторінковий вебдодаток, який завантажує лише один HTML-документ і динамічно оновлює його вміст за допомогою JavaScript без повного перезавантаження сторінки під час переходів.
- UI-Kit — набір уніфікованих графічних та функціональних елементів інтерфейсу (кнопки, інпути, іконки, чекбокси), які забезпечують стилістичну єдність та спрощують розробку інтерфейсу.
- LocalStorage — вбудоване в браузер сховище даних, яке надає можливість зберігати інформацію безпосередньо на пристрої користувача навіть після закриття вкладки чи перезавантаження комп'ютера.
- Промпт-інженерія (Prompt Engineering) — процес проектування, тестування та оптимізації текстових запитів (промптів) для отримання найбільш точних, якісних та передбачуваних відповідей від ШІ-моделей.
- Few-Shot Prompting — техніка створення запиту, при якій для ШІ-моделі надаються кілька детальних прикладів бажаного формату відповіді перед безпосереднім завданням.
- Промпт-паспорт (Prompt Log) — структурований документ розробника, в якому фіксуються всі ключові запити до ШІ, отримані помилки коду/дизайну та успішні ітерації виправлень.
- v0.dev/Bolt.new — генеративні ШІ-платформи нового покоління (станом на 2026 рік), що призначені для миттєвого створення прототипів, готових інтерфейсних компонентів або цілих SPA-додатків на основі текстових описів.
- NotebookLM — інтелектуальний дослідницький блокнот від Google, який використовує ШІ для аналізу, структурування та генерації ідей на основі завантажених користувачем документів.
- Lighthouse — автоматизований інструмент від Google з відкритим кодом для аудиту якості вебсторінок, який оцінює швидкість завантаження, доступність, SEO та відповідність найкращим практикам розробки.
- CI/CD (Continuous Integration/Continuous Deployment) — набір практик в інженерії програмного забезпечення, що забезпечує автоматичне тестування, збирання та деплой коду на сервери при кожному його оновленні в системі контролю версій.
- GitHub Actions — платформа автоматизації процесів розробки (workflow) безпосередньо в репозиторії GitHub, що надає можливість налаштовувати CI/CD скрипти за допомогою YAML-файлів.
- Open Graph — розроблений Facebook протокол, що структурує метадані веб-сторінки для створення інформативних та привабливих прев'ю-карток (заголовок, опис, картинка) при публікації посилань в соцмережах та месенджерах.
- Vercel/Netlify — сучасні хмарні платформи для хостингу та швидкого розгортання статичних сайтів і SPA-додатків безпосередньо з Git-репозиторіїв з автоматичною підтримкою SSL та CDN.