MakeFirstStep· Frontend + ИИ

Курс · Frontend + ИИ

Карта курса

24 урока от первой функции до первого React-приложения. Выберите урок на карте — доступные открываются сразу, остальные можно изучить в программе заранее.

Начать: Урок 1 · Старт курса и настройка среды

Модуль 1 · Уроки 1–6

JS-фундамент

  1. Урок 1Вы здесь

    Старт курса и настройка среды

    Доступен

    Подробнее
    Темы
    Как JS работает в браузере, подключение script, консоль, DevTools
    ИИ-навык
    Карта ИИ-инструментов: чат, автодополнение (Copilot), агент. Что каждый умеет и где ошибается
    Классная работа
    Установка VS Code, расширений и GitHub Copilot; запуск первого скрипта; работа с консолью
    Домашнее задание
    Настроить окружение и прислать скриншот; 5 задач на console.log, prompt, alert
    Результат
    Готовое рабочее окружение
    Открыть урок →
  2. Урок 2

    Переменные, типы данных, приведение типов

    Доступен

    Подробнее
    Темы
    let/const, string, number, boolean, null, undefined, typeof, явное и неявное приведение
    ИИ-навык
    Анатомия промпта: контекст → задача → ограничения → формат ответа. Свой шаблон промпта
    Классная работа
    15 мини-задач на типы; ищем ошибки в ответах ИИ
    Домашнее задание
    10 задач; попросить ИИ объяснить 3 из них и записать, где ИИ ошибся
    Результат
    tasks-02.js + конспект по промптам
    Открыть урок →
  3. Урок 3

    Условия и логика

    Доступен

    Подробнее
    Темы
    Операторы сравнения, == и ===, &&, ||, !, if/else, тернарный оператор, switch
    ИИ-навык
    GitHub Copilot в VS Code: автодополнение, Tab, inline chat. Где помогает и где мешает учиться
    Классная работа
    Консольный калькулятор; задачи на логику с включённым и выключенным Copilot
    Домашнее задание
    Калькулятор, определитель високосного года, конвертер валют
    Результат
    3 консольные программы
    Открыть урок →
  4. Урок 4

    Циклы

    Доступен

    Подробнее
    Темы
    for, while, do..while, for..of, break, continue, вложенные циклы
    ИИ-навык
    Как просить ИИ объяснить чужой код построчно; приём «объясни как новичку»
    Классная работа
    FizzBuzz, таблица умножения, простые числа, пирамида из символов
    Домашнее задание
    8 задач на циклы + разбор одного чужого решения с ИИ
    Результат
    loops.js
    Открыть урок →
  5. Урок 5

    Функции

    Доступен

    Подробнее
    Темы
    Declaration и expression, стрелочные функции, параметры по умолчанию, return, область видимости
    ИИ-навык
    Рефакторинг с ИИ: просим 3 варианта одной функции и выбираем лучший по критериям
    Классная работа
    Пишем 6 функций, затем рефакторим их с ИИ и сравниваем результаты
    Домашнее задание
    Мини-библиотека из 8 своих функций с комментариями
    Результат
    utils.js — личная библиотека функций
    Открыть урок →
  6. Урок 6Контрольная №1

    Массивы и методы массивов + контрольная №1

    Доступен

    Подробнее
    Темы
    Массивы, push/pop/splice/slice, map, filter, reduce, find, some, every, sort
    ИИ-навык
    Генерация тестовых данных с ИИ (100 объектов) и проверка их корректности
    Классная работа
    Аналитика по массиву заказов: сумма, средний чек, топ-5, фильтры
    Домашнее задание
    10 задач на методы массивов
    Результат
    Контрольная №1 (30 мин, без ИИ) + analytics.js
    Открыть урок →

Модуль 2 · Уроки 7–12

DOM и интерфейс

  1. Урок 7

    Объекты и JSON

    Доступен

    Подробнее
    Темы
    Объекты, вложенность, методы, this (базово), деструктуризация, spread/rest, JSON.parse/stringify
    ИИ-навык
    Разбор незнакомого JSON с ИИ: просим схему полей и типов, проверяем по реальным данным
    Классная работа
    Каталог товаров как массив объектов: выборки и группировки
    Домашнее задание
    Превратить сырой JSON в удобную структуру + 5 выборок
    Результат
    data-model.js
    Открыть урок →
  2. Урок 8

    DOM: поиск и изменение элементов

    Доступен

    Подробнее
    Темы
    querySelector, textContent, innerHTML, classList, атрибуты, createElement, append, remove
    ИИ-навык
    Разделение труда: ИИ пишет разметку и стили, ты пишешь логику. Промпт на HTML-шаблон
    Классная работа
    Собираем карточки товаров из массива и рендерим на страницу
    Домашнее задание
    Рендер списка минимум из 10 карточек + кнопка очистки
    Результат
    Страница, собранная из JS
    Открыть урок →
  3. Урок 9

    События

    Доступен

    Подробнее
    Темы
    addEventListener, объект события, target и currentTarget, preventDefault, всплытие, делегирование
    ИИ-навык
    Как описать баг для ИИ: минимальный пример, ожидаемое и фактическое поведение
    Классная работа
    Список с кнопками удалить и в избранное через делегирование
    Домашнее задание
    Интерактивный список: добавление, удаление, фильтр по кнопкам
    Результат
    Интерактивный компонент
    Открыть урок →
  4. Урок 10

    Формы и валидация

    Доступен

    Подробнее
    Темы
    Формы, input, submit, value, checked, валидация полей, вывод ошибок, FormData
    ИИ-навык
    Генерация правил валидации и регулярных выражений через ИИ + проверка на своих кейсах
    Классная работа
    Форма регистрации с живой валидацией
    Домашнее задание
    Форма из 6 полей с полной валидацией и понятными текстами ошибок
    Результат
    Форма регистрации
    Открыть урок →
  5. Урок 11

    Состояние приложения и localStorage

    Доступен

    Подробнее
    Темы
    Состояние в одном объекте, рендер от состояния, localStorage, JSON, обработка пустых данных
    ИИ-навык
    Промпт на архитектуру: просим ИИ предложить структуру состояния и сравниваем со своей
    Классная работа
    Сохранение и восстановление списка после перезагрузки страницы
    Домашнее задание
    Добавить сохранение состояния в проект урока 9
    Результат
    Приложение с сохранением данных
    Открыть урок →
  6. Урок 12Мини-проект

    Мини-проект №1 — сборка и защита

    Доступен

    Подробнее
    Темы
    Весь модуль: DOM, события, формы, localStorage, структура кода
    ИИ-навык
    Декомпозиция проекта с ИИ: разбить идею на 10–15 задач и оценить время
    Классная работа
    Доработка проекта в классе, code review в парах, защита
    Домашнее задание
    Доработать по замечаниям и залить проект на GitHub
    Результат
    Мини-проект 1: трекер задач или привычек (0–100)
    Открыть урок →

Модуль 3 · Уроки 13–18

Async и API

  1. Урок 13

    Асинхронный JavaScript

    Доступен

    Подробнее
    Темы
    Синхронно и асинхронно, setTimeout, callback, Promise, then/catch, async/await, event loop
    ИИ-навык
    Просим ИИ объяснить event loop на схеме и примере, затем проверяем объяснение кодом
    Классная работа
    Имитация загрузки данных с задержкой, цепочки промисов
    Домашнее задание
    6 задач на промисы и async/await
    Результат
    async-basics.js
    Открыть урок →
  2. Урок 14

    fetch и HTTP

    Доступен

    Подробнее
    Темы
    HTTP-методы, коды статусов, заголовки, fetch, response.json(), try/catch, ошибки сети
    ИИ-навык
    Генерация обёртки над fetch с ИИ и её ручная проверка на ошибочных ответах
    Классная работа
    Первый запрос к публичному API, вывод данных в консоль и на страницу
    Домашнее задание
    Получить данные из 2 разных API и отрисовать их
    Результат
    api.js — своя обёртка над fetch
    Открыть урок →
  3. Урок 15

    Работа с реальным API

    Доступен

    Подробнее
    Темы
    Рендер списка из API, поиск, фильтрация, пагинация, параметры запроса
    ИИ-навык
    Чтение документации API вместе с ИИ: как быстро найти нужный эндпоинт и параметры
    Классная работа
    Список с поиском по API: фильмы, погода или криптовалюты
    Домашнее задание
    Добавить поиск и пагинацию в своё приложение
    Результат
    Рабочее приложение на API
    Открыть урок →
  4. Урок 16Демо: Cursor

    Состояния загрузки, ошибки, debounce

    Доступен

    Подробнее
    Темы
    Состояния loading / empty / error, skeleton, debounce, AbortController
    ИИ-навык
    Демо преподавателя: Cursor — как ИИ-агент правит код сразу в нескольких файлах проекта
    Классная работа
    Добавляем три состояния и debounce в приложение
    Домашнее задание
    Довести UX приложения: загрузка, пустой результат, ошибка сети
    Результат
    Приложение с корректными состояниями
    Открыть урок →
  5. Урок 17Демо: Claude Code

    Модули, npm и сборка Vite

    Доступен

    Подробнее
    Темы
    import/export, структура папок, package.json, npm-скрипты, создание проекта на Vite
    ИИ-навык
    Демо преподавателя: Claude Code — постановка задачи в терминале и разбор результата
    Классная работа
    Переносим проект урока 16 на Vite и разбиваем на модули
    Домашнее задание
    Перевести своё приложение на Vite и модули, залить в репозиторий
    Результат
    Проект на Vite с модульной структурой
    Открыть урок →
  6. Урок 18Мини-проектКонтрольная №2

    Мини-проект №2 — защита + контрольная №2

    Доступен

    Подробнее
    Темы
    Весь модуль: async/await, fetch, состояния, модули, сборка
    ИИ-навык
    Разбор: где ИИ реально сэкономил время на проекте, а где увёл в сторону
    Классная работа
    Защита проекта, разбор чужого кода, обратная связь
    Домашнее задание
    Доработка проекта по замечаниям
    Результат
    Мини-проект 2 (0–100) + контрольная без ИИ
    Открыть урок →

Модуль 4 · Уроки 19–21

Инструменты и финал

  1. Урок 19

    Git и GitHub + отладка кода

    Доступен

    Подробнее
    Темы
    Ветки, commit, push, pull request, merge, конфликты, .gitignore; try/catch, DevTools: breakpoints, Console, Network
    ИИ-навык
    Генерация коммит-сообщений и описания PR с ИИ + правильный промпт для бага: минимальный воспроизводимый пример вместо «не работает»
    Классная работа
    Работа в парах: ветка → PR → ревью → merge; ищем и чиним 3 подсаженных бага в чужом проекте
    Домашнее задание
    Оформить репозиторий: ветки, 10+ осмысленных коммитов, README; найти и починить 3 бага, описать причину каждого
    Результат
    Чистый репозиторий с историей + отчёт по багам
    Открыть урок →
  2. Урок 20

    Чистый код, рефакторинг и деплой

    Доступен

    Подробнее
    Темы
    Именование, небольшие функции, DRY, ранний возврат, разделение логики и отображения; сборка Vite, переменные окружения, деплой на Vercel / GitHub Pages
    ИИ-навык
    ИИ-ревью своего кода по чек-листу: что из советов принимать, а что нет + генерация README и текста для портфолио с ИИ
    Классная работа
    Рефакторинг проекта соседа по общему чек-листу, затем деплой всех проектов группы
    Домашнее задание
    Отрефакторить мини-проект 2, задеплоить 2 проекта, оформить README, прислать ссылки
    Результат
    Чек-лист качества кода + живые ссылки на проекты
    Открыть урок →
  3. Урок 21Финальный проект

    Финальный проект — защита + карьерный блок

    Доступен

    Подробнее
    Темы
    Итоговый разбор материала курса, индивидуальные консультации по архитектуре
    ИИ-навык
    Личная шпаргалка промптов: каждый собирает 10 своих рабочих промптов (лист «Шпаргалка промптов») + резюме и GitHub-профиль с помощью ИИ
    Классная работа
    Защита финальных проектов, обратная связь, разбор чужих решений
    Домашнее задание
    Прислать ссылку на задеплоенный проект + подготовить защиту на 5 минут
    Результат
    Защищённый проект на JS, портфолио, оценка + личная шпаргалка промптов
    Открыть урок →

Модуль 5 · Уроки 22–24

React Lite (бонус)

  1. Урок 22Бонус

    React: зачем он нужен. Vite + JSX + первый компонент

    Доступен

    Подробнее
    Темы
    Ограничения ручного DOM, мышление компонентами, npm create vite, JSX vs HTML, App.jsx, экспорт/импорт компонентов
    ИИ-навык
    Просим ИИ переписать знакомый JS-блок в React-компонент и объясняем разницу построчно
    Классная работа
    Создаём React-проект на Vite и разбиваем готовую страницу на 3–4 компонента
    Домашнее задание
    Собрать свою страницу из 5 компонентов на React
    Результат
    Первый проект на React + Vite
    Открыть урок →
  2. Урок 23Бонус

    Props, списки и keys, useState

    Доступен

    Подробнее
    Темы
    props и children, .map() и keys, useState, обработчики событий, условный рендер
    ИИ-навык
    ИИ объясняет ошибки React: почему не обновляется состояние и зачем нужен key — проверяем на своём коде
    Классная работа
    Список карточек из массива через props + счётчик / лайк на useState
    Домашнее задание
    Todo-лист на React: добавить, удалить, отметить выполненным
    Результат
    Интерактивный компонент на useState + список через .map()
    Открыть урок →
  3. Урок 24Бонус

    useEffect + fetch: мини-приложение на React + дорожная карта

    Доступен

    Подробнее
    Темы
    useEffect, загрузка данных из API, состояния loading / error, поиск и фильтрация; обзорно — что дальше даёт Next.js и серверные компоненты
    ИИ-навык
    Как формулировать промпт для React-компонента: пропсы, состояние, крайние случаи — сравниваем с ручной реализацией
    Классная работа
    Переносим приложение на API из уроков 15–16 в React, итоги курса, разбор дорожной карты
    Домашнее задание
    Доделать React-приложение на API, залить на GitHub + план подготовки к Уровню 3
    Результат
    Мини-приложение на React с fetch + дорожная карта к Уровню 3 (React Pro + Next.js)
    Открыть урок →

Финиш

Уровень 3 — React Pro + Next.js

Здесь курс заканчивается — и начинается серьёзный разговор о профессии.