Учимся делать современные сайты как профессионалы. HTML → CSS → Tailwind → JavaScript → React. За 6 месяцев ребёнок пройдёт путь от vibe-coding с AI до настоящего React-разработчика.
0
уроков
0
недели
0
сертификатов
0–17
лет
Технологии курса
+ работа с AI
ChatGPT, v0.dev, Lovable, Bolt
Результат
Реальный финальный проект на React + Tailwind + API. Работает 24/7 по ссылке.
5–7 проектов в портфолио с README, PR-историей, CI/CD. Готово к показу работодателю.
Web Starter, HTML Master, CSS Master, JS Developer, React Developer + ДИПЛОМ Web Developer.
Умеет работать с ChatGPT, v0, Lovable. Но защищает проект БЕЗ AI — всё своё.
Программа курса
Каждый этап ведёт к промежуточному результату — конкретный артефакт, который можно показать.
Ученик за 3 недели получает рабочий сайт с помощью ChatGPT. Видит вау-эффект, влюбляется в IT, понимает зачем нужен код.
К концу этапа
✓ Первый сайт в интернете (Netlify) ✓ GitHub-профиль ✓ Demo-day презентация
Подробная программа
6 уроков — нажмите чтобы развернуть
Добро пожаловать в веб-разработку
Из чего состоит сайт: HTML, CSS, JS. StackBlitz — IDE в браузере.
Vibe-coding: первый сайт через ИИ
Что такое prompt. Генерируем сайт-портфолио через ChatGPT.
Кастомизация: делаем сайт «своим»
Unsplash, Google Fonts, палитра. Правило: «ИИ не пишет за тебя».
Интерактив через ИИ
Кнопки, анимации, слайдеры через ChatGPT. Как читать чужой код.
Git и деплой на Netlify
git init/add/commit/push. GitHub. Деплой сайта в интернет.
Demo-day #1: «Что сделал я, а что ИИ»
Видеопрезентация: показать сайт, рассказать что свой код.
Учимся писать код руками. На каждом уроке — разбор: «вот что сгенерил AI, вот что не так, вот как правильно». Tailwind, Flexbox, React Hooks, fetch API.
К концу этапа
✓ Лендинг по AI-макету ✓ Портфолио с интерактивом ✓ Todo-list ✓ Dashboard с API ✓ React SPA-портфолио
Подробная программа
24 уроков — нажмите чтобы развернуть
HTML: структура и семантика
header/main/section/footer. Валидатор W3C. Почему AI пишет div везде.
Формы, которые ИИ делает неправильно
input, validation. Провокация: показываем ошибки AI.
Медиа и скорость: почему сайт тормозит
Картинки, WebP, lazy-loading. Lighthouse.
AI-макет за 5 минут (v0.dev)
Vercel v0. Figma как читалка макета.
Адаптивный дизайн: mobile-first
Media queries, DevTools, breakpoints.
Лендинг по AI-макету
Верстаем v0-макет руками. Можно вопросы AI — нельзя код.
CSS-детектив: каскад и специфичность
Селекторы, !important. CSS Diner — 32 уровня.
Flexbox + промежуточный результат
Flexbox Froggy — 24 уровня. Сертификат HTML Master.
CSS Grid: двумерные лэйауты
Grid Garden — 28 уровней. Галерея на Grid.
Анимации + первый JS
CSS transitions, keyframes. addEventListener.
v0 + Tailwind: компоненты за секунды
Utility-first CSS. Стандарт React-разработки 2026.
Портфолио-сайт на Tailwind
Сборка портфолио с нуля. Можно вопросы AI.
JavaScript: переменные и типы
VS Code. var/let/const, операторы. JSchallenger.
Условия и циклы
if/else, for, while. CodeCombat — JS через игру.
Функции и события
Arrow functions, scope. localStorage. AI как рефакторщик.
DOM + сертификат CSS Master
querySelector, classList. Переключатель темы + модалка.
API и fetch: внешние данные
HTTP, JSON, async/await. Виджет погоды/шуток.
Dashboard на 2–3 виджетах
Все состояния: loading/error/success. Точка выхода.
Введение в React: следующий уровень
Компонент = функция. JSX. Vite + Tailwind.
Props и композиция
Props, children, .map() + key. Card-компонент.
useState и события
Иммутабельность. Табы, форма-фильтр.
useEffect: «почему зациклился»
Начинаем с бага: dependency array. Виджет погоды.
React Router: многостраничность
BrowserRouter, Routes, Link. Портфолио → SPA с 4 маршрутами.
Lovable: приложение за 10 мин + сертификат JS Developer
Кульминация: Lovable + ручная починка строк. «Ты сильнее AI».
Спикер ведёт демо-проект «КиноГид» (React SPA), ученик параллельно делает свой. Спринты, PR, code review, защита. AI — помощник, но защита БЕЗ AI.
К концу этапа
✓ Готовый проект в интернете ✓ GitHub с README и CI/CD ✓ Lighthouse ≥85 ✓ Видео защиты
Подробная программа
18 уроков — нажмите чтобы развернуть
Выбор проекта + повторение HTML-семантики
Темы проектов. ТЗ в 5 предложений. HTML-скелет.
ТЗ + AI-макет + Tailwind
v0 для финального проекта. Установка Tailwind.
Git-workflow: ветки и PR
develop, feature-branch, merge-конфликты. Oh My Git!
Спринт 1: скелет (Flex/Grid)
Bolt.new для scaffolding. Лэйаут на Tailwind.
Спринт 2: стилизация + dark mode
Адаптив через sm:/md:/lg:. dark: классы.
Спринт 3: JS-функционал
Поиск, фильтрация, иммутабельность. AI как debug-помощник.
Спринт 4: API + 4 состояния
TMDB API. Loading/error/empty/success — Tailwind для каждого.
Mid-demo #5: проект на 70%
Видео-презентация. Self-feedback start/stop/continue.
Firebase: БД без бэкенда (опц.)
Firestore + auth. Или Supabase как альтернатива.
Формы с доставкой
Formspree. Почему mailto: плохо.
Безопасность: история счёта на $400
Реальная история. .env, GitGuardian, XSS.
Оптимизация: −1 сек = +7% конверсии
Lighthouse, WebP, lazy-loading, Core Web Vitals.
Доступность + SEO
WAVE, ARIA. Open Graph, sitemap.
Тестирование и баг-фикс
Чек-лист. GitHub Issues. Bug Hunt Challenge.
CI/CD + README
Автодеплой. GitHub Action. Readme.so.
Mock-интервью + сертификат React Developer
5-мин питч. «Не знаю» — нормально.
Полировка и backup
Финальный чек-лист 15 пунктов. Backup-видео.
ФИНАЛЬНЫЙ DEMO-DAY → ДИПЛОМ
Защита БЕЗ AI. 7 мин демо + 5 мин QA. Диплом Web Developer.
AI-стратегия курса
Мы не делаем вид что ChatGPT не существует. Учим работать с ним правильно — на каждом этапе своя стратегия.
Ученик за 3 недели получает рабочий сайт через ChatGPT. Видит вау-эффект — «оказывается, я могу!». Влюбляется в IT.
Vibe-codingAI = объяснение, ученик пишет код. На уроках разбираем «вот что сгенерил AI — вот 3 ошибки». Ученик учится критическому взгляду.
Можно вопросы, нельзя кодНа финальной защите ученик работает один. Всё что показывает — его. Так же, как на реальных собеседованиях.
СамостоятельностьУчимся через игры
Учим Git через интерактивные уровни в браузере. Без страха перед командной строкой.
32 уровня на CSS-селекторы. Кормим существ через правильные селекторы.
24 уровня — перемещаем лягушек через flexbox-свойства. К концу — мастер Flexbox.
28 уровней про CSS Grid. Поливаем огород через grid-области.
JS-задачи с мгновенной проверкой. От «Basics» до «Arrays» — реальная практика.
Управляем героем JavaScript-кодом. Учим циклы и условия через приключение.
Никто не застревает
Если ученик не справляется с основным заданием — через 48 часов открывается облегчённая версия. Готовый шаблон кода, подсказки с таймкодами видео. Главное — движение, а не «сижу неделю на одной задаче».
Уровень 2 — не стыдно. Это scaffold чтобы идти дальше, а не вариант для «слабых».
Полноценное задание без подсказок. Если справился — идём дальше. 5-7 пунктов, иногда видео-демонстрация работы.
Преподаватель курса
Frontend Engineer · inDriver
4 года в IT. В inDriver работает над интерфейсом приложения, которое использует 200+ миллионов человек. До этого — фрилансер, делал лендинги для алматинских студий.
⚠️ Имя и компания — пример. Когда подтвердим реального преподавателя, заменим за 2 минуты.
Стоимость и старт
47 500 ₸
в месяц · абонемент
✓ Помесячно — платите когда учитесь
✓ Kaspi-рассрочка на 6 мес, 0% переплаты
✓ Скидка 10% при оплате 6 мес сразу
1 июля 2026
старт обучения
🕐 20:00 по Алматы
📆 Вт + Чт или Ср + Пт
👥 Группа до 8 человек
Ребёнок попробует, познакомится с преподавателем, сделает первый сайт через AI. Если не понравится — никаких обязательств.
60 минут · в Zoom · менеджер свяжется в течение часа