Записаться на курс
Посмотреть программу
Профессия
Научитесь с нуля проектировать интерфейсы сайтов и приложений на HTML, CSS, JavaScript и React
Создадите до 13 проектов для портфолио
Пройдёте стажировку в IT-компании уже во время обучения
Frontend-
разработчик
Найдёте работу, или вернем деньги
+
●
●
●
Записаться на курс
При покупке —
второй курс в подарок
до 3 ноября
Гибкий график
Учитесь онлайн в удобное время
Интерактивный формат
Видеолекции, скринкасты, тренажёры, тесты
Длительность
От 7,5 месяцев
Поддержка
Личный куратор будет на связи 7 дней в неделю
Документ
Диплом о профессиональной переподготовке

Frontend-разработчик — одна из самых востребованных IT-профессий.

По данным HeadHunter, только за последний год спрос на Frontend-разработчиков в России вырос на 20%.

Frontend-разработчик отвечает за то, как сайт выглядит и работает для пользователя. Дизайнер создаёт макет, а разработчик, превращает его в код — так, чтобы пользователю было удобно взаимодействовать с сайтом.

IT-сфера
Сфера услуг
Гейминг
Ритейл
Банкинг

Специалисты нужны везде, где создают сайты или приложения, например:

IT-сфера

Гейминг

Банкинг

Сфера услуг

Ритейл

Junior
73 000 ₽

Вакансии на hh.ru прямо сейчас:

Middle

180 000 рублей — средняя зарплата Frontend-разработчика в 2024 году

161 000 ₽
Senior
302 000 ₽+
Junior Frontend Developer
от 85 000 ₽ на руки
Москва, можно удалённо
Без опыта
Опыт 1-3 года
Москва, ● Новые Черёмушки
до 200 000 ₽
Frontend-разработчик
Кому подойдёт курс

Тем, кто хочет сменить профессию и стать разработчиком

Научитесь проектировать интерфейсы с нуля. Отработаете полученные навыки на стажировке в IT-компании и найдёте первую работу через 7,5 месяцев.

Смежным специалистам в сфере IT

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

Начинающим разработчикам

Структурируете и систематизируете свои знания. Усилите своё портфолио 13 проектами и сможете брать в работу более сложные кейсы, чтобы вырасти в доходе.

Ваши навыки после обучения

Должность
Frontend-разработчик
Навыки
  • Владею навыками адаптивной и кроссбраузерной вёрстки на HTML и CSS
  • Программирую на JavaScript
  • Создаю веб-приложения с использованием библиотеки React
  • Использую систему контроля версий Git
  • Применяю паттерны проектирования и ООП
  • Использую препроцессоры SASS и LESS
  • Работаю со сборщиком Webpack
  • Провожу анализ и review кода
Инструменты
⠀⠀⠀FlexBox
Метод компоновки в CSS, который позволяет автоматически располагать адаптивные элементы внутри контейнера в зависимости от размера области просмотра.
⠀⠀⠀PostgreSQL
Популярная система управления базами данных.
⠀⠀⠀Git
Система контроля версий для управления кодом и совместной работы.
⠀⠀⠀API
Набор правил, по которым приложения или части программы общаются друг с другом.
⠀⠀⠀ RestAPI
Самый популярный подход к проектированию API.
⠀⠀⠀HTML
Язык, с помощью которого можно разметить структуру будущей веб-страницы: добавить основные блоки, текст, картинки, видео.
⠀⠀⠀CSS
Язык стилей, с помощью которого можно описать внешний вид HTML-элементов.
  • Знаю основы DevOps
⠀⠀⠀JavaScript
Один из самых популярных языков программирования для разработки веб-приложений.
  • Анализирую и отлаживаю свой и чужой код
  • Умею писать документацию по коду
  • Провожу анализ и review кода
⠀⠀⠀React
Популярная и удобная JavaScript-библиотека для создания пользовательских интерфейсов.
  • Знаю основы UX/UI-дизайна, автоматизирую работу в Figma
  • Тестирую сайт, нахожу ошибки и провожу рефакторинг кода
⠀⠀⠀Figma
Сервис, в котором проектируют интерфейсы сайтов и мобильных приложений.
  • Умею писать unit-тесты для JavaScript-кода
  • Провожу тестирование API
⠀⠀⠀WebPack
Сборщик модулей JavaScript, который помогает управлять зависимостями и оптимизировать код.
  • Знаю основы SQL, работаю с СУБД PostgreSQL
  • Понимаю и применяю принципы современной разработки ПО: Agile, Scrum, Kanban
⠀⠀⠀Chrome DevTools
Встроенный в браузер Google Chrome инструмент, который позволяет веб-разработчикам тестировать интерфейсы и производительность сайта.
⠀⠀⠀Grid Layout
Сетка CSS позволяет более легко и последовательно создавать сложные адаптивные макеты сетки веб-дизайна в разных браузерах.
⠀⠀⠀SASS
Метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей.
⠀⠀⠀LESS
Динамический язык стилей с открытым исходным кодом.
⠀⠀⠀jQuery
Библиотека JavaScript, которая помогает проще добавлять интерактивные элементы на сайты.
⠀⠀⠀AJAX
Технология, которая позволяет обмениваться веб-браузеру и серверу данными в фоне и делает приложения интерактивными и отзывчивыми.
⠀⠀⠀SQL
Язык, с помощью которого разработчики работают с базами данных.

На курсе вы создадите до 13 проектов в портфолио

С помощью HTML и CSS вы создадите одностраничный сайт-каталог со списком экскурсий по Санкт-Петербургу.
Сайт экскурсий
С помощью JavaScript, HTML и CSS вы создадите одностраничный сайт, на котором соберёте информацию о себе, презентуете свои проекты и навыки.
Сайт-портфолио
С помощью HTML- и CSS вы напишите код для адаптивной страницы сайта магазина сантехники по готовому макету из Figma. Также вы настроите сайт для разных типов экранов.
Веб-страница по готовому макету: сайт магазина сантехники
Используете обработчики событий и элементы DOM, чтобы создать онлайн графический редактор. Научитесь работать с тегом и добавите интерактивные элементы в проект.
Онлайн-графический редактор
По готовому макету сайта вы напишете HTML- и CSS-код для всех страниц сайта, добавите интерактивные элементы и настроите автоматическую генерацию контента из JSON-файлов.
Многостраничный сайт-ресторана
Разработаете базовый чат с библиотекой jQuery, отработаете AJAX-запросы и настроите общение браузера с сервером.
Чат с использованием технологии AJAX
С помощью классов напишете робота для игры в шахматы.
Робот для игры в шахматы
Спроектируете базу данных для бизнеса, свяжете её с другими и настроите обмен информацией между таблицами одного проекта.
База данных магазина
Тариф Pro
Тариф Pro
Тариф Pro
Разработаете программу для игры в крестики-нолики, которая запускается в терминале или IDE.
Игра «Крестики-нолики»
Создадите приложение, в котором пользователь сможет редактировать, хранить и удалять заметки.
Приложение для заметок
Разработаете бота, в котором пользователи смогут вести свой календарь: добавлять, редактировать, удалять и просматривать события.
Telegram-бот с функцией календаря
Вы создадите сайт, на который добавите информацию о рейтинге 100 лучших фильмов по мнению IMDB. Будете работать с компонентами React и настроите темы оформления.
Сайт с рейтингом фильмов
Создадите многостраничный сайт для веб- и мобильной версии. Интегрируете API, чтобы загрузить информацию о реальных фильмах. Протестируете ваше веб-приложение и проведёте рефакторинг кода.
Сайт для поиска фильмов

Направим вас на стажировку Eduson X IMPET SPACE уже во время обучения

Вы получите опыт работы над реальным проектом в кросс-функциональной команде. Научитесь разделять задачи на этапы, распределять роли в команде и взаимодействовать с бизнес-аналитиками, project-менеджерами, UX/UI-дизайнерами и тестировщиками.

Вас будет сопровождать ментор по Frontend-разработке: он поддержит в сложных моментах, скорректирует ход работы, ответит на вопросы и поможет реализовать проект так, чтобы он демонстрировал ваши компетенции.

Курс состоит из

1. Введение в IT

Программа обучения
до 13 проектов
от 200 интерактивных уроков
Скачать полную версию в PDF
6 часов в неделю
Доступ навсегда
Устройство компьютера
•
Процессоры и графические ускорители
•
Характеристики оперативной памяти
•
Постоянная память
•
Дисковые массивы
•
Монитор и его характеристики
•
Интерфейсы
•
Сервер и его особенности
•
Операционная система
•
Межпроцессное взаимодействие
•
Устройство программирования
•
Навыки работы с кодом
•
Современные языки и среды программирования
•
Навыки программирования на любом языке
•
Архитектура программного обеспечения
•

2. Жизненный цикл ПО

Введение в SCRUM
•
Принципы командной работы по Agile
•
Введение в Agile
•
Модели SDLC и Waterfall
•
Процесс тестирования в разных методологиях разработки ПО
•
Trello, Asana и Jira
•

3. Введение в профессию Frontend-разработчика

Языки frontend-разработки: HTML, CSS, JS
•
Профессия веб-разработчик и чем он занимается
•
Выбор IDE для веб-разработки
•
Работа с системой контроля версий Git
•

4. Основы веб-разработки

Устройство браузеров
•
Виды и структуры сайтов
•
Этапы создания сайта
•
SEO-оптимизация
•
Принципы работы веб-сервера
•
Публикация сайта в интернете
•

5. Базовая вёрстка: HTML и CSS

Построение семантической структуру страницы
•
Работа с формами и таблицами в HTML
•
HTML и создание HTML-страницы
•
Очистка и редактирование HTML-кода
•
Создание и подключение CSS-стилей
•
Оформление страниц с помощью СSS
•
Работа с блоками и позиционированием элементов
•
Тестирование сайтов с помощью DevTools
•

6. Работа с макетом сайта

Работа с разными форматами изображений и дизайн-макетов
•
Работа с цветами в дизайне и веб-разработке
•
Дизайн-макет сайта
•
Работа с Figma: интерфейс программы, основные инструменты и функции
•
Перевод элементов Figma на русский язык
•
Автоматизация работы в Figma
•
Использование модульных сеток
•

7. Продвинутая вёрстка

Flexboх
•
Переменные и продвинутые инструменты CSS
•
Отличие HTML5 от предыдущих версий
•
Grid Layout
•
Фреймворки CSS
•
Препроцессоры SASS и LESS
•
Обеспечение доступности вёрстки с помощью WAI-ARIA
•
Разработка SEO-оптимизированного сайта
•
Стандарт семантической разметки Schema.org
•

8. Основы программирования

Абстракции
•
Математика для IT-специалистов
•
В какой IDE лучше всего писать код
•
Простые и сложные типы данных
•
Множества
•
Выражения, ветвления и циклы
•
Функции и окружение
•
Рекурсия, рекурсивный и итеративный процессы
•

9. Базовый JavaScript

Переменные и типы данных в JavaScript
•
Использование DevTools для отладки веб-страниц
•
Устройство JavaScript и его роль в frontend-разработке
•
Виды операторов
•
Ветвления
•
Циклы
•
Функции
•
Массивы
•
Объекты
•
DOM
•
События
•
Оптимизация веб-страницы
•

10. Введение в дизайн и UX/UI

Элементы
•
Текст
•
Фреймы и фигуры
•
Маски
•
Автоматизация работы в Figma
•
Adobe: Illustrator, InDesign, Photoshop
•
Обзор графических редакторов
•
Линии, формы и текстуры в дизайне
•
Растровая и векторная графика
•
Тренировка насмотренности
•
Композиция
•
Управление вниманием зрителя
•
Шрифты
•
Типографика
•
Цвет в дизайне
•
Модульные сетки
•

11. Продвинутый JavaScript

Библиотеки и модули
•
Замыкания в JavaScript
•
Классы и ООП в JavaScript
•
Библиотека jQuery
•
Асинхронный код на JavaScript
•
Создание сетевых запросов
•
AJAX
•
Хранение данных на стороне клиента
•
Обработка ошибок в JavaScript
•
Упаковка проекта с помощью Webpack
•

12. Стиль написания кода

Введение в SCRUM
•
Принципы командной работы по Agile
•
Введение в Agile
•
Модели SDLC и Waterfall
•
Процесс тестирования в разных методологиях разработки ПО
•
Trello, Asana и Jira
•
Публикация сайта в интернете
•
IDE для веб-разработки
•
Установка и настройка Visual Studio Code
•
Система контроля версий Git и GitHub
•

13. React

Создание и оформление элементов сайта с помощью React
•
Компоненты и JSX в React
•
Введение в React
•
Props в React
•
React Hooks и states
•
React Router
•
React Context
•
State managers в React
•
React Dev Tools
•

14. Основы работы с базами данных

Подключение к базе данных с помощью Dbeaver
•
Проектирование, установка и настройка базы данных
•
Применение баз данных в бизнесе
•
Типы данных в PostgreSQL
•
Операторы SQL
•
Работа с таблицами, шаблонами и фильтрами
•

15. Основы backend-разработки

API и REST API
•
Инструменты backend-разработчика
•
Клиент-серверная архитектура
•
Интеграция API из других приложений
•
Проектирование API
•
Особенности GraphQL и Websocket
•

16. Тестирование

Тестирование API
•
Unit-тесты для JavaScript-кода
•
Выбор метода тестирования
•

17. Как выложить сайт и поддерживать готовый проект

Основы методологии DevOps
•
Как анализировать, отлаживать, оптимизировать и изменять код
•
Как опубликовать сайт в интернете
•

18. Начало работы с Python

Тариф Pro
Стандарты PEP 8
•
Установка IDE PyCharm для работы с Python
•
Язык программирования Python
•
Настройка окружения
•
Типы данных в Python
•
Числа
•
Булевские переменные
•
Строки
•
Списки
•
Кортежи
•
Множества
•
Словари
•
Работа с исключениями в Python
•

19. Функции

Тариф Pro
Конструкции args и kwargs
•
Аргументы и работа с ними
•
Функция и её создание
•
Локальные и глобальные переменные
•
Документирование функции и возвращение нескольких значений из функции
•

20. Условия, циклы и рекурсии

Тариф Pro
Использование условных операторов в функциях и комбинирование условий
•
Условный оператор if — elif — else
•
Понятие условий и работа с ними
•
Тернарный оператор и the Anti-IF Campaign
•
Условный оператор в коде: методика раннего прерывания
•
Избегание длинных условий в коде
•
Избегание дублирований
•
Как не усложнять код
•
Циклы в Python и работа с ними
•
Рекурсии в Python
•

21. Модули и файлы

Тариф Pro
Основные модули в Python и работа с ними
•
Создание модулей
•
Импорт модулей и элементы модулей
•
Работа с файлами
•

22. Основы объектно-ориентированного программирования

Тариф Pro
Наследование
•
Инкапсуляция
•
Создание класса и его объекта
•
Полиморфизм
•
Написание кода на Python в рамках ООП
•

23. Работа с базами данных. Продвинутый уровень

Тариф Pro
Функция для обработки данных
•
Фильтр с помощью условных операторов
•
Шаблон для поиска значений в таблице
•
Анализ ER-диаграммы
•
Выбор и соединение данных из разных таблиц
•
Группировка строки и вычисления над ними
•
Анализ данных о бизнесе с помощью SQL
•
Транспонирование таблиц с помощью группировки
•
Подзапросы в SQL
•
Оконные функции в SQL
•
Описание структуры базы данных с помощью операторов DDL
•
Экспорт данных и SQL-запросы
•
Работа с базами данных в Python
•

24. Системы контейнеризации

Тариф Pro
Упаковка приложения в контейнер
•
Контейнеризация
•
Виртуализация
•

25. Подготовка к запуску и продакшн

Тариф Pro
Рефакторинг
•
Unit-тесты
•
Управление зависимостями в Poetry
•
Применение принципа и практики CI/CD
•
Развёртывание приложения при помощи виртуализации
•
Настройка пайплайнов
•

26. Удалённая работа

Как выстраивать отношения с коллегами в распредёленной команде
•
Как организовать свой день на удалённой работе
•
10 мифов об удалённой работе
•
Как организовать совместную работу над проектом в разных часовых поясах
•
Правила деловой переписки
•

Итоговый проект и диплом

После успешной сдачи итогового проекта вы получите диплом о профессиональной переподготовке установленного образца и сертификат Eduson Academy.

Эти документы подтвердят вашу квалификацию для будущих работодателей.

Студенты любят наши курсы

и пишут о них отзывы — вы можете посмотреть!

Cредний рейтинг — 4,6

219 отзывов
130 отзывов
Рейтинг: 4,8
91 отзыв
Рейтинг: 4,6
137 отзывов
Рейтинг: 4,6
58 отзывов
Рейтинг: 4,7
Рейтинг: 4,6

Лидирующие компании доверяют Академии Eduson обучение своих сотрудников

выпускников курса достигают своей цели и находят работу в IT
78%
Ваш результат в конце обучения
студентов берут заказы на разработку уже во время обучения
26%
вырастают до уровня middle быстрее, чем через год после окончания курса
62%
Тренажёры собеседований, решение тестовых заданий
2
Разработка стратегии трудоустройства в РФ и за рубежом
3
Разбор собеседований от нанимающих менеджеров
4
Пошаговое составление резюме и подготовка сопроводительных писем
1
Интенсив по LinkedIn
5
Карьерная консультация от директора по аналитике Работа.ру Алены Артемьевой
6
Рассылка резюме по партнёрам
7

Искусственный интеллект найдёт вам оффер мечты

Eduson

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

FindTheJob

+

Преподаватели — разработчики в ведущих российских и мировых компаниях

Илья Воронцов
Преподаватель курсов по алгоритмам и структурам данных, веб программированию, машинному обучению в школах «Интеллектуал» и «Силаэдр»
Организатор хакатона и ментор
Научный сотрудник в лаборатории биоинформатики в РАН
лет в IT
9+
Александр Гавриков
Основатель и ведущий fullstack-разработчик в Legeferenda
Победитель конкурса blockchain-проектов в номинации «Лучшее технологическое решение» в HU University of Applied Sciences Utrecht
ex-CTO в ShareAware, LUISS EnLabs (Италия)
лет в разработке
12+
Юлия Зотова
Независимый консультант по Java, Python и облачным технологиям
Консультант в Get-Mentor
Ментор на курсах по программированию в НИУ ВШЭ
лет опыта в разработке веб-приложений
9+
Евгений Дуров
ex-Senior Product Designer в Тинькофф, ex-Product Designer в Яндексе
UX-дизайнер в международной маркетинговой платформе
лет в дизайне цифровых продуктов
10+
Лидировал разработку инновационной функции для мобильного банкинга
Арман Черхаров
Работал fullstack-разработчиком в международных проектах в США и Китае
Senior Frontend-инженер в онлайн-кинотеатре START
лет в IT-сфере
10+
Ментор, карьерный консультант
Владислав Абрамов
Развивает и расширяет команду frontend-разработчиков, которые создают продукты на React Native
Инженер ПО, тимлид в Armenotech
лет в разработке
5+
Выпустил в продакшн веб-сайт для "Союзмультфильма", который получил премию "Рунета" 2019
Екатерина Земскова
Бэкенд-разработчик cian.ru
Принимает участие
в разработке фичей связанных с пользовательским опытом
7 лет опыта в QA automation
В разработке уже 5 лет
лет в IT
12+
Антон Струнге
Сотрудничал с Porsche, Bacardi, ВТБ, Сбером, МИР, РСХБ, X5 Retail Group, культурным центром ЗИЛ, фестивалем Typomania, агентствами Mosaic, Journey, LYRA и BURO Moscow
Работал в Британской высшей школе дизайна и Universal University, МХАТе им. М. Горького, агентстве Label Up
лет в дизайне
11+
Андрон Алексанян
CEO & Founder платформы для подготовки к собеседованиям IT Resume
Исполнительный директор региональной сети «Аптека-Центр»
лет в IT
10+
Преподаватель в МФТИ

Выберите формат обучения под ваши задачи

Обучение можно оплатить сразу или воспользоваться беспроцентной рассрочкой на 24 месяца. Мы свяжемся с вами и поможем выбрать наилучшие условия обучения.
При покупке —
второй курс в подарок
до 3 ноября
Frontend-разработчик. PRO
Оформить заявку
7000
Рассрочка без скидки
28 000
руб/мес
руб/мес
* срок рассрочки — 24 месяца
Стажировка в IT-компании
Помощь в трудоустройстве
Разработка на Python
Основы ООП
Доступ навсегда
Работа с базами данных. Продвинутый уровень
Диплом о профессиональной переподготовке
Frontend-разработчик. Базовый
Оформить заявку
4958
Рассрочка без скидки
19 833
руб/мес
руб/мес
* срок рассрочки — 24 месяца
Стажировка в IT-компании
Frontend-разработчик. VIP
Оформить заявку
Помощь в трудоустройстве
11875
Рассрочка без скидки
47 500
Доступ навсегда
руб/мес
руб/мес
Диплом о профессиональной переподготовке
* срок рассрочки — 24 месяца
Всё, что есть в тарифе PRO
+ дополнительно:
Онлайн-формат с обратной связью от экспертов
Системы контейнеризации
Подготовка к запуску и продакшн
7,5 месяцев
10 месяцев
10 месяцев
Для тех, кто хочет обучаться с поддержкой ментора
Модуль Redux
Основы тестирования: Vite.js
Курс «Веб-дизайн: старт карьеры»

Eduson

+

Возможность пройти курс быстрее
Часто задаваемые вопросы
+7 (800) 101-14-04
academy@eduson.tv
Популярные курсы
Финансовый директор
Excel и Google-таблицы
Sales MBA
Soft skills: для руководителя
Методист
Бизнес-аналитик
Управление и бизнес
Аналитика и финансы
HR
Маркетинг
Бухгалтерия
Soft skills
Продажи
Направления обучения
Направления
Публичная оферта
Психология
Участник
Skolkovo
Excel
115280, г. Москва, ул. Ленинская слобода, д. 19
Профессии на удаленке
Политика обработки персональных данных
Финансы
© 2020–2024 Eduson Academy
Программы МВА
Государственная лицензия №00374370 от 27 мая 2022 года
Популярные курсы
Для физических лиц
Подарочные сертификаты
Для юридических лиц и ИП
Блог
Контакты
Академия
Корпоративное обучение
Партнерская программа
Реферальная программа
Сведения об образовательной организации
Вакансии
Дизайн
Рассрочка за 2 минуты, не выходя из дома
Выбрать курс
Рассрочка за 2 минуты, не выходя из дома
Отзывы
Записаться на курс