Станьте Front-end разработчиком уровня Middle+ [Тариф Самостоятельно] [it-incubator]
Для наших студентов мы разработали удобный личный кабинет с широким функционалом:
1 месяц. Продвинутый HTML / CSS
Подробнее:
<Неделя 1>
Подробнее:
<Неделя 1>
Создаём проект для работы с React
- JS: Типы данных. Особенности объектов как ссылочного типа данных. Копирование объектов. Синтаксис деструктуризации
<Неделя 2>
Стэйт-менеджмент
Обрабатываем события
Развитие интерфейса
Подробнее:
<Неделя 1>
Усложняем state: работаем со связанными структурами
Делаем сложные компоненты
Material UI: знакомимся
Готовимся к встрече с Redux, пишем тесты
Подробнее:
<Неделя 1>
Изучение Redux Toolkit
Декомпозируем код и настраиваем структуру приложения
Изучаем REST API, подключаем axios для запросов на сервер
Подключаем Prettier, работаем с переменными окружения и enum
Подробнее:
<Неделя 1>
Создание slices и thunk
create.asyncThunk, Loader
Обработка ошибок и их отображение на UI
React Router, React-hook-form, Zod
Подробнее:
<Неделя 1>
Auth flow / Initializing / localStorage / Axios interceptors / Protected routes
RTK query / query / mutation / Code Splitting
RTK query / Работа с cache / addMatcher / Skeletons / Обработка ошибок
RTK query / Advanced cache tags / Cache behavior / Optimistic update
Backend (nodejs) для frontend разработчиков
Подробнее:
<Неделя 1>
Express App / Rest Api / Express Router
Валидация / Базовая авторизация / DAL уровень
MongoDB CRUD
BLL уровень / сортировка / пагинация
Цена 74000 руб. (740 евро)
Для наших студентов мы разработали удобный личный кабинет с широким функционалом:
- Уроки с возможностью возвращаться к ним для повторения материала в любое время
- Календарь с расписанием всех занятий и менторской поддержки
- Домашние задания
- Экзамены
- Статистика прогресса обучения
- Плейлисты с видео-уроками
- Информация о стримах и других мероприятиях
- Работа над CV
1 месяц. Продвинутый HTML / CSS
Подробнее:
<Неделя 1>
- Семантика. Теги
- Свойство display
- Размеры элементов
- Основные единицы измерения
- Функция calc()
- Отступы
- Границы
- Свойство box-sizing
- Формы
- Подключение шрифтов. Свойство font
- Свойства для стилизации текста
- Favicon
- Каскадность. Приоритет стилей
- Класс container
- Flexbox
- Цвета. Форматы rgb, rgba, hex
- Форматы изображений
- Свойство background
- Градиент
- Тень. Свойства box-shadow, text-shadow, filter: drop-shadow()
- Фильтры. Свойства filter и backdrop-filter
- Svg спрайты
- Svg спрайты в React
- Списки - структура и стилизация. Счетчик
- Grid +
- Свойство transition
- Анимации. Свойство animation и ключевые кадры
- Адаптив. Отзывчивая верстка. Медиазапросы
- Адаптив изображений
- Адаптив шрифтов
- Трансформации в css. Свойство transform
- Свойство overflow
- Позиционирование
- Псевдоэлементы
- Псевдоклассы
- Управление выделением текста
- Таблицы. Структура и стилизация + 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-операции
- Создадим первый проект на React со сборщиком Vite и пакетным менеджером pnpm
- Рассмотрим структуру проекта на React: модули, пакеты, JSX
- Разберёмся, зачем нужны компоненты
- Проведём декомпозицию кода, выделим свой первый компонент
- Объект props: знакомимся и используем
- JS: Типы данных. Особенности объектов как ссылочного типа данных. Копирование объектов. Синтаксис деструктуризации
<Неделя 2>
Стэйт-менеджмент
- Создаем state-приложения: useState
- Изменения в state: коллбэки
- Знакомимся с понятием иммутабельности
- Обновление интерфейса и изменение state: установим связь
- Узнаем, как рендерить списки: атрибут key
- Учим JS: методы массивов map и filter
- ES6: деструктуризация на практике
- И типизируем, типизируем, типизируем…
- JS: Методы массивов map, filter, sort и др. “Полифилы” методов массивов. Array.prototype как “хранилище” методов. + практика
Обрабатываем события
- Добавляем пакеты в проект
- Наращиваем функционал проекта
- Обрабатываем события: onClick, onChange
- Продолжаем обрабатывать события: onKeyDown
- Продолжаем работу с TypeScript
- Разбираем, как сделать код "human-readable"
- JS: Методы массивов slice, splice, toSpliced, reduce + практика
Развитие интерфейса
- Продолжаем развивать функционал проекта
- Учимся валидировать пользовательский ввод
- 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
Делаем сложные компоненты
- Проведём декомпозицию React-компонентов
- Вспоминаем, что такое универсальные компоненты
- Создадим интересную форму для добавления сущностей в проект
- Создадим форму для редактирования
- Ещё раз поговорим про локальный state
- Продолжаем использовать условный рендеринг
- Научимся делать сложные коллбэки
Material UI: знакомимся
- Добавляем библиотеку в проект
- Изучаем библиотечные компоненты
- Material UI: стандартные элементы ввода Material UI: элементы сетки
- Material UI: изменение стилей экземпляра компонента
- Material UI: применение переиспользуемых компонентов
- Material UI: создание, применение и изменение темы приложения
Готовимся к встрече с Redux, пишем тесты
- Обсудим, какие задачи решает state-management
- Узнаем, что такое reducer и с чем его едят
- Познакомимся с понятием «чистой функции»
- Напишем первую функцию-reducer
- Изучим, что такое action и action creator
- Научимся тестировать reducer с помощью библиотеки Vitest
- Предназначение useReducer
- useState или useReducer?
- Использование useReducer в Todolists
- Продолжаем работать с TypeScript
Подробнее:
<Неделя 1>
Изучение Redux Toolkit
- Теория, внедрение Redux Toolkit в проект
- Три фундаментальных принципа Redux
- Однонаправленный поток данных в Redux
- Мутабельное изменение стейта immerJS. Разбор основных CRUD операций
- createAction для создания action
- createReducer для создания reducer
- Использование одного action для tasksReducer и todolistsReducer
- Функции селекторы
- Типизация хуков из react-redux
- JS: Обработка событий: интерфейс Event, оnclick и addEventListener (особенности использования), “всплывающие” события, свойства target и currentTarget, методы stopPropagation и preventDefault. Паттерны проектирования. Observer, Publisher-Subscriber. Примеры использования
Декомпозируем код и настраиваем структуру приложения
- Создание reducer для управления состоянием темы приложения
- Настройка абсолютных импортов (baseUrl)
- Декомпозиция кода приложения
- Настройка структуры проекта по feature-folder
- JS: Область видимости переменных. Замыкание: пример счётчик, почему и как работает. Сборка мусора. Рекурсия и стек вызова
Изучаем REST API, подключаем axios для запросов на сервер
- Разберём теорию REST API (типы запросов, Request, Response, коды ответа HTTP)
- Рассмотрим самую популярную библиотеку для взаимодействия с сервером Axios
- Применим CRUD-операции для тудулистов на практике
- Работа с Promise на практике
- Научимся архитектурно корректно писать код: вынесем его в DAL-уровень
- Создадим axios instance для исключения дублирования кода
- Разберём взаимодействие с TypeScript: научимся типизировать Ajax-запросы
- Рассмотрим "дженерики" (Generic Types) на практике
- Упростим импорты в приложении с index.ts
- JS: Promise. Для чего нужны, какую проблему решают. Создание собственного Promise. Все тонкости работы с методами .then .catch .finally
Подключаем Prettier, работаем с переменными окружения и enum
- Подключение и настройка prettier
- Работа с переменными окружения .env
- Применим CRUD-операции для тасок на практике
- Изучим и поработаем с enum
- Typescript utility types - применение на практике
- JS: Promise. Работа с методами .then .catch .finally на реальных примерах. Специальный синтаксис async/await. Обработка ошибок с помощью try и catch. Статические методы класса Promise
Подробнее:
<Неделя 1>
Создание slices и thunk
- Создание слайсов с createSlice. Взаимодействие с reducers
- Применение extraReducers
- Best practice в работе с селекторами. Разбираем reselect (createSelector)
- Рефакторинг логики configureStore
- Разберём теорию (что такое Thunk, для чего нужна, какую проблему решает, Middleware)
- Разберём трехуровневую архитектуру UI-BLL-DAL
- Работа с thunk / createAsyncThunk
- JS: Структуры данных Stack/Queue. Событийный цикл (Eventloop): микрозадачи и макрозадачи. Решение практических задач
create.asyncThunk, Loader
- Изучение buildCreateSlice и создание thunk по новому синтаксису с create.asyncThunk
- Изучение жизненных циклов thunk (pending, fulfilled, rejected, settled)
- Напишем thunk для работы с тасками
- Научимся показывать Loader во время запросов на сервер и убирать его, когда ответ получен
- Написание тестов для thunk
- JS: Ключевое слово ‘this’, работа с this в функциях и методах объектов. Потеря контекста. Методы функций call, apply, bind. This в функциях конструкторах
Обработка ошибок и их отображение на UI
- Рассмотрим, как настроить disable (делать неактивными) кнопки/поля при запросе на сервер, чтобы пользователь не мог ничего сломать
- Сделаем универсальный компонент для обработки ошибок и будем его показывать пользователю при возникновении ошибки
- Проверка на ResultCode
- Обработка ошибок в Catch
- Напишем универсальную функцию для обработки ошибок
- Познакомимся с "дженериковой" функцией
- JS: Классы в JS. Для чего нужны, какие проблемы решают. Как создать собственный класс. Для чего нужна функция constructor() в классах. Приватность в классах. Геттеры и сеттеры (get/set). Статические методы класса
React Router, React-hook-form, Zod
- Разберем React Router на практике (роуты, редиректы, обработка ошибки 404)
- Разберем библиотеку React-hook-form (получение данных, валидация и обработка ошибок)
- Валидация форм и ответа сервера с Zod
- JS: Прототипы в JS, proto/prototype. Все ли в JS объекты? Разница между proto и prototype. Прототипное наследование
Подробнее:
<Неделя 1>
Auth flow / Initializing / localStorage / Axios interceptors / Protected routes
- Реализация авторизационного Flow (login, logout, authMe)
- Изучение useNavigate и Navigate
- Работа с localStorage и axios interceptors
- Создание Protected routes
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
RTK query / query / mutation / Code Splitting
- Изучение RTK query
- Работа с query и вариантами условного получения данных
- Работа с mutation и вариантами обновления данных
- Уменьшение начального размера бандла с injectEndpoints
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
RTK query / Работа с cache / addMatcher / Skeletons / Обработка ошибок
- Работа с cache: updateQueryData, resetApiState, invalidateTags
- Настройка Loader с addMatcher
- Реализация Skeletons
- Изучение вариантов обработки ошибок с RTK query
- Глобальная обработка ошибок с помощью baseQuery
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
RTK query / Advanced cache tags / Cache behavior / Optimistic update
- Изучение на практике advanced cache tags
- Внедрение пагинации для изучения cache behavior
- isLoading vs isFetching
- Optimistic update
- JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
Backend (nodejs) для frontend разработчиков
Подробнее:
<Неделя 1>
Express App / Rest Api / Express Router
- Simple express app with typescript and nodemon
- Deploy to Heroku for simple TS Express App
- Deploy to Heroku via CLI
- Express and REST API
- Swagger
- Express Router
Валидация / Базовая авторизация / DAL уровень
- DataAccessLayer - Repositories
- Express middleware, chain of responsibility
- Input validation, express-validator
- Basic Authorization
MongoDB CRUD
- MongoDB, mongod and mongo shell, Studio 3T
- MongoDB CRUD
- Eventloop, async-await
- NodeJS + mongoDB
BLL уровень / сортировка / пагинация
- Business Logic Layer
- QueryRepository, основы CQS, CQRS
- Sorting, сортировка
- Pagination
- Уроки в записи
- Неограниченный по времени доступ к записям
- Чат-бот для мотивации в учёбе
- Комьюнити студентов
- 1 час индивидуальной менторской поддержки + возможность купить дополнительно со скидкой
- Домашние задания и экзамены
- Отработка знаний на To-Do list
https://it-incubator.io/education/front-end