Лекції (36 годин):
1 семестр (18 годин) - Веб дизайн:
Змістовний модуль 1. Основи Web-дизайну та проєктування інтерфейсів (UX/UI)
1 Основи UX-дизайну: Принципи та патерни поведінки користувачів (Лекція 01_a. 6 годин)
2 Дослідження та тестування користувацького досвіду (Лекція 01_b. 4 години)
3 Основи UI-дизайну та візуального оформлення (Лекція 01_c. 4 години)
4 Побудова інтерфейсів: Сітки та інтерактивні елементи (Лекція 01_d. 4 години)
1 семестр (18 годин) - Веб технології:
Змістовний модуль 2. Сучасна базова Web-розробка (HTML5 та CSS3)
1 Архітектура WWW та протоколи передачі даних (Лекція 01. 4 години)
2 HTML5: Семантика та структура документа (Лекція 02. 2 години)
3 Блокова модель CSS та позиціювання елементів (Лекція 03. 2 години)
4 Сучасні Layout-технології: Flexbox (Лекція 04. 2 години)
5 CSS Grid та методології адаптивного дизайну (Лекція 05. 2 години)
6 Форми, валідація та збір даних у HTML5 (Лекція 06. 2 години)
7 Оптимізація графіки та продуктивність верстки (Лекція 07. 2 години)
8 Хостинг, розгортання та основи SEO (Лекція 08. 2 години)
2 семестр (36 години) - Веб технології:
Змістовний модуль 3. Програмування мовою JavaScript: від основ до асинхронності
9 JavaScript ES6+: Синтаксис та структури даних (Лекція 09. 2 години)
10 Функції, замикання та контекст виконання (this) (Лекція 10. 2 години)
11 Асинхронність у JS: Callbacks, Promises, Async/Await. (Лекція 11. 2 години)
13 Мережеві запити: Fetch API та робота з JSON. (Лекція 13. 4 години)
Змістовний модуль 4. Створення сучасних Single Page Applications (React.js)
14 Вступ до компонентного підходу та React. (Лекція 14. 2 години)
16 Хуки стану: useState та керовані компоненти. (Лекція 16. 4 години)
17 Хуки ефектів: useEffect та життєвий цикл. (Лекція 17. 2 години)
19 Управління глобальним станом (Context API/Zustand). (Лекція 19. 2 години)
20 Стилізація у React: Styled Components/Tailwind. (Лекція 20. 2 години)
21 Основи Node.js та Express для веб-розробки. (Лекція 21. 2 години)
22 Робота з базами даних (Firebase/Supabase). (Лекція 22. 2 години)
23 Тестування та якість коду (Jest, Testing Library). (Лекція 23. 2 години)
24 AI в веб-розробці та фінальна презентація. (Лекція 24. 2 години)
Лабораторні заняття (36 годин):
1 семестр (18 годин) - Веб дизайн:
Змістовний модуль 1. Основи Web-дизайну та проєктування інтерфейсів (UX/UI)
1 Дослідження цільової аудиторії та проєктування архітектури інформації (Лабораторна 1. 6 годин)
2 Проєктування користувацького досвіду (UX): створення wireframe макетів (Лабораторна 2. 4 години)
3 Основи UI-дизайну: розробка візуальної концепції та дизайн-системи (Лабораторна 3. 4 години)
4 Створення високодеталізованого (high-fidelity) інтерактивного прототипу веб-інтерфейсу (Лабораторна 4. 4 години)
1 семестр (18 годин) - Веб технології:
Змістовний модуль 2. Сучасна базова Web-розробка (HTML5 та CSS3)
1 Налаштування оточення, робота в терміналі, Git. (Лабораторна 01. 4 години)
3 Робота з селекторами, кольорами та типографікою. (Лабораторна 03. 2 години)
4 Побудова складної навігації та карток товарів. (Лабораторна 04. 2 години)
5 Створення багатоколонкового адаптивного макету. (Лабораторна 05. 2 години)
6 Реалізація складних форм із різними типами вводу. (Лабораторна 06. 2 години)
2 семестр (36 години) - Веб технології:
Змістовний модуль 3. Програмування мовою JavaScript: від основ до асинхронності
10 Створення логічних модулів та обробка бізнес-логіки. (Лабораторна 10. 2 години)
11 Робота з таймерами та симуляція мережевих затримок. (Лабораторна 11. 2 години)
12 Створення інтерактивних елементів (модальні вікна, таби). (Лабораторна 12. 2 години)
13 Інтеграція з публічними API (погода, новини). (Лабораторна 13. 2 години)
Змістовний модуль 4. Створення сучасних Single Page Applications (React.js)
17 Синхронізація даних із зовнішніми джерелами. (Лабораторна 17. 2 години)
19 Побудова кошика покупок або системи автентифікації. (Лабораторна 19. 2 години)
22 Підключення бази даних до фронтенд-додатку. (Лабораторна 22. 2 години)
23 Написання модульних тестів для компонентів. (Лабораторна 23. 2 години)
Самостійна робота (96 годин)
1 семестр (48 годин):
Змістовний модуль 1. Основи Web-дизайну та проєктування інтерфейсів (UX/UI)
- Дослідження принципів UX-дизайну та їх вплив на користувацький досвід. (6 годин)
- Основні закони UX (закон Міллера, закон Фіттса, ефект Ресторфф).
- Емпатія, користувацькі сценарії (User Journey) та прототипування.
- Аналіз UI-дизайну на основі прикладів успішних веб-сайтів. (6 годин)
- Розбір трендів сучасного вебу (мінімалізм, неоморфізм, типографіка).
- Робота з простором, контрастом та кольоровою палітрою.
Змістовний модуль 2. Сучасна базова Web-розробка (HTML5 та CSS3)
- Поглиблене вивчення семантичних тегів HTML5, метаданих та доступності (a11y). (6 годин)
- Роль WAI-ARIA атрибутів для скрінрідерів та забезпечення навігації з клавіатури.
- Налаштування Open Graph та Schema.org.
- Сучасні підходи до CSS-архітектури та препроцесори (SASS/SCSS). (6 годин)
- Методології розмітки (BEM, OOCSS, SMACSS).
- Змінні, міксини та вкладеності у SCSS.
- Математичні функції CSS та новітні можливості адаптивного дизайну. (6 годин)
- Використання Container Queries замість Media Queries.
- Робота функцій
calc(), clamp(), min(), max().
- Лабораторна роботи з векторною графікою (SVG) та мікроінтеракціями. (6 годин)
- CSS Transitions, Keyframes анімації та керування SVG-контурами (
stroke-dasharray).
- Поглиблене налаштування інструментів розробника (DevTools, Linters, Formatters). (6 годин)
- Налаштування ESLint, Prettier та EditorConfig для команди.
- Ефективний дебагінг через Chrome DevTools.
- Основи пошукової оптимізації (SEO) та хостинг статичних сайтів. (6 годин)
- Робота з
robots.txt, мапою сайту sitemap.xml та Lighthouse.
- Розгортання через Netlify, Vercel або GitHub Pages.
2 семестр (48 годин):
Змістовний модуль 3. Програмування мовою JavaScript: від основ до асинхронності
- Дослідження нових стандартів ECMAScript та спеціалізованих структур даних. (6 годин)
- Нові методи масивів (
at(), toSorted()) та оператори (?., ??).
- Відмінності та кейси використання
Map, Set, WeakMap.
- Поглиблене розуміння Event Loop, мікротасок та багатопотоковості. (6 годин)
- Як працює Call Stack, Web APIs та Task Queue. Web Workers у браузері.
- Об’єктно-орієнтоване та функціональне програмування в JavaScript. (6 годин)
- Чисті функції, каррування (Currying) і функції вищого порядку (HOF).
- Класи, прототипне наслідування та інкапсуляція.
Змістовний модуль 4. Створення сучасних Single Page Applications (React.js)
- Дослідження екосистеми React та інструментів управління станом. (6 годин)
- Альтернативи Context API: Redux Toolkit, Zustand, Jotai.
- Бібліотеки для роботи з формами (React Hook Form) та анімаціями (Framer Motion).
- Оптимізація продуктивності React-додатків та збирачі модулів. (6 годин)
- Використання хуків
useMemo, useCallback, React.memo та Lazy Loading.
- Порівняння Webpack, Rollup та Vite.
- Архітектура REST API та основи безпеки веб-додатків (Web Security). (6 годин)
- Аналіз OWASP Top 10 (XSS, CSRF). Робота з CORS та автентифікацією (JWT).
- Порівняльний аналіз баз даних та серверних середовищ (Node.js/Deno/Bun). (6 годин)
- Реляційна модель (PostgreSQL) проти Документо-орієнтованої (MongoDB/Firebase).
- Сучасні методології тестування (TDD/BDD) та CI/CD пайплайни. (6 годин)
- Запуск тестів (Jest, Cypress, Playwright) в автоматизованому середовищі (GitHub Actions).