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

онлайн курс

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

  • Telegram
  • VK
  • Whatsapp
  • Viber
Вход для учеников
онлайн-курс

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

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

Старт сразу после оплаты
Открыт набор в группу
Записаться на курс Посмотреть программу
JavaScript

Длительность 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 разработчиком и начнете развиваться в профессии.

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

JS logo

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

DOM

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

ES6 Standart

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

HTTP and fetch

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

Structure of data

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

Robot

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

API and server

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

SPA app

Напишите финальный проект. 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 канала, блога по веб-разработке.

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

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

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

Квиз Бюджетный калькулятор CRM система Каталог недвижимости React JS приложение
Интерактивный Квиз
Бюджетный калькулятор
Каталог недвижимости
Ecommerce
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 разработке.

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

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