Профессия
Научитесь с нуля проектировать интерфейсы сайтов и приложений на HTML, CSS, JavaScript и React
Создадите до 13 проектов для портфолио
Пройдёте стажировку в IT-компании уже во время обучения
Frontend-
разработчик
Найдёте работу, или вернем деньги
+
-60%
до 20 сентября
Записаться на курс
Гибкий график
Учитесь онлайн в удобное время
Интерактивный формат
Видеолекции, скринкасты, тренажёры, тесты
Длительность
От 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
С помощью классов напишете робота для игры в шахматы.
Робот для игры в шахматы
Спроектируете базу данных для бизнеса, свяжете её с другими и настроите обмен информацией между таблицами одного проекта.
База данных магазина
Разработаете программу для игры в крестики-нолики, которая запускается в терминале или IDE.
Игра «Крестики-нолики»
Создадите приложение, в котором пользователь сможет редактировать, хранить и удалять заметки.
Приложение для заметок
Разработаете бота, в котором пользователи смогут вести свой календарь: добавлять, редактировать, удалять и просматривать события.
Telegram-бот с функцией календаря
Вы создадите сайт, на который добавите информацию о рейтинге 100 лучших фильмов по мнению IMDB. Будете работать с компонентами React и настроите темы оформления.
Сайт с рейтингом фильмов
Создадите многостраничный сайт для веб- и мобильной версии. Интегрируете API, чтобы загрузить информацию о реальных фильмах. Протестируете ваше веб-приложение и проведёте рефакторинг кода.
Сайт для поиска фильмов
Тариф Pro
Тариф Pro
Тариф Pro

Направим вас на стажировку 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. Продвинутая вёрстка