Розробка сайтів: HTML, CSS, JS

Курс веб-розробки для дітей і підлітків 10–18 років — онлайн по всій Україні та офлайн у Дніпрі. Дитина починає з нуля: перша сторінка, теги, кольори та шрифти, а вже за кілька місяців — власний сайт, який відкривається з телефона і який можна показати друзям. Курс іде двома сходинками за віком. 10–14 років — «Frontend Старт»: HTML і CSS, адаптивність, перший JavaScript, міні-проєкти на кожному занятті та публікація готового сайту на GitHub Pages. 14–18 років — «Frontend Pro»: сучасний JavaScript, робота з API, React і TypeScript, а у фіналі — портфоліо-проєкт, з яким не соромно вступати на IT-спеціальність. Заняття проходять у малій групі до 6 дітей, двічі на тиждень по 90 хвилин — усього 156 занять за 18 місяців. Викладач бачить екран кожної дитини й допомагає одразу, а батьки отримують зворотний зв’язок про те, як іде навчання. Перший пробний урок безкоштовний.

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, задеплоєний у продакшн.