Розробка сайтів: HTML, CSS, JS
Frontend Старт: перший сайт (10–14 років)
- 01: Як влаштований інтернет — Що таке браузер, сервер, HTML/CSS/JS — три ролі веб-сторінки. Знайомство з DevTools.
- 02: HTML5: структура сторінки — Теги, семантика, заголовки, списки, посилання. Перша сторінка — від шапки до підвалу.
- 03: Форми та поля вводу — Текстові поля, кнопки, чекбокси, select — як сайт приймає дані від користувача.
- 04: Таблиці даних — Рядки, колонки, об'єднання комірок — оформлюємо розклад або таблицю результатів.
- 05: CSS3: кольори та шрифти — Синтаксис CSS, кольорові моделі, підключення шрифтів. Сторінка починає виглядати як сайт.
- 06: Box model та відступи — Margin, padding, border — як браузер рахує розмір і простір навколо кожного блока.
- 07: Фони та зображення — Формати JPEG/PNG/SVG, фонові зображення, градієнти — картинки на сторінці виглядають акуратно.
- 08: Шрифти та іконки — Google Fonts, іконкові шрифти — типографіка, яка робить сайт впізнаваним.
- 09: Flexbox — Сучасне вирівнювання блоків без таблиць — картки, меню, центрування.
- 10: CSS Grid — Сітки для складних макетів: галереї, розкладки в кілька колонок.
- 11: Навігація та посилання — Меню сайту, якірні посилання, відносні й абсолютні шляхи між сторінками.
- 12: Адаптивність — Media queries, mobile-first — сайт виглядає добре і на телефоні, і на моніторі.
- 13: Псевдокласи та прості анімації — :hover, :focus, transition — кнопки й посилання, які реагують на дії користувача.
- 14: Bootstrap: готові компоненти — CSS-фреймворк — кнопки, картки та сітка, які збирають сторінку швидше.
- 15: JavaScript: змінні та логіка — Змінні, умови, цикли — вчимо сторінку "думати".
- 16: DOM та події — Клік, ховер, введення в поле. Перший інтерактив: кнопки, що реагують.
- 17: Локальне збереження даних — localStorage — список справ або нотатки, які не зникають після перезавантаження сторінки.
- 18: Міні-проєкт: фотогалерея — Галерея із сіткою, підписами та ефектом при наведенні — перший самостійний проєкт.
- 19: Міні-проєкт: калькулятор і перемикач теми — Робочий калькулятор та світла/темна тема на JavaScript.
- 20: Git та GitHub Pages — Контроль версій, публікація сайту — справжня адреса в інтернеті.
- 🚀: Фінальний проєкт: сайт-портфоліо — Особиста сторінка-портфоліо з кількох секцій, опублікована на GitHub Pages.
Frontend Pro: сучасна веб-розробка (14–18 років)
- 01: Сучасний JavaScript (ES6+) — let/const, стрілкові функції, деструктуризація, модулі — код у сучасному стилі.
- 02: Асинхронність — Promise, async/await, fetch API — робота з даними, що приходять не одразу.
- 03: Робота з API — Підключення реальних відкритих API, JSON, обробка помилок запитів.
- 04: TypeScript: типізація JS — Навіщо потрібні типи, interface, базова типізація функцій та об'єктів.
- 05: CSS-архітектура — БЕМ-методологія, CSS-змінні, основи Sass — стилі, які легко підтримувати.
- 06: Просунутий CSS: анімації та трансформації — Keyframes, transform, transition timing — плавні й ефектні інтерфейси.
- 07: Доступна верстка — Семантика, основи a11y — сайт, зручний для всіх користувачів.
- 08: Інструменти розробника — npm, Vite — збірка проєкту як у реальній команді.
- 09: Вступ до React — Компоненти, props, JSX — перший інтерфейс на React.
- 10: React: хуки — useState, useEffect, списки та форми — інтерактивний застосунок.
- 11: React Router: багатосторінковий застосунок — Маршрутизація між сторінками без перезавантаження — справжній SPA.
- 12: Форми та валідація в React — Керовані поля вводу, перевірка даних, повідомлення про помилки.
- 13: Управління станом: Context API — Глобальний стан застосунку без бібліотек — тема, користувач, кошик.
- 14: Основи Node.js та Express — Простий backend-сервер — фронтенд починає розмовляти зі своїм власним API.
- 15: Бази даних: перше знайомство — Як і де зберігаються дані застосунку — просте знайомство з базами та REST.
- 16: Тестування: перші кроки — Навіщо потрібні тести, базові перевірки компонентів на Jest.
- 17: Git у команді — Branches, pull request, злиття змін — робота як у справжній розробницькій команді.
- 18: Оптимізація продуктивності — Lazy loading, code splitting — застосунок, який швидко завантажується.
- 19: Основи SEO та швидкості — Чому сайт вантажиться швидко і його знаходить Google — базові принципи.
- 20: Деплой проєкту — Публікація на Netlify/Vercel, власний домен.
- 21: Командний проєкт — Розробка сайту в парі: розподіл задач, код-рев'ю.
- 🚀: Фінальний проєкт для портфоліо — Повноцінний SPA-застосунок на React з власним API, задеплоєний у продакшн.
