Минск
Войти
 

Обучение Frontend-разработке

Организатор: IT-Incubator
Онлайн

Длительность: 12 месяцев
Начало: 17 июня 2024
Мы IT-компания и школа IT-Incubator, созданная разработчиками. Поэтому мы используем глубокий инженерный подход к обучению, создающий сильных специалистов:

- обучают действующие разработчики
- занятия проходят онлайн
- ежедневная менторская поддержка 1 на 1 в Zoom
- собственная образовательная платформа, дружелюбный и полезный чат-бот
- активное сообщество в Телеграм
- возможность обучаться в своем темпе
- учебная стажировка + мощная помощь с трудоустройством

Наш стек технологий:
TypeScript, JavaScript, React, Redux-Toolkit, RTK Query, REST API, HTML, CSS, Styled Components, Material UI, Radix, Figma, Storybook, React Router Dom, React Hook Form, Formik, Zod, Unit tests, Git, GitHub, ESLint, Prettier, Redux-Saga, WebSocket, Node JS, React Native, Angular.

Дополнительные возможности:

Курс IT-английского: профессиональная лексика, разговорные навыки, подготовка к собеседованиям.
Курс Computer Science: глубокие знания, ориентация в фундаменте, подготовка к техническим интервью.

Требуемый начальный уровень знаний - база по html, css, js; знать, уметь, пользоваться GitHub, Codewars, freeCodeCamp; пользователь компьютера на хорошем уровне.
Человек в группе: 50.
 

Результат / будет знать, уметь

  • После прохождения нашего обучения и стажировки вы будете Front-end разработчиком уровня Middle.
    Данный курс - с возможностью дальнейшего трудоустройства.

    Контакты

    +375 44 565 7493 (A1)

    it-incubator.io

    В начале беседы сообщите, что нашли информацию на Все Курсы Бай.

    Программа

    Спринт 018:00

    Продвинутый 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
    - Комбинаторы

    Спринт 118:00

    <Неделя 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

    Спринт 218:00

    <Неделя 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

    Спринт 318:00

    <Неделя 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

    Спринт 418:00

    <Неделя 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. Прототипное наследование

    Спринт 518:00

    <Неделя 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

    Спринт 618:00

    <Неделя 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. Мы отправим вас на реальный стартап, где вы сможете получить коммерческий опыт или оффер.

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

    Пользуясь сайтом вы принимаете Условия пользования сайтом. Для лучшего пользовательского опыта используются файлы cookies. Подробнее

    Файлы cookies (куки) – это небольшие текстовые файлы, которые временно сохраняются на вашем устройстве, когда вы посещаете веб-сайты. Они помогают веб-сайтам запоминать ваши предпочтения, интересы и действия, чтобы улучшить ваш опыт просмотра. Файлы cookies также могут защищать вас от мошенничества и улучшать безопасность веб-сайтов. Вы можете управлять файлами cookies в настройках вашего браузера или устройства.

    У нас на сайте файлы cookies используются для сохранения пользовательских настроек и для маркетинговых целей.

    Вы всегда можете удалить файлы cookies. Например, перейдите в настройки конфиденциальности вашего браузера или в быстром поиске настроек введите 'cookie' или 'куки', вам должно вывести опции управления данными, где вы сможете при необходимости очистить файлы.