Продвинутый HTML / CSS
<Неделя 1>
- Семантика. Теги
- Свойство display
- Размеры элементов
- Основные единицы измерения
- Функция calc()
- Отступы
- Границы
- Свойство box-sizing
- Формы
- Подключение шрифтов. Свойство font
- Свойства для стилизации текста
- Favicon
<Неделя 2>
- Каскадность. Приоритет стилей
- Класс container
- Flexbox
- Цвета. Форматы rgb, rgba, hex
- Форматы изображений
- Свойство background
- Градиент
- Тень. Свойства box-shadow, text-shadow, filter: -shadow()
- Фильтры. Свойства filter и back -filter
- Svg спрайты
- Svg спрайты в React
- Списки - структура и стилизация. Счетчик
<Неделя 3>
- Grid +
- Свойство transition
- Анимации. Свойство animation и ключевые кадры
- Адаптив. Отзывчивая верстка. Медиазапросы
- Адаптив изображений
- Адаптив шрифтов
- Трансформации в css. Свойство transform
- Свойство overflow
- Позиционирование
- Псевдоэлементы
- Псевдоклассы
- Управление выделением текста
<Неделя 4>
- Таблицы. Структура и стилизация + position: sticky
- First / last / nth-child
- Свойство cursor
- 2 способа красиво обрезать текст
- 5 способов центрировать элемент
- 8 способов спрятать элемент
- Cтилизация скролла
- Инпут как в MUI. Верстка и стилизация
- Стилизация input type="checkbox / radio" (Like)
- Стилизация input type="range"
- Rating
- Комбинаторы

<Неделя 1>
Создаем проект для работы с React
- Узнаем, что такое React и зачем он нужен
- Поговорим о том, что такое CRUD-операции
- Создадим первый CRUD-проект на React: npx create-react-app
- Рассмотрим структуру проекта на React: модули, пакеты, JSX
- Разберемся, зачем нужны компоненты
- Проведем декомпозицию кода, выделим свой первый компонент
- Объект props: знакомимся и используем
-TypeScript: первые шаги
- JS: Типы данных. Особенности объектов как ссылочного типа данных. Копирование объектов. Синтаксис деструктуризации
<Неделя 2>
Стэйт-менеджмент
- Создаем state-приложения: useState
- Изменения в state: коллбэки
- Знакомимся с понятием иммутабельности
- Обновление интерфейса и изменение state: установим связь
- Узнаем, как рендерить списки: атрибут key
- Учим JS: методы массивов map и filter
- ES6: деструктуризация на практике
- И типизируем, типизируем, типизируем…
- JS: Методы массивов map, filter, sort и др. “Полифилы” методов массивов. Array. prototype как “хранилище” методов. + практика
<Неделя 3>
Обрабатываем события
- Добавляем пакеты в проект
- Наращиваем функционал проекта
- Обрабатываем события: onClick, onChange
- Продолжаем обрабатывать события: onKeyDown
-Встречаемся с объектом Event
- Продолжаем работу с TypeScript
- Разбираем, как сделать код "human-readable"
- JS: Методы массивов slice, splice, toSpliced, reduce + практика
<Неделя 4>
Развитие интерфейса
- Продолжаем развивать функционал проекта
- Учимся валидировать пользовательский ввод
- Local state – углубляем понимание
- Осваиваем коцепцию контролируемого элемента ввода (input)
- User-friendly interface: условное присвоение классов
- User-friendly interface: условный рендеринг
- JS: Синтаксис вычисляемых свойств объекта (“ассоциативный массив“), map-set, object. keys, object. values, object. entries

<Неделя 1>
Усложняем state: работаем со связанными структурами
- Узнаем вычисляемые свойства объектов
- Рассмотрим, как работать со связанными структурами данных
- Создадим более сложный state
- «Зарефакторим» функции для выполнения CRUD-операций с более сложной структурой данных
- Добавим новый функционал в наш проект Todo-list
- Продолжаем работать с TypeScript
<Неделя 2>
Делаем сложные компоненты
- Проведем декомпозицию React-компонентов
- Вспоминаем, что такое универсальные компоненты
- Создадим интересную форму для добавления сущностей в проект
- Создадим форму для редактирования
- Еще раз поговорим про локальный state
- Продолжаем использовать условный рендеринг
- Научимся делать сложные коллбэки
<Неделя 3>
Material UI: знакомимся
- Добавляем библиотеку в проект
- Изучаем библиотечные компоненты
- Material UI: стандартные элементы ввода Material UI: элементы сетки
<Неделя 4>
Готовимся к встрече с Redux
- Обсудим, какие задачи решает state-management
- Узнаем, что такое reducer и с чем его едят
- Познакомимся с понятием «чистой функции»
- Напишем свой первый reducer
- Научимся тестировать reducer с помощью библиотеки Jest
- Не забудем про action и action creator
- Продолжаем работать с TypeScript

<Неделя 1>
Подготовка к работе с Redux. Разработка tasksReducer в стиле TDD
- Action, action creator, reducer
- Части state для приложения Todolist
- Изменение state при добавлении Todolist
- Изменение state при удалении Todolist
- Передача данных от родительской к дочерней компоненте
- Алгоритм работы при удалении task
- Использование одного action для tasksReducer и todolistsReducer
- Удаление свойства из объекта. Способы
- JS: Обработка событий: интерфейс Event, оnclick и addEventListener (особенности использования), “всплывающие” события, свойства target и currentTarget, методы stopPropagation и preventDefault. Паттерны проектирования. Observer, Publisher-Subscriber. Примеры использования
<Неделя 2>
React useReducer, зачем нужен и как использовать. Redux - предназначение, использование
- Предназначение useReducer
- useState или useReducer?
- Использование useReducer в Todolists
- Предназначение Redux
- Три фундаментальных принципа Redux
- Однонаправленный поток данных в Redux
- Разница между redux и Flux
- Использование Redux в Todolists
- JS: Область видимости переменных. Замыкание: пример счетчик, почему и как работает. Сборка мусора. Рекурсия и стек вызова
<Неделя 3>
HOC. HOC React memo. Hook useCallback. Hook useMemo
- Рендер и ре-рендер компоненты
- Что приводит к ре-рендеру компоненты
- Что такое мемоизация?
- HOC - определение
- HOC React memo назначение
- Hook useCallback назначение
- Hook useMemo назначение
- Разница useMemo useCallback
- JS: Promise. Для чего нужны, какую проблему решают. Создание собственного Promise. Все тонкости работы с методами . then . catch . finally
<Неделя 4>
Добавляем библиотеки для тестирования и создания компонент
- Добавляем библиотеку Storybook в проект
- Проблемы при создании пользовательских интерфейсов
- Создание пользовательских интерфейсов в изоляции
- Что такое история?
- args, argsType для историй
- Декораторы
- Добавляем библиотеку Snapshot в проект
- Тестирование моментальных снимков с помощью Jest
- JS: Promise. Работа с методами . then . catch . finally на реальных примерах. Специальный синтаксис async/await. Обработка ошибок с помощью try и catch. Статические методы класса Promise

<Неделя 1>
Взаимодействие с сервером (Ajax Request, Axios)
- Разберем теорию REST API (типы запросов, Request, Response, коды ответа HTTP)
- Рассмотрим самую популярную библиотеку для взаимодействия с cервером Axios
- Применим CRUD-операции на практике
- Работа с Promise на практике
- Научимся архитектурно корректно писать код: вынесем его в DAL-уровень
- Разберем взаимодействие с TypeScript: научимся типизировать Ajax-запросы
- Рассмотрим "дженерики" (Generic Types) на практике
- JS: Структуры данных Stack/Queue. Событийный цикл (Eventloop): микрозадачи и макрозадачи. Решение практических задач
<Неделя 2>
Redux Thunk в деталях
- Разберем теорию (что такое Thunk, для чего нужна, какую проблему решает, Middleware)
- Разберем трехуровневую архитектуру UI-BLL-DAL
- Разберем для чего нужен Thunk Creator
- Перевод асинхронных операций в Thunk (внедрим BLL в проект)
- JS: Ключевое слово ‘this’, работа с this в функциях и методах объектов. Потеря контекста. Методы функций call, apply, bind. This в функциях конструкторах
<Неделя 3>
Обработка ошибок. Preloaders (отображение на UI)
- Научимся показывать Preloader перед запросом и убирать его, когда ответ получен
- Сделаем универсальный компонент для обработки ошибок и будем его показывать пользователю при возникновении ошибки
- Рассмотрим, как "дизаблить" (делать неактивными) кнопки/поля при запросе на сервер, чтобы пользователь не смог ничего сломать
- Проверка на ResultCode
- Обработка ошибок в Catch
- Напишем универсальную функцию для обработки ошибок
- Познакомимся с "дженериковой" функцией
- JS: Классы в JS. Для чего нужны, какие проблемы решают. Как создать собственный класс. Для чего нужна функция constructor() в классах. Приватность в классах. Геттеры и сеттеры (get/set). Статические методы класса
<Неделя 4>
Router, App, Initializing, Formik
- Теоретический блок про Cookie: что это, для чего нужен и как применяется на практике
- Разберем React-route-dom-v. 6 на практике (роуты, редиректы, обработка ошибки 404)
- Разберем библиотеку Formik (получение данных, валидация и обработка ошибок)
- Реализация авторизационного Flow (login, logout, authMe)
- JS: Прототипы в JS, proto/prototype. Все ли в JS объекты? Разница между proto и prototype. Прототипное наследование

<Неделя 1>
Prettier. Redux toolkit: configureStore / createSlice / extraReducers / селекторы
- Подключение и настройка prettier
- Настройка абсолютных импортов (baseUrl)
- Теория, внедрение redux-toolkit в проект
- Создание store configureStore, подключение reducers и middleware
- Создание слайсов createSlice. Взаимодействие с reducers
- Мутабельное изменение стейта immerJS. Разбор основных CRUD операций
- Применение extraReducers
- Best practice в работе с селекторами. Разбираем reselect (createSelector)
- createAction для создания action в стороне
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
<Неделя 2>
Thunks in redux toolkit / createAsyncThunk / objects vs enums / structure files as feature folders
- Работа с thunk / createAsyncThunk / Typescript
- Взаимодействие thunk с extraReducers
- Тесты в Redux toolkit
- Обработка ошибок / rejectWithValue
- Objects vs Enums
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
<Неделя 3>
Formik, работа с ошибками / thunkTryCatch utils / useActions / комментарии в коде
- Обработка локальных и глобальных ошибок в формах
- Отлавливание событий после завершения санки unwrap
- Избавление от дублирования кода (thunkTryCatch)
- Разбор и применение кастомного хука useActions
- Best practice по работе с комментариями в коде, JSDoc
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
<Неделя 4>
Utility Types / builder. addMatcher / декомпозиция и рефакторинг
- Utility Types (Partial, Omit, Pick) - применение на практике
- Разбираемся с builder. addMatcher и применяем на проекте
- Изучаем builder. addDefaultCase
- Структура приложения. Нейминг. Декомпозиция и рефакторинг
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket

<Неделя 1>
Создание и настройка проекта, Storybook, полиморфные компоненты
- Старт проекта на основе vite с помощью pnpm
- Настройка eslint, prettier, stylelint, конфигурация alias'ов, конфигурация IDE
- Установка и настройка Storybook
- Добавление css переменных на основе дизайн-файлов
- Полиморфные компоненты - теория и первый компонент
- Библиотеки Headless компонентов - теория
<Неделя 2>
Формы
- HTML-формы - теория
- Разбор преимуществ React-hook-form над HTML-формами
- Валидация форм - нативный способ
- Валидация форм - zod
- React-hook-form DevTools
<Неделя 3>
Роутинг и Redux Toolkit Query
- Настройка роутинга с помощью react-router-dom
- Защита роутов авторизацией
- Настройка rtk-query в проекте
- RTK Query: GET запросы (queries)
- RTK Query: POST/PUT/PATCH/DELETE запросы (mutations)
- RTK Query: Lazy Queries
<Неделя 4>
Аутентификация с помощью JWT токенов. Оптимистичные и пессимистичные обновления
- JWT-токены - теория
- Refresh token flow в RTK Query
- Оптимистичные обновления - теория
- Оптимистичные обновления в RTK Query
- Пессимистичные обновления - теория
- Пессимистичные обновления в RTK Query

1. Будете разрабатывать учебный продукт “INCTAGRAM” в полноценной команде, как на реальном проекте.
2. Наши HR-специалисты помогут улучшить ваше резюме, портфолио и сопроводительное письмо, а также получите советы как проходить рекрутерские интервью.
3. Сможете участвовать в сессиях с индивидуальным разбором вашей ситуации по поиску работы от карьерного ментора.
4. Подготовитесь к собеседованиям: поучаствуете в тренировочных собеседованиях и узнаете, насколько хорошо вы подготовлены к трудоустройству.
5. Мы отправим вас на реальный стартап, где вы сможете получить коммерческий опыт или оффер.