Перейти к содержимому
HTMLLAB
Базовые знания3 мес · 13 недельВживую онлайн

Modern Frontend
+ AI

Создаёшь и деплоишь production-приложение на React и Next.js; Claude Code, Cursor и Codex — твои напарники по команде.

26
живых занятий
78
часов
6
модулей
5
человек в группе
Modern Frontend + AI

Что ты будешь уметь
в конце курса?

  1. 01Работать с Git, терминалом и AI-агентами: Claude Code, Cursor, Codex
  2. 02Верстать адаптивные и доступные интерфейсы по макету Figma на Tailwind CSS
  3. 03Писать на современном JavaScript и TypeScript и находить баги в AI-коде
  4. 04Строить React-приложения с React Hook Form, Zod, Zustand и TanStack Query
  5. 05Делать full-stack приложения на Next.js App Router с авторизацией и Supabase
  6. 06Покрывать проект тестами Vitest и Playwright, настраивать CI/CD и деплоить на Vercel

Технологии

Весь курс на TypeScript: от интерфейса до тестов и деплоя.

HTML5CSS3Tailwind CSSTypeScriptReactNext.jsshadcn/uiTanStack QueryZustandReact Hook FormZodVitestPlaywrightVercelGitHubClaude CodeCursorCodex

Учебная
программа

6 модулей по 2 недели и неделя защиты в конце. С AI работаем с первой недели.

01Рабочее место и AI-инструментыНеделя 1–2
  • Git/GitHub, терминал, VS Code и Cursor
  • Как работают LLM: контекст, токены, галлюцинации
  • Claude Code и Codex: установка, первые задачи, режим plan
  • Промпт-инжиниринг для кода, файлы правил CLAUDE.md / AGENTS.md / .cursor/rules
ДОМАШКАНастроить окружение и репозиторий; с помощью AI сверстать личную страницу-визитку; приложить лог промптов и разбор: что AI сделал неправильно.
02HTML, CSS, TailwindНеделя 3–4
  • Семантика и доступность (a11y)
  • Flexbox, Grid, адаптивность
  • Tailwind CSS и дизайн-токены
  • Из макета Figma в код с помощью AI (скриншот → вёрстка)
ДОМАШКАСверстать лендинг по макету Figma: адаптив под 3 экрана, оценка Lighthouse от 90.
03JavaScript и TypeScriptНеделя 5–6
  • Современный JS: модули, async/await, fetch
  • DOM и события
  • TypeScript: типы, интерфейсы, generics
  • Ревью AI-кода: найти баги и уязвимости
ДОМАШКАПриложение «Погода» на чистом TS с публичным API; второй этап — получить AI-код с 5 спрятанными багами и исправить их.
04ReactНеделя 7–8
  • Компоненты, props, state, хуки
  • Формы: React Hook Form + Zod
  • Состояние: Zustand, TanStack Query
  • Компонентная библиотека shadcn/ui, генерация компонентов через AI
ДОМАШКАТрекер задач (Kanban) с drag-and-drop, фильтрами и сохранением в localStorage.
05Next.js и full-stack фронтендНеделя 9–10
  • App Router, Server и Client Components
  • Роутинг, загрузка данных, Server Actions
  • Аутентификация (Auth.js / Clerk), Supabase как бэкенд
  • MCP-серверы в Claude Code и Cursor (Figma, GitHub, браузер)
ДОМАШКАБлог или мини-магазин на Next.js с регистрацией, базой данных и деплоем на Vercel.
06Качество и выход в продНеделя 11–12
  • Тесты: Vitest и Playwright, генерация тестов через AI
  • Производительность и SEO, Core Web Vitals
  • CI/CD на GitHub Actions, AI-ревью PR
  • Портфолио, резюме, подготовка к собеседованию
ДОМАШКАПокрыть свой проект тестами (от 60%), настроить CI; оформить README и GitHub-профиль.
FФиналНеделя 13
  • Защита проектов, демо-день
Финальный проект

Полноценное веб-приложение

Веб-приложение на ваш выбор — SaaS-дашборд, маркетплейс или сервис бронирования — с авторизацией, базой данных, тестами и деплоем. На защите показываете историю коммитов и объясняете, какие части написал AI и как вы их проверяли.

АвторизацияБаза данныхТестыДеплой

Как проходят
занятия?

СУББОТАТеория и live-codingНовая тема и живой код вместе с AI-агентом.
ВОСКРЕСЕНЬЕПрактикаЗадача на занятии, преподаватель проверяет и разбирает ошибки.
В БУДНИДомашка · 6–8 часовВыдаётся в воскресенье, сдаётся к субботе через GitHub Pull Request.
Оценивание
Сертификат: итоговый балл от 70% и посещаемость от 80%

Вопросы

Что нужно знать для старта?

Основы программирования: переменные, циклы и функции на любом языке. Если опыта в коде нет, выбирай программу AI Software Developer — она начинается с нуля.

Если код пишет AI, чему учусь я?

Главное правило курса: код пишет AI, но на защите каждую строку объясняешь ты. Ты учишься находить ошибки AI, проверять результат и правильно ставить задачу.

Что нужно купить дополнительно?

Минимум одну подписку на AI-инструмент: Claude Pro, Cursor Pro или ChatGPT Plus (примерно 34 ₼/мес). В стоимость курса она не входит.

Modern Frontend + AI
запишись на программу

В группе всего 5 мест. Первое занятие бесплатно.