Онлайн-курс

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

Старт следующего потока17 ноября
Длительность курса6 месяцев
Свободные места7 из 15
Студентов в группе15 человек

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

148 часов онлайн-занятий
20% теории, 80% практики
Код-ревью и поддержка менторов
Пожизненный доступ к записям занятий и материалам

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

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

Junior
Middle
Senior
2 250 $

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

Online-занятия

Занятия проводятся 2 раза в неделю с 19 до 22 по московскому времени. Для тех, кто не смог присутствовать на занятии, мы высылаем в общий чат ссылку на видеозапись.

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

Домашнее задание включает теоретический тест и практическое задание. На следующем занятии разбираются кейсы с частыми ошибками из домашнего задания.

Работа с ментором

За каждым студентом закрепляется личный ментор. Он проверяет домашние задания и помогает с выполнением, если у студентов возникают трудности.

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

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

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

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

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

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

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

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

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

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

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

Тема 1Знакомство с Web
  • Краткая история Web и что такое интернет.
  • Как устроен браузер и как он получает страницы по сети.
  • Что такое Git?
  • Создание первого репозитория.
  • О файле .gitignore.
Тема 2HTML-вёрстка – первые шаги
  • Настройка рабочей среды.
  • Краткая история HTML.
  • Какие бывают теги и что такое атрибут.
  • Теги для работы с текстом.
  • Создание собственной страницы.
Тема 3Погружение в HTML-разметку
  • Мета-теги.
  • Теги для работы со списками.
  • Теги для работы с таблицами.
  • Теги для работы с формами.
  • Div-блоки.
Тема 4Введение в CSS
  • Краткая история CSS.
  • Подключение стилей.
  • Что такое CSS-селектор?
  • Что такое CSS-свойство?
  • Для чего нужен !important и стоит ли его применять?
  • Как определены приоритеты стилей в CSS?
  • Отступы, границы и box-sizing.
Тема 5Работа с текстом
  • Типографика в Web.
  • Свойства для работы с текстом.
  • Текстовые эффекты.
  • Мнемоники.
  • Что такое шрифт и где его взять?
  • Способы подключения шрифтов.
Тема 6Работа с изображениями
  • Тег img и его атрибуты.
  • Изображение как фон.
  • Sprites: преимущества и недостатки.
  • Иконочные шрифты.
  • SVG как продвинутый инструмент.
Тема 7Вёрстка под разные типы устройств
  • Основные термины.
  • Использование медиа - запросов.
  • Блочная модель и для чего нужен container.
  • Способы организации сетки.
  • CSS Grid Layout и его отличие от Flexbox.
Тема 8Продвинутый CSS
  • Псевдоклассы и псевдоэлементы.
  • Позиционирование элементов.
  • Тени и градиенты.
  • Трансформация элементов.
  • Анимация.
Тема 9Продвинутая вёрстка
  • Семантика в HTML.
  • Работа с аудио и видео.
  • Переменные в CSS.
  • Что такое БЭМ?
  • Альтернативы БЭМ.
Тема 10Введение в Front-end
  • Введение в NPM.
  • Современная сборка Front-end и что такое boilerplate.
  • Работа с Pug.
  • Работа с SCSS.
  • Подключение stylelint.
  • NPM - скрипты.
Тема 11Обзор библиотек
  • Bootstrap.
  • Foundation.
  • Semantic UI.
  • UIkit.
  • Materialize.
  • Material Design Lite.
Тема 12Обзор препроцессоров
  • Less.
  • Sass.
  • Stylus.
  • Коротко о CSS-in-JS.
Тема 13Защита курсового проекта
  • Демонстрация курсовых проектов.
+1 проект в портфолио
Тема 1История JavaScript и работа в терминале
  • Краткая история JavaScript и зачем он нужен.
  • Работа в терминале.
  • Погружение в Git.
  • Подключение ESLint.
  • Работа с Husky.
Тема 2Знакомство с JavaScript
  • Переменные и типы данных.
  • Преобразование типов.
  • Базовые операторы.
  • Условия и циклы.
  • Значения Infinity, NaN, undefined, null.
Тема 3Функции. Часть 1
  • Синтаксис функций.
  • Способы объявления функций.
  • Что такое arguments, rest и return.
  • Самовызывающиеся функции.
  • Глобальные функции.
Тема 4Функции. Часть 2
  • Стек вызовов.
  • Области видимости.
  • Замыкания.
  • Рекурсия.
Тема 5Строки
  • Методы для работы со строками.
  • Базовый поиск в строке.
  • Регулярные выражения.
  • Сравнение строк.
Тема 6Массивы
  • Создание массива.
  • Копирование массива.
  • Методы для работы с массивами.
  • Способы перебора массивов.
  • Деструктуризация массива.
  • Что такое spread у массивов.
Тема 7Объекты
  • Создание объекта.
  • Копирование объекта.
  • Оператор delete.
  • Методы для работы с объектами.
  • Способы перебора объектов.
  • Деструктуризация объектов.
  • spread у объектов.
  • Метод Object.defineProperties.
Тема 8Классы
  • Основы ООП.
  • Функция как класс.
  • Оператор new и значение this.
  • Прототип.
  • Методы call, apply, bind.
  • Что такое class, extends, constructor, super.
Тема 9Углубленный JavaScript
  • Коллекции объектов по ключу.
  • JSON.
  • Математические вычисления.
  • Работа с датой.
  • Итераторы.
Тема 10DOM
  • Создание элементов.
  • Работа с атрибутами и контентом.
  • Навигация по элементам.
  • Поиск элементов.
  • Стили и классы.
  • Размеры, прокрутка, координаты.
Тема 11События
  • addEventListener и типы событий.
  • Всплытие и погружение.
  • Делегирование событий.
  • Действия браузера по умолчанию.
  • События форм и их элементов.
  • Интерфейсные события.
  • События загрузки.
Тема 12Асинхронность
  • Таймеры.
  • Promise.
  • Event loop.
  • fetch vs XMLHttpRequest.
  • async/await vs генераторы vs callbacks.
Тема 13BOM
  • BOM в контексте window.
  • screen.
  • navigator.
  • location.
  • history.
Тема 14Работа с файлами
  • Отправка файлов на сервер из формы.
  • Подробно о File и что такое Blob.
  • Принцип работы с Canvas.
  • Обзор возможностей Canvas.
  • MIME types.
  • DataURL и что такое Base64.
Тема 15Алгоритмы
  • Зачем нужно знать алгоритмы Front-end разработчику?
  • Базовые математические алгоритмы.
  • Базовые алгоритмы работы со строками.
  • Базовые алгоритмы поиска.
  • Базовые алгоритмы сортировки.
  • Оценка сложности алгоритма.
Тема 16Структуры данных
  • Зачем нужно знать структуры данных Front-end разработчику?
  • Связные списки.
  • Очередь.
  • Стек.
  • Хэш таблицы.
  • Куча.
  • Деревья.
  • Графы.
Тема 17Защита курсового проекта
  • Демонстрация курсовых проектов.
+1 проект в портфолио
Тема 1Продвинутый Git
  • Повторение пройденного материала.
  • Stash.
  • Тэгирование.
  • Rebase.
  • Chery-pick.
  • Популярные приемы работы с ветками.
Тема 2Шаблоны проектирования
  • Что такое шаблоны проектирования и зачем их использовать?
  • Порождающие шаблоны (Creational).
  • Структурные шаблоны (Structural).
  • Поведенческие(Behavioral).
Тема 3Архитектура
  • Клиент-сервер.
  • Компонентная.
  • Событийная.
  • REST.
  • MV*.
  • Однонаправленные потоки данных.
Тема 4SPA и Web Components
  • Что такое SPA?
  • Повторение HTML5 History API.
  • Web Components.
  • Беглый обзор современных инструментов разработки SPA.
Тема 5Webpack и Babel
  • Установка.
  • Настройка конфиг-файлов.
  • Обзор и установка плагинов.
  • Babel.
  • Первый build и запуск dev-сервера.
Тема 6Знакомство с React
  • Краткая история развития React.
  • Беглый обзор react-create-app.
  • Что такое JSX?
  • Работа с props.
  • Работа со списками.
  • React Developer Tools
Тема 7State и события
  • Stateless и Statefull компоненты.
  • Обработка событий.
Тема 8Жизненный цикл компонента
  • Стадии жизненного цикла.
  • Методы жизненного цикла.
  • PureComponent и React.memo.
Тема 9HOC и маршрутизация
  • Компоненты высшего порядка.
  • React-Router.
  • Настройки WebpackDevServer.
Тема 10Redux
  • Что такое Redux?
  • Создание Actions.
  • Создание Reducers.
  • Работа со Store.
Тема 11React + Redux
  • React Redux.
  • connect.
  • Redux DevTools.
  • Redux-Actions.
Тема 12Hooks
  • Зачем нужны Hooks?
  • Основные отличия компонента с использованием Hooks от классового компонента.
  • Обзор встроенных Hooks.
  • Создание собственных Hooks.
  • Hooks для работы с React-Router.
  • Hooks для работы с Redux.
Тема 13Redux Middleware
  • Что такое Middleware.
  • Middleware в режиме разработки.
  • Подключение Redux-Saga.
Тема 14Работа со стилями
  • Углубление в CSS-in-JS.
  • Установка JSS.
  • Создание тем.
  • Подключение стилей.
Тема 15Защита курсового проекта
  • Демонстрация курсовых проектов.
Тема 16Консультация по дипломному проекту
  • Итоговые консультации по дипломному проекту.
Тема 17Консультация по дипломному проекту
  • Демонстрация дипломных проектов.
  • Выдача сертификатов.
  • Выпускной.
+2 проекта в портфолио

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

Стас ГончаровПреподаватель курсаСтас Гончаров
Front-end разработчик в EffectiveSoft
  • 💪3+ года в front-end
  • 😌C нуля изучал программирование и попал в IT
  • 😎Разрабатывал проекты в разных сферах
  • 👏Помог стать программистами 15+ студентам
Андрей БогомоловАвтор курсаАндрей Богомолов
Full Stack разработчик в Viplay Media
  • 💪8 лет занимается разработкой
  • 😌Работал в аутсорсинговых и продуктовых компаниях
  • 😎Возглавлял команду Front-end разработки в аутсорсинговой компании
  • 👏Помог стать программистами 50+ студентам

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

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

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

Возможна рассрочка 3 месяца1-й взнос600 BYN
2-й и 3-й взносы450 BYN
Полная стоимость1 500 BYN
Записаться или получить
консультацию

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

Почему я должен выбрать профессию Front-end разработчик?

Для того, чтобы «войти» в IT как инженер, профессия Front-end разработчика — отличный вариант для тех, кто никогда не занимался программированием. Технологии, которые необходимы для этой профессии, достаточно легко освоить и язык JavaScript — один из самых простых в программировании.

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

Думаем, что да. Главное, чтобы вы могли уделять обучению минимум 10 часов в неделю: прорабатывать теорию после занятий, выполнять практические задания и читать дополнительные материалы, которые рекомендует преподаватель.

Решаются ли на курсе практические задания?

Курс построен таким образом, что 20% изучаемого материала составляет теория и 80% — это практические примеры. После каждого занятия вам даются домашние задания, которые в будущем вы будете использовать в курсовых работах.

Как я могу задать вопросы преподавателю?

Любой вопрос преподавателю вы сможете задать на онлайн-занятии. Но не забывайте, что у вас ещё всегда на связи будет опытный ментор, который ответит на любой вопрос по программированию:)

Что делать, если я пропустил занятие?

После каждого занятия преподаватель будет отправлять в telegram-чат видеозапись занятия. А ещё у вас всегда на связи будет ментор, который поможет разобраться с практическими заданиями и ответит на вопросы по программированию. Также все материалы будут доступны после окончания курса, чтобы вы могли освежить в памяти выученное.

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

Занятия проводятся онлайн 2 раза в неделю в вечернее время по 3 часа. Плюс к этому нужно будет делать практические задания. И для обучения вам понадобится минимум 10 часов свободного времени в неделю, что вполне реально для совмещения работы, учёбы и личной жизни:)

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

При получении сертификата на курсе мы поможем вам правильно составить резюме и расскажем, как подготовиться к собеседованию. А ещё в закрытом telegram-чате для выпускников мы будем регулярно публиковать классные вакансии:)

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

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

Меня смущает онлайн-формат. Что делать?

На онлайн-курсах вы сэкономите минимум час времени из-за того, что не нужно никуда ехать, и сможете потратить это время на обучение. Как показала практика, онлайн-обучение не меньше дисциплинирует, чем оффлайн. И на наших занятиях все студенты по возможности присутствуют с включенными камерами, чтобы меньше отвлекаться на социальные сети😅

Действуют ли какие-нибудь программы рассрочки?

Да, вы можете оплатить курс «Front-end разработчик с нуля» в 3 части. Но при полной оплате за весь курс стоимость обучения ниже на 50 BYN.