Обучение Frontend-разработке до трудоустройства
Без жёстких дедлайнов и лимитов по срокам обучения.
Важно понимать, что программирование - это рутина, лишь немного разбавленная творчеством и ощущением созидания.
Быстрее стать востребованным на рынке, даже минимально квалифицированным специалистом, практически невозможно.
- Уроки с возможностью возвращаться к ним для повторения материала в любое время
- Календарь с расписанием всех занятий и менторской поддержки
- Домашние задания
- Экзамены
- Статистика прогресса обучения
- Плейлисты с видео-уроками
- Информация о стримах и других мероприятиях
- Работа над CV
Здесь вы всегда можете задать вопрос и обсудить что угодно по программе обучения. Учащиеся на более поздних этапах с радостью помогают тем, кто двигается следом за ними.
Это даёт дополнительную возможность всем студентам "обучаться, обучая", получать всестороннюю поддержку на всех этапах и мотивирует двигаться дальше.
- Узнаем, что такое React и зачем он нужен
- Поговорим о том, что такое CRUD-операции
- Создадим первый CRUD-проект на React: npx create-react-app
- Рассмотрим структуру проекта на React: модули, пакеты, JSX
- Разберёмся, зачем нужны компоненты
- Проведём декомпозицию кода, выделим свой первый компонент
- Объект props: знакомимся и используем
- TypeScript: первые шаги
- Cоздаём state-приложения: useState
- Изменения в state: коллбэки
- Знакомимся с понятием иммутабельности
- Обновление интерфейса и изменение state: установим связь
- Узнаем, как рендерить списки: атрибут key
- Учим JS: методы массивов map и filter
- ES6: деструктуризация на практике
- И типизируем, типизируем, типизируем…
- Добавляем пакеты в проект
- Наращиваем функционал проекта
- Обрабатываем события: onClick, onChange
- Продолжаем обрабатывать события: onKeyDown
- Встречаемся с объектом Event
- Продолжаем работу с TypeScript
- Разбираем, как сделать код "human-readable"
- Продолжаем развивать функционал проекта
- Учимся валидировать пользовательский ввод
- Local state – углубляем понимание
- Осваиваем коцепцию контролируемого элемента ввода (input)
- User-friendly interface: условное присвоение классов
- User-friendly interface: условный рендеринг
- Узнаем вычисляемые свойства объектов
- Рассмотрим, как работать со связанными структурами данных
- Создадим более сложный state
- «Зарефакторим» функции для выполнения CRUD-операций с более сложной структурой данных
- Добавим новый функционал в наш проект Todo-list
- Продолжаем работать с TypeScript
- Проведём декомпозицию React-компонентов
- Вспоминаем, что такое универсальные компоненты
- Создадим интересную форму для добавления сущностей в проект
- Создадим форму для редактирования
- Ещё раз поговорим про локальный state
- Продолжаем использовать условный рендеринг
- Научимся делать сложные коллбэки
- Добавляем библиотеку в проект
- Изучаем библиотечные компоненты
- Material UI: стандартные элементы ввода
- Material UI: элементы сетки
- Обсудим, какие задачи решает state-management
- Узнаем, что такое reducer и с чем его едят
- Познакомимся с понятием «чистой функции»
- Напишем свой первый reducer
- Научимся тестировать reducer с помощью библиотеки Jest
- Не забудем про action и action creator
- Продолжаем работать с TypeScript
Неделя 2: React useReducer Hook, Redux
Неделя 3: Оптимизация рендеринга React-компонентов
Неделя 4: Введение в Storybook для React; тестирование React-компонентов (Snapshot/Screenshot)
- Разберём теорию REST API (типы запросов, Request, Response, коды ответа HTTP)
- Рассмотрим самую популярную библиотеку для взаимодействия с cервером Axios
- Применим CRUD-операции на практике
- Работа с Promise на практике
- Научимся архитектурно корректно писать код: вынесем его в DAL-уровень
- Разберём взаимодействие с TypeScript: научимся типизировать Ajax-запросы
- Рассмотрим "дженерики" (Generic Types) на практике
- Разберём теорию (что такое Thunk, для чего нужна, какую проблему решает, Middleware)
- Разберём трехуровневую архитектуру UI-BLL-DAL
- Разберём для чего нужен Thunk Creator
- Перевод асинхронных операций в Thunk (внедрим BLL в проект)
- Научимся показывать Preloader перед запросом и убирать его, когда ответ получен
- Сделаем универсальный компонент для обработки ошибок и будем его показывать пользователю при возникновении ошибки
- Рассмотрим, как "дизаблить" (делать неактивными) кнопки/поля при запросе на сервер, чтобы пользователь не смог ничего сломать
- Проверка на ResultCode
- Обработка ошибок в Catch
- Напишем универсальную функцию для обработки ошибок
- Познакомимся с "дженериковой" функцией
- Теоретический блок про Cookie: что это, для чего нужен и как применяется на практике
- Разберем React-route-dom-v.6 на практике (роуты, редиректы, обработка ошибки 404)
- Разберем библиотеку Formik (получение данных, валидация и обработка ошибок)
- Реализация авторизационного Flow (login, logout, authMe)
- Создание нового приложения на RTK
- Настройка prettier
- Настройка абсолютных импортов (baseUrl)
- Структура папок в Redux приложении
- Создание store configureStore, подключение reducers и middleware
- Создание слайсов createSlice. Взаимодействие с reducers
- Работа с thunk / createAsyncThunk / Typescript
- Взаимодействие thunk с extraReducers
- Работа с таблицами: пагинация, сортировка, search (debounce, throttle), слайдер
- Обработка ошибок / rejectWithValue
- react-toastify для показа нотификаций
- Избавление от дублирования кода (thunkTryCatch)
- Разбираемся с builder.addMatcher и применяем на проекте
- Изучаем builder.addDefaultCase
- createAction для создания action в стороне
- Отлавливание событий после завершения санки unwrap
- Работа с модальными окнами. React children на практике. Процесс обучения по карточкам.
- Мутабельное изменение стейта immerJS. Разбор основных CRUD операций
- Best practice в работе с селекторами
- Разбираем reselect (createSelector)
- Разбор и применение кастомного хука useActions
- Тесты в RTK
- Best practice по работе с комментариями в коде, JSDoc
- Objects vs Enums
- Работа с файлами. Base64 формат на практике. Iframe.
- RTK query - теория
- Query запросы
- Mutation запросы
- Обновление данных
- Работа с кешированием
- Обработка ошибок
- Optimistic update
Неделя 2: создание форм с помощью react-hook-form и универсальных компонент, разбор ключевых ux паттернов форм. Создание таблиц, разбор соответствующих ui/ux паттернов
Неделя 3: подключение redux-toolkit query, паттерны фечтинга данных.
Неделя 4: сборка проекта на основе подготовленных компонент с использованием полученных знаний.
- Помощь и консультации в составлении CV
- Консультации по заполнению аккаунтов на платформах поиска работы
- Тренировки собеседований/помощь в самопрезентации перед HR
- Организация событий с участием тех. лидов/HR и проведение собеседований с ними
- Рекомендации выпускников в компании и стартап-проекты
- Семантика. Теги
- Свойство 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
- Комбинаторы
Неделя 2: Делаем наш небольшой ToDo-list (проект), чтобы привыкнуть к синтаксису
Неделя 3: Знакомимся с навигацией в React Native (плоской и вложенной)
Неделя 4: Работаем с REST API в React Native; закрепляем синтаксис и навигацию
- Знакомство с Angular
- Старт приложения, общая структура
- Создание компонента
- Варианты работы с Component (prefix, template, styles)
- Подключение SCSS. Миграция приложения с CSS на SCSS
- Настройка Prettier, Eslint, editorСonfig
- Интерполяция и связывания (property, event, two-way)
- Передача данных между родительскими и дочерними компонентами (Input, Output)
- Директивы (NgFor, NgIf, NgSwitch, NgClass, NgStyle)
- Пайпы (pipes)
- Сервисы. Dependency injection. RxJS
- Взаимодействие с сервером (HTTP)
- Работа с формами. Reactive forms
- Routing
- Модули. Структура папок и приложения. Lazy loading
- 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
- DataAccessLayer - Repositories
- Express middleware, chain of responsibility
- Input validation, express-validator
- Basic Authorization
- MongoDB, mongod and mongo shell, Studio 3T
- MongoDB CRUD
- Eventloop, async-await
- NodeJS + mongoDB
- Business Logic Layer
- QueryRepository, основы CQS, CQRS
- Data-mapping, layers
- Sorting, сортировка
- Pagination
После курса вы с легкостью будете общаться на английском языке во время собеседования в IT-компании, вам будет проще понимать техническую документацию к проекту, искать информацию в сети на английском языке.
Есть подгруппы для разного уровня подготовки:
English Basic и English Advanced
Отзывы выпускников
Глеб Горовой
Привет, меня зовут Глеб, 25 лет.
В прошлом работал барменом, строителем. Пришел учиться в IT-incubator с нуля, трудностей в ходе учебы не испытывал, занимался каждый день первые два месяца , потом чуть реже. Проучился 7 месяцев, немного застопорился в четверге, доделывал его вместе с пятницей( очень нехотелось оставаться на второй круг).
На первую работу устроился на 500$ в 2021 году. Это был стартап в сфере обучения, кросплатформенные приложения.
Благодарен Инкубатору за предоставленую информацию и их подходы к обучения ( понимал, что есть все в интернете, но в первую очередь пришел за менторством и доп мотивацией ). Кстати, под конец обучения, были мысли уйти с этой професии после того как отработаю потраченные деньги, но слава богу остыл и не сделал такой ошибки. Беспорно сейчас тяжелее с трудоустройством, но все же даже в мою текущую компанию приходят иногда новички, поэтому стоит идти до конца.
1. "Изучаем HTML, XHTML и CSS", Эрик Фримен,
2. "JavaScript для детей", Ник Морган
Если у вас ещё нет никаких знаний HTML, CSS и JavaScript, мы рекомендуем обязательно прочитать две книги:
- "Изучаем HTML, XHTML и CSS", Эрик Фримен
- "JavaScript для детей", Ник Морган
Стек технологий: TypeScript, React, Redux-Toolkit, React-Query, Storybook, Unit Tests, REST API, WebSocket, Formik. Также прорабатываем знания HTML/CSS/JS и проходим основы Backend.
Более подробно ознакомиться с нашей программой обучения Frontend-разработки можно здесь.
«Понедельник»: два раза в неделю – понедельник с 18:00 до 22:00, воскресенье с 19:00 до 21:00
«Вторник»: два раза в неделю - вторник с 18:00 до 22:00, четверг с 19:00 до 21:00
«Среда»: два раза в неделю - среда с 18:00 до 22:00, четверг с 19:00 до 21:00
«Четверг»: два раза в неделю - четверг с 18:00 до 22:00, среда с 19:00 до 21:00
«Пятница»: пятница с 18:00 до 22:00
«Суббота»: пятница с 18:00 до 22:00
Все занятия записываются и в любое время доступны для студентов в личном кабинете нашей обучающей платформы.
Присутствие на занятиях не является обязательным условием для успешного прохождения нашей программы (например, если рабочий график в какие-то дни совпадает с графиком обучения). Но, разумеется, это крайне желательно и полезно для самого студента – на занятии всегда есть возможность задать вопрос преподавателю, получить обратную связь от него, послушать вопросы других студентов и ответы на них и т.д.
Таким образом, у всех наших студентов есть возможность пройти обучение в комфортном для себя темпе. При выполнении урока быстрее можно перейти к следующему уроку раньше группы. И так же, при необходимости, можно повторно пройти какой-то один или несколько этапов.
После каждой недели обучения студенты сдают небольшие экзамены. Также у нас есть чат-бот, который регулярно задаёт вопросы по программе обучения и просит присылать отчёты. Всё это помогает нашим студентам постоянно быть «в тонусе» и лучше понимать, насколько хорошо освоена программа определённой темы и этапа обучения.
После того, как Песочница успешно пройдена, у вас будет возможность оплатить обучение по ссылке в личном кабинете.
Но если вы уверены в своей подготовке и готовы начать обучение, то нужно лишь связаться с нашим менеджером в Telegram.
С подробностями рассрочки можете ознакомиться здесь
Рекомендуем обучаться не менее 30 часов в неделю. Если такой возможности нет, программу по-прежнему можно успешно пройти и с меньшим количеством часов в неделю. Но, естественно, и общий срок обучения в этом случае будет больше.
В отличие от большинства других курсов и школ, у нас нет жёстких сроков для прохождения всей программы – при необходимости, у студента всегда есть возможность пройти повторно один или несколько этапов (в случаях, когда «не понял/не успел/сомневаюсь, что готов к следующему этапу» или при любых других причинах).
В среднем обучение и полное прохождение программы Frontend-разработки в Инкубаторе занимает от 6 до 14 месяцев.
- Пожалуй, первое и самое главное отличие – это то, что разработке у нас обучает действующий разработчик.
- Второе – это цель, к которой мы ведём наших студентов: не получить сертификат и просто пройти всю программу обучения (для галочки), а успешно трудоустроиться и продолжать дальше развиваться как разработчик, набираясь реального опыта в решении рабочих задач.
- Мы создаём и поддерживаем дружную рабочую и учебную атмосферу, где каждый студент всегда будет услышан и получит необходимую помощь и поддержку.
- Каждый наш студент имеет возможность обучаться в удобном для себя темпе: проходить уроки быстрее группы или наоборот – повторно проходить какой-то этап (или этапы), если по какой-то причине он оказался слишком сложен или не до конца понятен.
- Наш преподаватель проводит уроки в режиме реального времени, на которых студенты в том числе могут быстро закрывать возникающие вопросы
В Инкубаторе после изучения программы Понедельника, Вторника и Среды есть дополнительные занятия по английскому - 8 занятий в группе по 10 человек, на которых изучается техническая лексика. Также у нас есть подготовка к собеседованиям на английском, но на всех этих занятиях идёт уже закрепление знаний и изучение технических терминов – разумеется, язык с нуля здесь вы не выучите.
После прохождения любого из этапов можно переходить к следующему или, при необходимости, пройти его повторно. Оставаться на повторный круг можно неограниченное количество раз - таким образом срок обучения у студентов может существенно отличаться. В среднем это диапазон от 6 до 14 месяцев, но у кого-то это может быть и меньше 6 месяцев (у нас были такие студенты), а у кого-то – и больше 14 месяцев.
Для наших выпускников доступна менторская поддержка по программе обучения, т.е. закрепление пройденного материала. По сторонним/рабочим проектам поддержки для студентов и выпускников нет (мы мощны, но не всемогущи 😊)