Складчина: Станьте Front-end разработчиком уровня Middle+ [Тариф Самостоятельно] [it-incubator]
Для наших студентов мы разработали удобный личный кабинет с широким функционалом:
- Уроки с возможностью возвращаться к ним для повторения материала в любое время
- Календарь с расписанием всех занятий и менторской поддержки
- Домашние задания
- Экзамены
- Статистика прогресса обучения
- Плейлисты с видео-уроками
- Информация о стримах и других мероприятиях
- Работа над CV
Программа обучения:
1 месяц. Продвинутый HTML / CSS
Спойлер: Подробнее: <Неделя 1>
— Семантика. Теги
— Свойство display
— Размеры элементов
— Основные единицы измерения
— Функция calc()
— Отступы
— Границы
— Свойство box-sizing
— Формы
— Подключение шрифтов. Свойство font
— Свойства для стилизации текста
— Favicon
<Неделя 2>
— Каскадность. Приоритет стилей
— Класс container
— Flexbox
— Цвета. Форматы rgb, rgba, hex
— Форматы изображений
— Свойство background
— Градиент
— Тень. Свойства box-shadow, text-shadow, filter: drop-shadow()
— Фильтры. Свойства filter и backdrop-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
— Комбинаторы
2 месяц. Props / useState / map, filter / Обработка событий / Условный рендеринг
Спойлер: Подробнее: <Неделя 1>
Создаём проект для работы с React
— Узнаем, что такое React и зачем он нужен
— Поговорим о том, что такое CRUD-операции
— Создадим первый проект на React со сборщиком Vite и пакетным менеджером pnpm
— Рассмотрим структуру проекта на 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
3 месяц. Ассоциативный массив / Универсальные компоненты / Material UI / TDD, reducer, action creator, useReducer
Спойлер: Подробнее: <Неделя 1>
Усложняем state: работаем со связанными структурами
— Узнаем вычисляемые свойства объектов
— Рассмотрим, как работать со связанными структурами данных
— Создадим более сложный state
— «Зарефакторим» функции для выполнения CRUD-операций с более сложной структурой данных
— Добавим новый функционал в наш проект Todo-list
— Продолжаем работать с TypeScript
<Неделя 2>
Делаем сложные компоненты
— Проведём декомпозицию React-компонентов
— Вспоминаем, что такое универсальные компоненты
— Создадим интересную форму для добавления сущностей в проект
— Создадим форму для редактирования
— Ещё раз поговорим про локальный state
— Продолжаем использовать условный рендеринг
— Научимся делать сложные коллбэки
<Неделя 3>
Material UI: знакомимся
— Добавляем библиотеку в проект
— Изучаем библиотечные компоненты
— Material UI: стандартные элементы ввода Material UI: элементы сетки
— Material UI: изменение стилей экземпляра компонента
— Material UI: применение переиспользуемых компонентов
— Material UI: создание, применение и изменение темы приложения
<Неделя 4>
Готовимся к встрече с Redux, пишем тесты
— Обсудим, какие задачи решает state-management
— Узнаем, что такое reducer и с чем его едят
— Познакомимся с понятием «чистой функции»
— Напишем первую функцию-reducer
— Изучим, что такое action и action creator
— Научимся тестировать reducer с помощью библиотеки Vitest
— Предназначение useReducer
— useState или useReducer?
— Использование useReducer в Todolists
— Продолжаем работать с TypeScript
4 месяц. Redux Toolkit / Декомпозиция кода и структура приложения / REST API, axios / Prettier, env, enum
Спойлер: Подробнее: <Неделя 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. Примеры использования
<Неделя 2>
Декомпозируем код и настраиваем структуру приложения
— Создание reducer для управления состоянием темы приложения
— Настройка абсолютных импортов (baseUrl)
— Декомпозиция кода приложения
— Настройка структуры проекта по feature-folder
— JS: Область видимости переменных. Замыкание: пример счётчик, почему и как работает. Сборка мусора. Рекурсия и стек вызова
<Неделя 3>
Изучаем 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
<Неделя 4>
Подключаем Prettier, работаем с переменными окружения и enum
— Подключение и настройка prettier
— Работа с переменными окружения .env
— Применим CRUD-операции для тасок на практике
— Изучим и поработаем с enum
— Typescript utility types — применение на практике
— JS: Promise. Работа с методами .then .catch .finally на реальных примерах. Специальный синтаксис async/await. Обработка ошибок с помощью try и catch. Статические методы класса Promise
5 месяц. Slices / Thunk / Loader / Обработка ошибок / Routing с React Router / Работа с формой с React-hook-form / Валидация встроенная и с Zod
Спойлер: Подробнее: <Неделя 1>
Создание slices и thunk
— Создание слайсов с createSlice. Взаимодействие с reducers
— Применение extraReducers
— Best practice в работе с селекторами. Разбираем reselect (createSelector)
— Рефакторинг логики configureStore
— Разберём теорию (что такое Thunk, для чего нужна, какую проблему решает, Middleware)
— Разберём трехуровневую архитектуру UI-BLL-DAL
— Работа с thunk / createAsyncThunk
— JS: Структуры данных Stack/Queue. Событийный цикл (Eventloop): микрозадачи и макрозадачи. Решение практических задач
<Неделя 2>
create.asyncThunk, Loader
— Изучение buildCreateSlice и создание thunk по новому синтаксису с create.asyncThunk
— Изучение жизненных циклов thunk (pending, fulfilled, rejected, settled)
— Напишем thunk для работы с тасками
— Научимся показывать Loader во время запросов на сервер и убирать его, когда ответ получен
— Написание тестов для thunk
— JS: Ключевое слово ‘this’, работа с this в функциях и методах объектов. Потеря контекста. Методы функций call, apply, bind. This в функциях конструкторах
<Неделя 3>
Обработка ошибок и их отображение на UI
— Рассмотрим, как настроить disable (делать неактивными) кнопки/поля при запросе на сервер, чтобы пользователь не мог ничего сломать
— Сделаем универсальный компонент для обработки ошибок и будем его показывать пользователю при возникновении ошибки
— Проверка на ResultCode
— Обработка ошибок в Catch
— Напишем универсальную функцию для обработки ошибок
— Познакомимся с "дженериковой" функцией
— JS: Классы в JS. Для чего нужны, какие проблемы решают. Как создать собственный класс. Для чего нужна функция constructor() в классах. Приватность в классах. Геттеры и сеттеры (get/set). Статические методы класса
<Неделя 4>
React Router, React-hook-form, Zod
— Разберем React Router на практике (роуты, редиректы, обработка ошибки 404)
— Разберем библиотеку React-hook-form (получение данных, валидация и обработка ошибок)
— Валидация форм и ответа сервера с Zod
— JS: Прототипы в JS, proto/prototype. Все ли в JS объекты? Разница между proto и prototype. Прототипное наследование
6 месяц. Auth flow / Protected routes / RTK query / RTK query advanced features
Спойлер: Подробнее: <Неделя 1>
Auth flow / Initializing / localStorage / Axios interceptors / Protected routes
— Реализация авторизационного Flow (login, logout, authMe)
— Изучение useNavigate и Navigate
— Работа с localStorage и axios interceptors
— Создание Protected routes
— JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
<Неделя 2>
RTK query / query / mutation / Code Splitting
— Изучение RTK query
— Работа с query и вариантами условного получения данных
— Работа с mutation и вариантами обновления данных
— Уменьшение начального размера бандла с injectEndpoints
— JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
<Неделя 3>
RTK query / Работа с cache / addMatcher / Skeletons / Обработка ошибок
— Работа с cache: updateQueryData, resetApiState, invalidateTags
— Настройка Loader с addMatcher
— Реализация Skeletons
— Изучение вариантов обработки ошибок с RTK query
— Глобальная обработка ошибок с помощью baseQuery
— JS: Разработка игры на чистом JavaScript + ООП, тесты, WebSocket
<Неделя 4>
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
<Неделя 2>
Валидация / Базовая авторизация / DAL уровень
— DataAccessLayer — Repositories
— Express middleware, chain of responsibility
— Input validation, express-validator
— Basic Authorization
<Неделя 3>
MongoDB CRUD
— MongoDB, mongod and mongo shell, Studio 3T
— MongoDB CRUD
— Eventloop, async-await
— NodeJS + mongoDB
<Неделя 4>
BLL уровень / сортировка / пагинация
— Business Logic Layer
— QueryRepository, основы CQS, CQRS
— Sorting, сортировка
— Pagination
Тариф Самостоятельно
- Уроки в записи
- Неограниченный по времени доступ к записям
- Чат-бот для мотивации в учёбе
- Комьюнити студентов
- 1 час индивидуальной менторской поддержки + возможность купить дополнительно со скидкой
- Домашние задания и экзамены
- Отработка знаний на To-Do list
Цена 74000 руб. (740 евро)