Розробка сайтів: HTML, CSS, JS
Веб-Старт: перший сайт своїми руками (8–11 років)
- 01: HTML: перші теги — Як влаштований сайт, заголовки, абзаци, посилання, картинки, списки, таблиці й форми. Знаходимо помилки в зламаній сторінці.
- 02: CSS: перші стилі — Кольори, шрифти, відступи, рамки, тіні й фони — сторінка стає красивою.
- 03: CSS: інтерактивність — :hover, :focus, псевдоелементи, CSS-змінні, плавні переходи й transform.
- 04: Flexbox — Розкладаємо блоки в ряд і в колонку: меню, картки, вирівнювання.
- 05: CSS Grid — Сітки для галерей і макетів у кілька колонок.
- 06: CSS-анімації — @keyframes, спінери, пульсація, елементи, що виїжджають.
- 07: Проєкт 1: сайт-портфоліо — Від ескізу до готової сторінки про себе з шапкою, роботами й формою.
- 08: JavaScript: старт — Змінні, умови, цикли, масиви, об'єкти й функції; читаємо помилки в консолі.
- 09: DOM: оживляємо сторінку — Кнопки, події, нові елементи, форми, localStorage і таймери. Проєкт — список справ.
- 10: Адаптивний дизайн — Сайт, що добре виглядає і на телефоні, і на моніторі; меню-гамбургер.
- 11: Проєкт 2: ігровий сайт — Сайт гри з персонажами, мініграми, таблицею рекордів і темною темою.
- 🚀: Фінальне портфоліо — Три найкращі проєкти в одному сайті, публікація на GitHub Pages разом із дорослим і захист.
Frontend Старт: перший сайт (10–14 років)
- 00: Швидкий старт: HTML і CSS з нуля — Як влаштований сайт, перші теги, посилання й картинки, таблиці, CSS і box model — для тих, хто починає з нуля.
- 01: HTML5 та семантика — Семантичні теги, медіа, форми й валідація, SEO-теги, доступність, SVG, PWA-основи.
- 02: CSS3 майстерність — Каскад і специфічність, тіні й фільтри, custom properties і темна тема, :has(), Grid, Container Queries.
- 03: CSS-анімації та ефекти — Transitions, 3D-трансформації, @keyframes, Web Animations API, анімація при прокрутці, SVG.
- 04: JavaScript: основи — Змінні, умови, масиви, об'єкти, функції, рядки, дата, Math, помилки, регулярні вирази, JSON.
- 05: DOM та інтерактивність — Делегування подій, Drag and Drop, клавіатура й жести, live-валідація, Observer API. Проєкт — Kanban-дошка.
- 06: Адаптивний дизайн — vw/vh, clamp(), адаптивні зображення, dark mode, друк, адаптивні таблиці.
- 07: JavaScript ES6+ — Promise, async/await, модулі, генератори, Web Workers. Проєкт — Task Manager.
- 08: Fetch API та робота з даними — REST, fetch, відкриті API, CORS, кешування, FormData, WebSocket. Проєкт — дашборд з API.
- 09: CSS-архітектура та Bootstrap — БЕМ, SCSS, PostCSS, Bootstrap 5, Tailwind, Styled Components.
- 10: Інструменти розробника — npm, Vite, ESLint і Prettier, Git і GitHub, GitHub Pages, DevTools, Lighthouse.
- 11: Проєкт 1: квіз-гра — Питання, таймер, бали, рекорди, звуки й темна тема.
- 12: Проєкт 2: портфоліо — Анімований hero, навички, фільтр проєктів, форма, SEO й деплой.
- 13: Проєкт 3: погодний застосунок — Реальне API погоди, прогноз, геолокація, графік, PWA.
- 🚀: Проєкт 4: блог — Блог без бекенду: Markdown, пошук, теги, коментарі, RSS, SEO й аудит Lighthouse.
Frontend Pro: сучасна веб-розробка (14–18 років)
- 01: JavaScript Pro — ООП і прототипи, this, генератори, Proxy, патерни, функціональний стиль, тести на Jest.
- 02: TypeScript — Типи, інтерфейси, generics, utility types, класи, type guards.
- 03: React 19: основи — Компоненти, props, хуки, форми, React Router 7, custom hooks, ref як проп, portals, Error Boundaries.
- 04: React: advanced — Context, useReducer, Zustand, TanStack Query, оптимізація, react-hook-form + Zod, Motion, тестування, CSS Modules і Tailwind, доступність, e2e-тести Playwright.
- 05: Node.js + Express — Сервер, маршрути, middleware, REST API, JWT, валідація, обробка помилок.
- 06: Python Flask — Маршрути, шаблони Jinja2, форми, SQLAlchemy, авторизація, REST API, тести.
- 07: Django + DRF — Моделі, адмінка, views, форми, авторизація, Django REST Framework, JWT, тести.
- 08: Бази даних — SQL, JOIN, агрегати, індекси, транзакції, PostgreSQL, SQLAlchemy, Redis.
- 09: Проєкт 1: Gym Tracker — React + Django: реєстрація, кабінет, відвідування, графіки, QR-коди.
- 10: Проєкт 2: навчальна платформа — Ролі учня й викладача, розклад, домашні завдання, журнал оцінок, i18n.
- 11: Проєкт 3: E-commerce — Каталог, кошик, оформлення замовлення, оплата в тестовому режимі, відгуки.
- 🚀: Деплой і фронтенд у продакшні — Git, Docker, CI/CD, VPS, HTTPS, моніторинг, безпека; Vite-збірка, Core Web Vitals, SEO для SPA, деплой на Netlify/Vercel — і захист портфоліо з трьох проєктів.
