онлайн-курс

Frontend
разработчик JavaScript + React

Получите навыки для профессии frontend разработчика за 3 месяца под руководством опытного наставника.

Длительность 3 месяца

Обучение С наставником

Теория и практика проекты из реального мира

JavaScript и Frontend — одно из самых перспективных направлений в программировании и веб-разработке на сегодняшний день.

Освоив frontend вы сможете трудоустроиться в IT компанию, где будете разрабатывать интерфейсы для онлайн сервисов, таких как: интернет магазины, онлайн банки, социальные сети, мессенджеры и т.д. Frontend разработчики востребованы как в IT компаниях, так и на фрилансе.

Компании каждый день ищут frontend-разработчиков Это ваша возможность

Скриншот вакансий для Frontend разработчика

7 921 вакансия

frontend разработчика на hh.ru

70 000 рублей

зарплата на старте для Junior разработчика

120 000 рублей

зарплата для Middle разработчика уже через год работы

от 185 000 рублей

зарплата Senior разработчика

Что даёт профессия
frontend-разработчика

Востребованная работа и высокая зарплата

Бизнес активно переходит в онлайн, поэтому сайты и веб-приложения нужны всем. Компании постоянно ищут frontend-разработчиков, чтобы внедрять фичи быстрее конкурентов.

Ваш труд оценят — по данным Хабр.Карьеры, в 2020 году зарплаты middle-разработчиков достигли 180 000 рублей.

Чем занимается
frontend-разработчик

Создает внешний вид сайтов и веб-приложений

Создание внешнего вида веб-приложения. Текст, картинки, кнопки, формы.

На основе дизайн-макетов frontend разработчик делает так чтобы все элементы сайта были правильно сверстаны и располагались на своих местах и страница отображалась в браузере.

Кому подойдет этот курс

HTML верстальщикам

Для тех кто умеет верстать, собирать страницы и готов развиваться дальше. JS и frontend разработка это органический рост для верстальщика.

Став frontend разработчиком сможете трудоустроиться в IT компанию или выполнять заказы на фрилансе связанные с frontend разработкой.

Начинающим программистам

Познакомитесь с языком JavaScript, освоите нюансы его использования, научитесь работать с JS фреймворками.

Напишите проекты для портфолио, станете востребованным JS разработчиком и начнете развиваться в профессии.

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

Основы программирования на JavaScript. Правильный подход.

Создавать интерактивные приложения. Работать с DOM.

Использовать современный стандарт ES6 и самые актуальные возможности языка.

Взаимодействовать с сервером. XMLHttpRequest, Ajax, Fetch.

Грамотно использовать структуры данных в JS: строки, числа, массивы, функции, объекты в JavaScript.

Контекст, scope, this, промисы, асинхронность, модули, импорты. Расскажем простым языком о сложных вещах.

Работа с сервером и API. Создание динамических приложений.

Напишите финальный проект. SPA приложение, с использованием API, ООП, модулей и MVC подхода на native JS.

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

Смотрите уроки в удобное время

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

Закрепляете знания на практике

Выполняете домашние задания после каждого модуля. Куратор проверяет ваше ДЗ, дает подробную обратную связь.

Участвуете в онлайн мастер-классах

Вебинары и групповые созвоны с разбором практических задач и решений в сфере frontend разработки.

Пополняете свое порфтолио

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

Выполняете итоговый проект

Разрабатываете итоговый проект совмещая все знания из курса, публикуете его в сети и добавляете в свое портфолио.

Уровни курса

Первый уровень. Основы языка JavaScript и работа с DOM

Освоим основы языка JavaScript. Необходимый базис для дальнейшей работы. Научимся работать с элементами страницы. Реализовывать интерактивные элементы. Модальные окна, табы, календари, слайдеры, карусели и многое другое. Все что необходимо для современных веб-сайтов и приложений.

Параллельно будем погружаться в нюансы работы языка. Контекст, замыкания, область видимости, event loop и так далее.

Второй уровень. Архитектура веб-приложений

Как организовать и распределить код в большом приложении. Когда кода становится много, необходимо распределять его ответственность. Проходим паттерн MVC и выполняем два учебных проекта. С преподователем и самостоятельный.

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

Третий уровень. Работа с сервером. API

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

По итогу модуля научитесь работать с API интерфейсами и сможете разрабатывать frontend для любых задач имея подходящее API.

Четвертый уровень. ООП подход в создании приложений

Перед переходом к фреймворкам, важно разобраться с объектно ориентированным подходом. Как упаковать свой код в классы и использовать их в приложении. Практика создания веб-приложения с разделением ответственности по паттерну MVC c использованием ООП подхода.

По итогу модуля вы напишите frontend для сайта который будет работать с сервером по API. Используете паттерн MVC и ООП подход в написании приложений.

Пятый уровень уровень. Фреймворк React JS

Изучим основы и все необходимые нюансы самого популярного JS "фреймворка" React JS. Современные веб-приложения пишутся с помощью готовых фреймворков, библиотек и инструментов. Они помогают задать стандарт и стандартизировать код разных разработчиков в одной команде.

Вы выполните ряд проектов для своего портфолио на этом фреймворке. Начиная от простых приложений заканчивая CRM на React JS.

Пошаговая программа курса
сделает из новичка уверенного специалиста

Перед каждым потоком мы дополняем или переписываем уроки, чтобы давать свежие знания, которые нужны для работы над реальными проектами. Обновления делаем на основе запросов работодателей и отзывов студентов.

Последнее обновление уроков в программе: Август 2023

9 модулей
уровней курса

259
видео уроков

40+
часов видео материала

30
упражнений

5
проектов

Подготовительный модуль

Настройка рабочего окружения

VS Code
Настройка редактора
Плагины
Горячие клавиши

Основы JavaScript

Переменные и типы данных

Типы переменных: let, const, var
Типы данных
Приведение типов
Базовые операторы
Приоритеты операторов

Условия

Условия if / else
Булевая логика true и false
Истинные и ложные значения, операторы равенства
Тернарный оператор
Switch case выражения

Функции

Создание функций
Function expression и function declaration
Параметры и аргументы для функции
return
Функция как аргумент
Самовызывающаяся функция IIFE
Стрелочные функции

Массивы

Определение массивов
Методы массивов
Цикл for. Обход массива циклом for
Цикл for ( of ). Обход массива циклом for ( of )
Метод .forEach() для обхода массивов

Объекты

Объекты. Свойства объектов
Методы в объектах
Ключевое слово this
Обход свойств объекта через цикл for ( in )
Нюанс с const и изменением объекта или массива
Классы. Конструкторы объектов

Работа с DOM

Теория JS

Область видимости
Hoisting. Всплытие
Objects. Объекты в JavaScript

Работа с DOM. Поиск DOM элементов

Выбор DOM элементов
Выбор коллекции элементов
ES5 методы для выбора элементов

Работа с CSS классами

classList
className

Работа с атрибутами

src, alt, id, class
Дата атрибуты

Прослушка событий

addEventListener - click, submit
События наведения курсора
События клавиатуры
Свойство onclick
Отмена событий

Объект event

event.preventDefault()
event.stopPropagation()
event.target
event.currentTarget

Практика

Табы
Аккордеон
Модальное окно
Мобильная навигация
dropDown
range slider
Форматирование цен, дат, телефонов
Календари
Проверка формы на заполненность

Работа c HTML элементами. Создание. Копирование

Вставка через шаблонные строки
Вставка через плейсхолдеры
Создание DOM элементов

Размеры элементов на странице

Отслеживание элементов

intersectionObserver

Асинхронность

Интервал setInterval. clearInterval
Таймер setTimeout

Работа с DOM. Данные в JavaScript

Данные в JavaScript

Методы массивов
Вывод данных на страницу
Добавить переключение по фильтрам / табам
Сортировка и фильтрация данных на странице
JSON формат
localStorage

Fetch данных с API

fetch

Получение данных с сервера
Отправка данных на сервер

Асинхронный JS

Таймер setTimeout
callbackHell небольшой пример
Промисы
Асинхронные функции

Архитектура в JS

Модули

Модули ES5
Модули ES6

Паттерн MVC

Теория
Проект по паттерну MVC
Самостоятельный проект с MVC

Сборка проекта

Инструменты для сборки проекта

Node JS и NPM
WebPack
Parcel

ООП в JavaScript

Классы, конструктор, методы, объекты
Проект с ООП подходом и MVC паттерном
Самостоятельный проект

React JS

Основы React JS

Функциональные компоненты
JSX
Props
State
События
Условный рендеринг
Жизненный цикл React компонентов
Хуки
Компоненты классы

Хуки

useState
useEffect
useRef
useContext
useReducer
useMemo
useCallback

Дополнительные пакеты

React Router
Axios
Styled Components

Управление состоянием

Redux и reducer
action
dispatch
reducer
store

Автор курса

Преподаватель курса —
Юрий Ключевский

Веб-разработчик с 10-ти летним стажем. Работал в международных компаниях и на фрилансе. Основатель онлайн школы ВебКадеми, автор обучающего YouTube канала, блога по веб-разработке.

Веб-разработчик: JavaScript, HTML, CSS, PHP.
Product designer, UI & UX дизайнер.
Опыт в веб-разработке: более 10-ти лет.
Преподавательский стаж: более 5 лет.
Опыт работы в международных IT компаниях, из TOP 10 в своей отрасли. США, Норвегия. Делаю дизайн и фронтенд для IT продуктов.

Я убежден, что при правильном подходе любой человек с желанием может стать веб-разработчиком. Объясняю сложные вещи простым и доступным языком.

Проекты которые вы сделаете во время обучения

Квиз Бюджетный калькулятор CRM система Каталог недвижимости React JS приложение

Тест-драйв

Попробуйте первую неделю обучения. После можно перейти на полный тариф

7 дней
Без созвонов с куратором
—
Домашние задания c проверками
Помощь и ответы на вопросы от куратора в чате
Уроки первой недели
5 проектов
Основы React для JS разработчика

Стоимость тест-драйва
5'000 ₽

990 ₽

Записаться

JavaScript

Тариф чтобы освоить необходимую базу JS для frontend разработки

8 недель обучения
4 созвона с куратором.
2 часа на созвоны
Домашние задания c проверками
Помощь и ответы на вопросы от куратора в чате
Все учебные материалы курса
5 проектов
Основы React для JS разработчика

Обычная стоимость курса
40'000 ₽

Стоимость по скидке

32'000 ₽

8 недель обучения
оплата по частям
половина сразу,
половина до 5-й недели обучения

Записаться

с оплатой в рассрочку от школы

Рассрочка от банка до 12 месяцев
Ежемесячный платеж от 2'666 руб. в месяц

Взять в рассрочку

JavaScript + React

Необходимый комплект для трудоустройства

12 недель обучения
8 созвонов с куратором.
4 часа на созвоны
Домашние задания c проверками
Помощь и ответы на вопросы от куратора в чате
Все учебные материалы курса
5 проектов
Основы React для JS разработчика

Обычная стоимость курса
48'000 ₽

Стоимость по скидке

40'000 ₽

12 недель обучения
оплата по частям
половина сразу,
половина до 5-й недели обучения

Записаться

с оплатой в рассрочку от школы

Рассрочка от банка до 12 месяцев
Ежемесячный платеж от 3'333 руб. в месяц

Взять в рассрочку

Возможна оплата по частям

Оплатите всего половину до старта курса, и вторую часть до 5-й недели обучения.

Гарантия возврата средств

Если в первую неделю обучения Вы поймете, что курс не подходит, то мы вернем Вам деньги. Для тарифа JavaScript и JavaScript + React.

Рассрочка без переплат до 12 месяцев

Возможна оплата в рассрочку до 12 месяцев. Через Т-Банк для граждан РФ старше 18 лет. Онлайн оформление.

Ответы на частые вопросы

Что нужно знать, чтобы проходить данный курс по JavaScript?

Для прохождения курса вы должны понимать HTML и CSS. На курсе вся верстка дается готовая, верстать мы не будем. Необходимо знать верстку на уровне понимания тегов, классов и атрибутов.

На курсе мы будем работать с DOM элементами. Надо уметь при необходимости дописать нужный HTML тег или CSS стили. Также желательно знать основы программирования: переменные, типы данных, массивы, циклы, условия.

В каком формате проходит обучение?

Обучение проходит по заранее записанным видео-урокам. В конце каждого урока есть домашние задания. Все ДЗ проверяют кураторы и дают подробную обратную связь. У вас есть возможность пересдать домашнее задание, внести исправления и двигаться далее.

Какие сайты я смогу делать после обучения?

После прохождения курса вы сможете писать frontend для современных сайтов. Работать с API различных сервисов. Создавать Single Page Application. Вы сможете оживлять статическую верстку скриптами, делая сайт интерактивным. Это может быть онлайн приложение, интернет магазин или онлайн кабинет. Принцип работы скриптов одинаков в любом типе сайта.

На курсе также будет заложена ваша база для дальнейшего развития и изучения JS фреймворков.

Я смогу зарабатывать используя полученные знания?

C полученными знаниями и навыками вы сможете трудоустроиться Junior frontend разработчиком в IT компанию или веб-студию. И начать строить свою карьеру веб-разработчика.

Также сможете уверенно брать заказы на фрилансе по frontend разработке.

Останется ли доступ к урокам курса после завершения обучения?

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

Курс: Frontend разработчик