Онлайн-курс

Front-end
разработчик

Старт ближайшего потокафевраль 2025
Длительность курса8 месяцев

О школе

2,5 года

работаем с сентября 2020 года

130+

студентов

85%

студентов, которые прошли курс до конца, нашли работу или стажировку

30%

приходят по рекомендации наших студентов и выпускников

Что входит в курс

42 видеозанятия с автором курса
Практические и теоретические задания
Проверка домашних заданий и поддержка менторов
Live-консультации и тренировки собеседований

Для кого этот курс

Сколько зарабатывают Front-end разработчики

Junior
Middle
Senior
2 250 $

Как проходит обучение

Занятия по программе

2 раза в неделю вам открываются видеоуроки. Для студентов тарифа "Я с группой" после каждых 2-ух занятий проводится групповой созвон с ментором.

Домашние задания

Для того, чтобы закрепить материал после занятия, мы даём теоретический тест, после него практическое задание. Ведь лучший способ усвоения информации — постоянная практика.

Поддержка ментора

Если у вас есть вопросы, вы всегда можете задать их в чате. Ментор проверяет домашние задания, даёт рекомендации по его улучшению и помогает, если у вас возникают трудности.

Курсовые работы и дипломный проект

В конце каждого модуля вы будете делать курсовые работы. А в конце обучения — дипломный проект. Так к концу обучения в вашем портфолио на GitHub будет минимум 4 проекта.

Чему вы научитесь

Верстать сайты и создавать интерфейсы для всех типов устройств

Вы освоите различные концепции и техники вёрстки. Также научитесь создавать сложные интерфейсы для веб-приложений и адаптировать проект для любых типов устройств.

Создавать сложные веб-приложения на React

React – самая популярная и перспективная библиотека для создания веб-приложений. Вы научитесь создавать на React веб-приложения любой сложности и изучите, в каких областях применима эта библиотека.

Готовить проекты для запуска в Production

Вы изучите различные системы сборки веб-приложений, которые упрощают разработку и соберёте Production-версию собственного проекта. Также научитесь перемещать проект на Production-сервер. Благодаря этому навыку вы освоите весь цикл разработки веб-приложения: от создания до запуска.

Какие технологии вы освоите

Программа курса

Тема 1Знакомство с Web
  • Краткая история Web и как устроен интернет
  • Как устроен браузер и как он получает страницы по сети
  • Что такое Git
  • Создание первого репозитория
  • О файле .gitignore
Тема 2HTML-вёрстка – первые шаги
  • Настройка рабочей среды
  • Краткая история HTML
  • Типы тегов и атрибуты
  • Теги для работы с текстом
  • Создание собственной страницы
  • Основы ветвления в Git
  • Создание pull request на GitHub
Тема 3Погружение в HTML-разметку
  • Мета-теги
  • Мнемоники
  • Теги для работы со списками
  • Теги для работы с таблицами
  • Теги для работы с формами
  • div и span
Тема 4Введение в CSS
  • Краткая история CSS
  • Подключение стилей
  • CSS-селекторы
  • CSS-свойства
  • Наименование CSS-классов
  • Декларация !important
  • Приоритеты стилей в CSS
  • Отступы, границы и box-sizing
Тема 5Flexbox. Работа с текстом
  • Flexbox
  • Pixel perfect
  • Типографика в Web
  • Шрифты и способы их подключения
  • Свойства для работы с текстом
  • Текстовые эффекты
Тема 6Изображения – Часть 1. Фон
  • Favicon
  • Тег img и его атрибуты
  • Изображение как фон
  • Способы работы с цветом
  • Градиенты
  • CSS Sprites
Тема 7Изображения – Часть 2. BEM
  • Иконочные шрифты
  • Canvas – краткий обзор
  • SVG как продвинутый инструмент
  • SVG Sprites
  • Методология BEM
Тема 8Адаптивная вёрстка. Часть 1
  • Основные термины
  • Использование медиа - запросов
  • Блочная модель. Контейнеры
  • Переменные в CSS
  • Построение адаптивной сетки на flexbox
Тема 9Адаптивная вёрстка. Часть 2
  • CSS Grid Layout
  • Способы построения адаптивной сетки на Grid Layout
  • Использование единиц изменения в адаптивной вёрстке и доступности
Тема 10Продвинутый CSS
  • Псевдоклассы и псевдоэлементы
  • Позиционирование элементов
  • Тени
  • CSS-фигуры
  • Трансформация элементов
Тема 11Продвинутая вёрстка
  • Семантика в HTML
  • Работа с аудио и видео
  • Анимация
Тема 12Введение в Front-end
  • Введение в NPM
  • Современная сборка Front-end
  • Boilerplate
  • Работа с Pug
  • Обзор препроцессоров
  • Подключение stylelint
  • NPM - скрипты
Тема 13Обзор библиотек
  • Bootstrap
  • Foundation
  • Semantic UI
  • UIkit
  • Materialize
  • Material Design Lite
Консультация перед защитой курсового проекта
  • Предварительное демо проекта
  • Вопрос/ответ по проекту
  • Разбор вопросов к собеседованию
Защита курсового проекта
  • Демонстрация курсовых проектов
+2 проекта в портфолио
Тема 14История JavaScript и работа в терминале
  • Краткая история JavaScript
  • Работа в терминале
  • Погружение в Git
  • SSH аутентификация
  • Подключение ESLint
  • Работа с Husky
Тема 15Знакомство с JavaScript
  • Переменные и типы данных
  • Преобразование типов
  • Базовые операторы
  • Значения Infinity, NaN, undefined, null
  • Условия и циклы
Тема 16Функции – Часть 1
  • Синтаксис функций
  • Способы объявления функций
  • arguments, rest и return
  • Самовызывающиеся функции
  • Глобальные функции
  • Рекурсия
  • Отладка
  • Обработка ошибок
Тема 17Функции – Часть 2
  • Стек вызовов
  • Области видимости
  • Замыкания
  • Основы unit-тестирования
Тема 18Строки
  • Методы для работы со строками
  • Базовый поиск в строке
  • Регулярные выражения
  • Сравнение строк
Тема 19Массивы
  • Создание массива
  • Копирование массива
  • Методы для работы с массивами
  • Способы перебора массивов
  • Деструктуризация массива
  • spread у массивов
Тема 20Объекты
  • Создание объекта
  • Копирование объекта
  • Оператор delete
  • Геттеры и сеттеры
  • Методы для работы с объектами
  • Способы перебора объектов
  • Деструктуризация объектов
  • spread у объектов
  • Метод Object.defineProperties
Тема 21Классы
  • Основы ООП
  • this
  • Функция конструктор
  • Оператор new
  • Прототип
  • Статические методы
  • Методы call, apply, bind
  • Что такое class, extends, constructor, super, static
Тема 22Углубленный JavaScript
  • Коллекции объектов по ключу
  • JSON
  • Математические вычисления
  • Работа с датой
  • Итераторы
Тема 23DOM
  • Создание элементов
  • Работа с атрибутами и контентом
  • Навигация по элементам
  • Поиск элементов
  • Стили и классы
  • Размеры, прокрутка, координаты
Тема 24События
  • Типы событий
  • addEventListener и addRemoveListener
  • Всплытие и погружение
  • Делегирование событий
  • Действия браузера по умолчанию
  • События форм и их элементов
  • Интерфейсные события
  • События загрузки
  • MutationObserver
Тема 25Асинхронность – Часть 1
  • Таймеры
  • Promise
  • Event loop
  • HTTP
  • AJAX
  • fetch vs XMLHttpRequest
Тема 26Асинхронность – Часть 2
  • CORS
  • Знакомство с REST
  • Знакомство с GraphQL
  • async/await
  • Функции-генераторы
  • callbacks
Тема 27BOM
  • BOM в контексте window
  • screen
  • navigator
  • location
  • history
  • Browser storages
Тема 28Работа с файлами
  • Отправка файлов на сервер из формы
  • File API
  • Принцип работы с Canvas
  • Обзор возможностей Canvas
  • MIME types
  • DataURL и что такое Base64
Тема 29Основы по алгоритмам и структурам данных
  • Значимость алгоритмов для Front-end разработчика
  • Базовые математические алгоритмы
  • Базовые алгоритмы работы со строками
  • Базовые алгоритмы поиска
  • Базовые алгоритмы сортировки
  • Оценка сложности алгоритма
  • Значимость структур данных для Front-end разработчика
  • Связные списки
  • Очередь
  • Стек
  • Хэш таблицы
  • Куча
  • Деревья
  • Графы
Тема 30Шаблоны проектирования и архитектуры
  • Введение в концепцию шаблонов проектирования
  • Порождающие шаблоны (Creational)
  • Структурные шаблоны (Structural)
  • Поведенческие(Behavioral)
  • Клиент-сервер
  • Компонентная
  • Событийная
  • REST
  • MV*
  • Однонаправленные потоки данных
Консультация перед защитой курсового проекта
  • Предварительное демо проекта
  • Вопрос/ответ по проекту
  • Разбор вопросов к собеседованию
Защита курсового проекта
  • Демонстрация курсовых проектов
+1 проект в портфолио
Тема 31Продвинутый Git
  • Повторение пройденного материала
  • Stash
  • Тэгирование
  • Rebase
  • Chery-pick
  • Популярные приемы работы с ветками
Тема 32SPA и Web Components. Знакомство с React
  • Single-page application
  • Повторение HTML5 History API
  • Web Components
  • Краткий обзор современных инструментов разработки SPA
  • Краткая история развития React
  • Краткий обзор react-create-app
  • JSX
  • Работа с props
  • Работа со списками
  • React Developer Tools
Тема 33State и события
  • Stateless и Stateful компоненты
  • Обработка событий
  • Refs
Тема 34Жизненный цикл компонента
  • Стадии жизненного цикла
  • Методы жизненного цикла
  • Error Boundaries
Тема 35Hooks – Часть 1
  • Введение в React Hooks
  • Базовые хуки
  • Создание собственных хуков
  • Работа с Context
Тема 36Hooks – Часть 2
  • Повторение базовых хуков
  • Продвинутые хуки
Тема 37Продвинутый React
  • PropTypes
  • Memo
  • Порталы
  • Suspense
  • Lazy
  • AbortController в React App
Тема 38React Router
  • Подробный обзор библиотеки с примерами использования, включая Data APIs
Тема 39Redux – Часть 1
  • State management
  • Введение в Redux
  • Actions
  • Reducers
  • Store
  • Action Creators
  • Работа с Redux в React App
  • Redux DevTools
Тема 40Redux – Часть 2
  • Работа с Redux Toolkit
  • Middleware
  • Redux Persist
  • RTK Query
  • Разбираем флоу авторизации с использованием JWT
  • Redux Saga
Тема 41Работа со стилями
  • Введение CSS-in-JS
  • Styled Components
  • Emotion
  • JSS
  • Создание тем
Тема 42Webpack и Babel
  • Установка
  • Настройка конфиг-файлов
  • Обзор и установка плагинов
  • Babel
  • Build и запуск dev-сервера
Консультация перед защитой курсового проекта
  • Предварительное демо проекта
  • Вопрос/ответ по проекту
  • Разбор вопросов к собеседованию
Защита курсового проекта
  • Демонстрация курсовых проектов
  • Обзор дипломных проектов
Консультация по дипломному проекту
  • Предварительное демо проекта
  • Вопрос/ответ по проекту
Защита дипломного проекта
  • Демонстрация дипломных проектов
  • Полчение сертификатов
+2 проекта в портфолио

Преподаватель

Андрей БогомоловАвтор курсаАндрей Богомолов
Tech Lead в Shell
  • 💪9 лет занимается разработкой
  • 😌Работал в аутсорсинговых и продуктовых компаниях, таких как Unity (Full Stack разработчик) и DHL (Full Stack консультант)
  • 😎Возглавлял команды Front-end разработки
  • 👏Помог стать программистами 50+ студентам

Учитесь в Intellect Fox и получайте подарки

Видеолекция HR о том, как найти первую работу в IT
Видеолекция по английскому языку для IT
Техническое собеседование после окончания курса
Бесплатная подписка на 6 месяцев на IDE WebStorm

Стоимость обучения

Лайт

Самостоятельно в своём темпе
1-й взнос250$
2-й взнос150$
Полная стоимость400$
Записаться
Видеоуроки и домашние задания всех модулей сразу
Доступ к записям занятий и поддержка — 1 год со старта
Поддержка только в ОБЩЕМ чате
4 консультации перед защитами
3 защиты курсовых проектов
Защита дипломного проекта
4 проекта в портфолио (3 курсовые + 1 дипломный проект)
Гайд по составлению резюме, сопроводительного письма, оформлении профиля в LinkedIn

Всё сам(а)

Поддержка ментора + дедлайны
1-й взнос300$
2-й и 3-й взносы225$
Полная стоимость750$
* Возможна индивидуальная рассрочка от нашей школыЗаписаться
Видеоуроки (2 раза в неделю открывается одно занятие)
Доступ к записям занятий навсегда
Проверка домашних заданий
Поддержка ментора в чате
4 консультации перед защитами
3 защиты курсовых проектов
Защита дипломного проекта
4 проекта в портфолио (3 курсовые + 1 дипломный проект)
Гайд по составлению резюме, сопроводительного письма, оформлении профиля в LinkedIn

Я с группой

Поддержка ментора + дедлайны + созвоны
1-й взнос380$
2-й и 3-й взносы285$
Полная стоимость950$
* Возможна индивидуальная рассрочка от нашей школыПопасть в предзапись
Видеоуроки (2 раза в неделю открывается одно занятие)
Групповые созвоны с ментором после каждых 2-х занятий для консультации и решения дополнительных задач
Доступ к записям занятий навсегда
Проверка домашних заданий
Поддержка ментора в чате, при необходимости групповые или индивидуальные созвоны
4 консультации перед защитами
3 защиты курсовых проектов
Защита дипломного проекта
5 проектов в портфолио (3 курсовые + дипломный проект + лендинг-резюме)
Индивидуальная помощь в составлении резюме, сопроводительного письма и оформлении профиля в LinkedIn

Часто задаваемые вопросы

Я никогда не занимался разработкой. Получится ли у меня освоить профессию за 8 месяцев?

Наш курс разработан не только для тех, кто уже что-то изучал, но и для тех, кто хочет освоить профессию с нуля. Главное, чтобы вам было это интересно и вы могли уделять обучению минимум 3-4 часа в день (не включая просмотр занятий): выполнять теоретические и практические задания, читать дополнительные материалы, которые мы рекомендуем.

Нужны ли знания английского для прохождения курса?

Мы рекомендуем идти на курс с базовыми знаниями английского. Занятия проходят на русском языке, но большинство материалов для изучения мы даём на английском. Также в требованиях большинства вакансий "Junior Front-end developer" минимальный уровень английского Pre-intermediate (A2).

Мне помогут устроиться на работу?

При получении сертификата на курсе мы поможем вам правильно составить резюме, профиль в LinkedIn и расскажем, как подготовиться к собеседованию. Также после окончания обучения у вас останется доступ к чату группы, где мы будем оставаться на связи и по возможности помогать вам.

Что, если я не смогу получить сертификат?

Если у вас не получится пройти курс до конца, выполнить все курсовые работы и дипломный проект, то мы выдадим вам справку. В ней будет указана информация о прохождении определённого количества часов по курсу «Front-end разработчик» и основные навыки, которые вы получили в процессе обучения. Также у вас останется доступ ко всем материалам занятий курса.

Есть ли рассрочка?

Да, на все тарифы действует рассрочка на 3 месяца от нашей школы: 40% до начала занятий, 30% через месяц после начала занятий и 30% ещё через месяц.

Получится ли совмещать обучение с основной работой?

Если вы готовы уделять обучению минимум 3-4 часа каждый день, не включая просмотр занятий, всё должно получиться.