01. Как работает интернет и веб-сайты. Что такое фронтенд и бекенд. Изучение базового HTML
02. Директория проекта. Формы/картинки/видео
03. Финальный урок по HTML. Установка и настройка Claude Code. Подключение Claude
04. Промпт-инжиниринг для кодинга: как формулировать запросы, структура хорошего промпта, итерации и уточнения
05. Архитектура веба: клиент–сервер, браузер, DOM. Структура HTML-документа: теги, атрибуты, семантика
06. CSS-основы: селекторы, свойства, каскад. Блочная модель, отступы, цвета, шрифты
07. Flexbox и Grid: современная вёрстка. Адаптивность (media queries), mobile-first подход
08. JavaScript-основы: переменные, функции, события. Интерактивность на странице (клики, формы, анимации)
09. Работа с DevTools: инспектор элементов, консоль, вкладка Network. Чтение ошибок в консоли
10. Практикум: создаём простую страницу руками, затем пересоздаём её через Cursor с ИИ — сравниваем подходы
11. Планирование проекта: как разбить сайт на части (роадмап). Файловая структура проекта. Правила именования
12. Создание Hero-секции и навигации с помощью ИИ. Итерационный подход: промпт → результат → корректировка
13. Секции «О нас», «Услуги», «Преимущества». Работа с карточками, иконками, изображениями
14. Формы обратной связи, футер, кнопки CTA. Подключение простой валидации
15. Работа с багами: чтение ошибок в консоли, поиск проблем, формулировка запросов к ИИ для исправления. Отладка вёрстки
16. Финализация лендинга: адаптивность, анимации, оптимизация. Код-ревью всей группой
17. Основы Figma для разработчика: навигация, Inspect-панель, экспорт assets. Как читать макет: размеры, отступы, цвета, шрифты
18. Стратегия переноса макета в код: от общей структуры к деталям. Подготовка промптов с описанием дизайна для ИИ
19. Вёрстка главной страницы по макету: Header, Hero, основной контент. Сверка с дизайном, корректировки
20. Вёрстка внутренних страниц: «О компании», «Контакты», «Услуги». Переиспользование компонентов
21. Адаптивная вёрстка по макету: мобильная и планшетная версии. Работа с брейкпоинтами из Figma
22. Полировка и pixel-perfect: сверка с макетом, исправление расхождений, типографика, микро-анимации
23. Интерактивные компоненты: слайдеры/карусели, модальные окна, аккордеоны, табы. Подключение библиотек через ИИ
24. Работа с данными: JSON, массивы, динамическая генерация карточек. Фильтрация и сортировка контента
25. Формы с валидацией, маски ввода, отправка данных. Подключение Telegram-бота для уведомлений
26. Анимации и микро-взаимодействия: CSS transitions, scroll-анимации, hover-эффекты. Библиотека AOS
27. SEO-основы: meta-теги, Open Graph, семантическая разметка, favicon, robots.txt, sitemap. Оптимизация изображений
28. Оптимизация производительности: скорость загрузки, Lighthouse, сжатие, lazy loading. Git: основы версионирования
29. Деплой на Vercel / Netlify: регистрация, подключение проекта, автоматические обновления. Подключение домена
30. Выбор и планирование дипломного проекта. Составление ТЗ и роадмапа. Утверждение макета и структуры с преподавателем
31. Работа над дипломным проектом: структура, навигация, главная страница
32. Работа над дипломным проектом: внутренние страницы, контент, интерактивность
33. Работа над дипломным проектом: адаптивность, анимации, SEO, оптимизация, деплой
34. Защита дипломных проектов. Презентация перед группой. Обратная связь. Что изучать дальше: React, Next.js, фриланс