🧱 HTML с нуля
Познакомитесь с тем, как устроены веб-страницы. Напишете свой первый HTML-код, узнаете, что такое теги, атрибуты и как создаётся структура документа.

📑 Работа с текстом
Освоите заголовки, абзацы, переносы строк, комментарии и пробелы — научитесь придавать тексту нужную структуру и читаемость.

🏷️ Популярные теги в действии
Познакомитесь с самыми часто используемыми HTML-элементами: списки, цитаты, разделители и другие полезные теги для контента.

🖼️ Медиа на странице
Научитесь вставлять изображения и делать кликабельные картинки, добавлять ссылки и понимать, как работает навигация на сайте.

📊 Таблицы и формы
Разберётесь, как оформлять данные в таблицах и создавать формы для взаимодействия с пользователем.

✅ Финальный штрих по HTML
Подведёте итоги — закрепите все базовые навыки разметки, подготовитесь к CSS.

🎨 Типы стилей
Узнаете разницу между inline, внутренними и внешними стилями — и где какой лучше применять.

🔍 Селекторы, id и классы
Разберётесь, как выбирать элементы для стилизации. Научитесь использовать классы, id и комбинировать селекторы.

🎛️ Базовые свойства CSS
Освоите ключевые свойства: цвета, шрифты, отступы, границы, фон — всё, чтобы сделать страницу красивой и аккуратной.

🖼️ Стилизация изображений
Научитесь задавать стили изображениям через CSS, корректно их размещать и настраивать внешний вид.

✨ Hover-эффекты и интерактивность
Добавите первые визуальные эффекты при наведении, чтобы сделать интерфейс живым и удобным.

🛠️ Практика и итог по CSS
Закрепите навыки в большом практическом задании. Подведёте итоги по CSS и будете готовы к следующему уровню.

🌟 Знакомство с JavaScript
Узнаете, зачем нужен JavaScript, как он работает в браузере и как подключается к HTML-документу.

📦 Переменные и типы данных
Разберётесь, как сохранять информацию в переменные, какие бывают типы данных и как с ними работать.

➕ Арифметика и вычисления
Научитесь выполнять базовые операции — от сложения до деления, а также комбинировать выражения.

🔀 Условия и логика
Поймёте, как управлять логикой программы с помощью if, else и switch. Начнёте писать адаптивный код.

🔁 Циклы: повторяем правильно
Познакомитесь с for, while, do...while и научитесь повторять действия программно — от простых итераций до вложенных циклов.

🧮 Функции как строительные блоки
Узнаете, как писать функции, передавать параметры, возвращать значения и почему функции — основа хорошего кода.

📚 Массивы и объекты
Научитесь хранить и обрабатывать коллекции данных. Поймёте разницу между объектами и массивами, научитесь их использовать.

🛠️ Методы массивов
Освоите мощные инструменты работы с массивами: push, pop, map, filter, forEach и другие.

📅 Работа с датами и временем
Разберётесь, как получать текущую дату, форматировать её и управлять временем в интерфейсе.

🖱️ События в браузере
Узнаете, как реагировать на действия пользователя — клики, ввод текста, перемещение мыши.

⌨️ Ввод данных от пользователя
Научитесь получать информацию из форм и обрабатывать пользовательский ввод в реальном времени.

🌿 DOM: работа с элементами страницы
Разберётесь, как JavaScript “видит” HTML, как находить, изменять и создавать элементы на лету.

🎯 Манипуляции с DOM
Углубитесь в управление элементами, измените их стиль, содержимое и структуру прямо из скрипта.

🧪 Практика и итог по JavaScript
Выполните большое практическое задание, собрав все навыки в одном проекте. Подведёте итоги и будете готовы к углублённому JS или фреймворкам.

💡 Зачем нужен React?
Разберётесь, почему React стал таким популярным. Узнаете, в чём его сила и когда стоит применять компонентный подход.

⚙️ Установка и настройка
Научитесь быстро запускать React-проекты: установка через create-react-app, структура проекта, начальная конфигурация.

🧩 Компоненты — сердце React
Познакомитесь с тем, как устроены компоненты, научитесь создавать свои, передавать в них данные и переиспользовать их.

🔧 Создание первого компонента
Сделаете свой первый полноценный компонент и отрисуете его на странице.

🔤 JSX: HTML внутри JavaScript
Узнаете, что такое JSX и как он работает. Научитесь смешивать HTML и JS, не теряя читаемости кода.

📃 Работа со списками
Научитесь отрисовывать списки элементов, использовать map и ключи (key) для оптимизации рендеринга.

📨 Пропсы: передача данных
Освоите передачу данных между компонентами с помощью props и поймёте, как строится “поток данных” в приложении.

🧠 Состояние компонента (state)
Разберётесь, как сохранять и изменять данные внутри компонентов. Освоите useState и основы реактивности.

🎯 Обработка событий
Научитесь реагировать на действия пользователя — клики, ввод текста и другие события через обработчики.

🎨 Стилизация компонентов
Узнаете, как подключать CSS к компонентам, использовать инлайн-стили и применять сторонние библиотеки для стилизации.

🛠️ Практика: мини-проект на React
Соберёте небольшой проект с использованием компонентов, props, состояния и стилей. Всё — как в настоящем интерфейсе.

✅ Итог по React
Закрепите знания и подготовитесь к изучению более сложных тем: роутинг, хуки, управление данными и архитектура приложений.

🔎 Что такое REST API и зачем он нужен?
Поймёте, что такое API, зачем он нужен в веб-разработке и как взаимодействуют клиент и сервер через HTTP-запросы.

📡 Основы HTTP-запросов
Разберётесь в типах запросов (GET, POST, PUT, DELETE), статусах ответа сервера и структуре заголовков.

📬 Знакомство с fetch()
Научитесь делать запросы с помощью встроенного метода fetch() и получать данные с внешнего сервера.

📥 Обработка данных из API
Освоите, как правильно “разобрать” полученный JSON и отобразить данные на странице — от карточек товаров до постов блога.

⚠️ Обработка ошибок при запросах
Научитесь выявлять и обрабатывать ошибки при взаимодействии с сервером: от сетевых проблем до некорректных ответов.

📤 Отправка данных на сервер
Разберётесь, как отправлять формы, комментарии и другие данные обратно на сервер с помощью fetch() и методов POST.

🛠️ Практика: мини-проект с API
Создадите небольшое приложение, которое подключается к реальному API, получает данные, отображает и отправляет информацию обратно.

🚀 Финальный проект с API
Соберёте полноценное приложение с динамическим интерфейсом и полноценным взаимодействием с REST API.

✅ Итоги работы с API
Закрепите полученные навыки, научитесь работать с любым внешним API и подготовитесь к разработке полноценных SPA и работе с backend.

🧠 Планирование структуры приложения
Научитесь думать как разработчик: разбиение интерфейса на компоненты, организация логики, управление состоянием и роутингом.

⚛️ Создание проекта на React с нуля
Соберёте полноценное приложение, используя весь стек знаний: HTML, CSS, JavaScript и React. Настроите окружение, создадите интерфейс и реализуете логику.

🌐 Интеграция с REST API
Подключите серверную часть: получите и отправите данные через API, обработаете ошибки и реализуете динамическое взаимодействие с пользователем.

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

📌 Зачем нужен TypeScript?
Разберётесь, почему многие проекты переходят на TS, в чём его сила и как он помогает писать надёжный код.

📦 Типизация переменных и функций
Научитесь задавать типы для переменных, аргументов, возвращаемых значений, объектов и массивов.

⚛️ Типизация React-компонентов
Разберётесь, как типизировать props, state, useState, useEffect, useRef и кастомные хуки.

🔄 Работа с типами API и данных
Научитесь описывать типы данных, приходящих с API, и корректно работать с ними в приложении.

🧩 Расширенные возможности TS
Изучите type, interface, union, intersection, utility types и узнаете, как избежать боли при типизации.

🧠 Зачем нужен глобальный state
Поймёте, когда useState уже не справляется, и нужно общее хранилище для данных.

🗂️ Основы Redux Toolkit
Изучите концепции store, slice, actions, reducers и createAsyncThunk.

🧩 Подключение Redux к React
Научитесь подключать Redux через Provider, использовать useSelector, useDispatch и работать с async logic.

🧩 Работа с API
React Query — работа с API.

🚦 Альтернатива: Zustand (легковесный Redux)
Познакомитесь с Zustand как более простым решением, подходящим для большинства проектов.

🧪 Проект: глобальное состояние в действии
Соберёте мини-приложение с авторизацией, корзиной или фильтрацией — с глобальным state.

🛣️ Основы маршрутизации
Изучите, как делить приложение на страницы, использовать BrowserRouter, Routes и Route.

📍 Навигация и динамические параметры
Освоите переходы между страницами, работу с useParams, useNavigate и URL-параметрами.

🔐 Защищённые маршруты (Private Routes)
Научитесь делать страницы доступными только после авторизации — с проверкой доступа и редиректами.

📝 React Hook Form
Научитесь быстро и удобно собирать данные с форм, подключать поля и управлять их состоянием.

✅ Валидация с ZoD
Добавите проверку полей с помощью Zod — от простых условий до вложенных структур.

📨 Работа с сервером: формы и API
Отправите данные формы на сервер, обрабатываете ошибки и отображаете обратную связь пользователю.

🧠 UX-анимации в React
Добавите приятные микровзаимодействия: loader, skeleton, hover-эффекты и состояния загрузки.

🛠️ Переиспользование логики: custom hooks
Создадите свои хуки, чтобы переиспользовать логику и избегать дублирования.

🧱 Модульная архитектура проекта
Научитесь организовывать директории, разбивать логику и UI, выносить логику в сервисы.

♻️ Паттерны проектирования
Паттерны проектирования (Фабрика, Синглтон, Декоратор) — применяем в React-компонентах.

♻️ Чистый код и принципы SOLID
Поймёте, как писать поддерживаемый и читаемый код на реальных проектах.

🐢 Проблемы производительности в React

1. Узнаете, где может тормозить приложение и почему.
2. Сложность алгоритмов (Big O) — оптимизация вычислений в компонентах.
3. Познакомитесь с React Performance DevTools.

🧠 Мемоизация и оптимизация рендеров
Разберётесь с React.memo, useMemo, useCallback и как они помогают в оптимизации.

🧵 Code splitting и lazy loading
Научитесь разбивать код по частям и подгружать компоненты только тогда, когда они нужны (React.lazy, Suspense).

🧬 Зачем и как тестировать UI
Познакомитесь с Jest и React Testing Library — напишете простые юнит- и интеграционные тесты.

⚙️ Тестирование компонентов и логики
Научитесь тестировать хуки, формы и взаимодействие компонентов с API.

📦 Работа с GitHub, CI/CD
Настроите автодеплой, научитесь работать с GitHub Actions или Vercel CI.

🚚 Сборка, деплой и настройка окружения

1. Узнаете, как собирать production-сборку, настраивать .env и выкладывать приложение.
2. Настройка eslint, prettier

🧩 UI-библиотеки (MUI, AntD, Tailwind)
Научитесь быстро собирать интерфейсы с готовыми компонентами, настраивать темы и адаптировать дизайн.

🔌 Работа с библиотекой Recharts
Интеграция со сторонними библиотеками recharts

🧩 REST API
Кросдоменные запросы (CORS), безопасность (JWT/OAuth). Настройка axios/fetch, обработка ошибок.

🧩 WebSockets
Real-time обновления (чаты, уведомления). Подключение Socket.io к React.

🧩 GraphQL
(базовые концепции) Отличия от REST, Apollo Client. Запросы и мутации в React-приложении.

Ты познакомишься с:

• реальным командным проектом и его архитектурой,
• стеком технологий, с которым работают в компаниях,
• своей командой (другие разработчики и твой наставник),
• системой задач, Git, Trello/Jira и другими инструментами продакшн-разработки.

✅ Ты поймёшь, как устроен разработческий процесс изнутри.

• ✅ Получишь первую задачу и начнёшь делать pull requests.

Теперь ты в деле. Начинаешь активно:

• разрабатывать фичи по ТЗ,
• править баги,
• проходить код-ревью от наставника,
• работать по принципам CI/CD,
• участвовать в спринтах и созвонах с командой.

✅ Ты уже чувствуешь себя частью IT-команды.

• ✅ Учишься быстро адаптироваться и самостоятельно решать задачи.

Ты уже не учишься — ты делаешь результат:

• берешь полноценные задачи,
• работаешь с базами данных, REST API, авторизацией, логированием,
• учишься оформлять техническую документацию,
• получаешь фидбэк по “боевому” коду.

В конце:

• финальный проект в портфолио,
• референс от наставника
• супер ценный реальный опыт разработки

✅ Уже не просто “умею React”, а “внедрял функциональность на продакшене”.