Каталог курсов

Frontend-разработчик: расширенный курс

Научитесь создавать сайты и приложения, проектировать интерфейсы и работать с Flexbox и JavaScript

Соберите портфолио из 9 проектов

Начните работать по специальности через 6 месяцев обучения

Поможем подобрать обучение
Нажимая кнопку, принимаю условия политики и пользовательского соглашения
Когда
4 марта 2024 — 1 октября 2025

Длительность

20 месяцев

Формат обучения

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

Документ

Диплом о профессиональной переподготовке 

Акция
-40%
Акция
-40%
40%
с 21.02 по 23.02

Когда весна не за горами

Скидка уже включена в стоимость. Оплатите до 23 февраля, чтобы скидка не сгорела.

Условия акции

Frontend-разработчик отвечает за внешнюю сторону сайта

Фронтендеры создают лицо сайта — то, что вы видите на любой странице в интернете. А ещё организуют работу компонентов: контента, кнопок, внутренних ссылок. Ключевая задача таких специалистов — перенести дизайн-макет в код и сделать так, чтобы
всё работало удобно и быстро.

На курсе вы научитесь не только верстать и создавать сайты на JavaScript, но и углубленно изучите библиотеку React и освоите основные soft skills. 

Frontend-разработчики востребованы на рынке

Только на hh.ru более 1500 вакансий с требованиями разработки
на JavaScript 

Зарплата frontend-разработчика

по данным hh.ru в среднем составляет
  • 70 000–120 000 ₽


    Junior-специалист
    с опытом до 1  года

  • 120 000–170 000 ₽


    Middle-специалист
    с опытом от 1 до 3 лет

  • от 170 000 ₽


    Senior-специалист
    c опытом более 3 лет

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

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

Узнаете о тонкостях вёрстки под iOS и другие мобильные операционные системы

Решать задачи с использованием JavaScript на продвинутом уровне

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

Оформлять решения, как это делают опытные разработчики

Изучите подходы к решению задач и варианты практического использования инструментов

Использовать библиотеку React и Redux

Сможете применять библиотеку для создания качественных интерфейсов, освоите композицию компонентов и способы интеграции с React

Вы создадите 9 масштабных проектов для портфолио

Интернет-магазин обуви

Создадите работающее и функциональное приложение, используя готовую вёрстку и бэкенд

Программа курса —
20 месяцев

Чтобы программа соответствовала запросам рынка труда, мы проводим 3 этапа исследований

105 часов теории, 528 часов практики

 Занятия проходят 2 раза в неделю в будни с 18:00 МСК

 На лекции и практические задания понадобится 7–10 часов в неделю

 Записи вебинаров, лекции, тесты, тренажёр, презентации и другие полезные материалы хранятся в личном кабинете

HTML-вёрстка с нуля до первого макета

Курсовой проект — вёрстка сайта

Научитесь верстать сайты на HTML и CSS и вносить изменения в существующую вёрстку.
По итогам этого модуля вы уже самостоятельно сверстаете лендинг.

11 часов теории

48 часов практики

Теги для вёрстки контента страницы

Теги для вёрстки структуры страницы

Теги для вёрстки форм

Селекторы CSS

Определение контекста элементов

Блочная модель

Позиционирование элементов

Оформление текста

Оформление декоративных элементов

Состояние интерактивных элементов

Выполнение проекта по итогам модуля: вёрстка макета сайта — 24 часа практики

Пример готовой работы

Мобильная и адаптивная вёрстка

Курсовой проект — адаптивная вёрстка сайта

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

11 часов теории

52 часа практики

Вёрстка резинового макета

Резиновые изображения

Медиа-запросы и медиа-функции

Вёрстка мобильных устройств

Вёрстка адаптивного макета

Адаптивная типографика, выбор breakpoints

Адаптивные изображения

Выполнение проекта по итогам модуля: адаптивная мобильная версия макета сайта — 24 часа практики

Пример готовой работы 

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

Курсовой проект — игра на JavaScript

Познакомитесь с азами программирования, напишете первые строки кода и создадите первые простые проекты на самом популярном языке JavaScript. Разберётесь с видами языков программирования и поймёте, как выбрать «свой» язык с учётом личных интересов и профессиональных планов. В дипломном проекте вы разработаете онлайн-игру, похожую на «Монополию».

10 часов теории

48 часов практики

Алгоритмы

Переменные, числа и строки

Логика и математика

Ветвление кода

Алгоритм с множественным выбором

Ошибки в коде

Массивы

Циклы

Подпрограмма, функция

Объекты

Синхронное и асинхронное выполнение алгоритма

Выполнение проекта по итогам модуля: игра «Крестики-нолики» на JavaScript — 24 часа практики

Пример готовой работы

Git — система контроля версий

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

4 часа теории

3 часа практики

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

Основные операции (фиксация и откат изменений, поиск, история)

Работа с сервисом GitHub

Ветки, слияние веток и разрешение конфликтов

Командная работа

Основы JavaScript

Курсовой проект — биржа валюты

Глубже погрузитесь в JavaScript — один из самых популярных и гибких языков программирования. Начнёте с азов синтаксиса, узнаете, как работает сайт, и за 8 первых занятий напишете своё первое веб-приложение. Далее узнаете о дополнительных возможностях, которые дает браузер. Подключив скрипт к HTML-документу, получите к нему доступ и сможете делать документ живым: изменять его и реагировать на действия пользователя.

11 часов теории

48 часов практики

Основы отладки

Базовый синтаксис

Расширенный синтаксис

Типы данных

Функции, объекты

Прототип и конструктор объекта

ООП в JS (ES6)

Обработка исключений и замыкания

Прототип массива, функции высшего порядка

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

Выполнение проекта по итогам модуля: сайт-биржа по продаже криптовалюты — 24 часа практики

Пример готовой работы     

Основы JavaScript в браузере

Курсовой проект — учёт финансов

Узнаете о дополнительных возможностях, которые дает браузер — Web API. Подключите скрипт к HTML-документу и получите к нему доступ, чтобы делать документ живым: изменять его и реагировать на действия пользователя.

10 часов теории

56 часов практики

Возможности JavaScript в браузере

Способы поиска нужного HTML-элемента

Объект события

DOM

Работа с HTML-формами

Изменение структуры HTML-документа

Асинхронные запросы

Хранение состояния на клиенте

Выполнение проекта по итогам модуля: веб-менеджер личных финансов — 24 часа практики

Пример готовой работы 

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

Курсовой проект — онлайн-игра

Научитесь работать с современным инструментом для организации рабочего окружения (npm, webpack) и разберётесь с наиболее сложными разделами языка: прототипной моделью, promises и асинхронными программированием (async/await).

16 часов теории

72 часа практики

Стандарты и рабочее окружение

Модули и Webpack

Платформы: браузер vs Node.js

Unit-тестирование

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

Object, Reflection и Proxy

Регулярные выражения

Контейнеры

ArrayBuffer

Promises, async/await, timers & event loop

Символы, итераторы, генераторы

TypeScript

Выполнение проекта по итогам модуля: онлайн-игра «ходилка» в стиле фэнтези — 24 часа практики

Пример готовой работы 

Продвинутый JavaScript в браузере

Курсовой проект — бот для поиска информации

Освоите инструменты, ускоряющие работу, научитесь на профессиональном уровне работать с формами: проводить валидацию, использовать продвинутые элементы — слайдеры, календари, файлы. Познакомитесь с API, предоставляемым браузером: геолокацией, нотификацией, медиа, веб-сокетами. Через анимацию добавите интерактивности в свои приложения.

16 часов теории

72 часа практики

Рабочее окружение

Работа с DOM (объектная модель документа)

Обработка событий

Организация тестирования (Unit, E2E)

Работа с HTML-формами, LocalStorage

Drag & Drop, работа с файлами

Работа с HTTP

Анимация и CSS

Geolocation, Notification, Media

RxJS

EventSource, Websockets

WebWorkers, ServiceWorkers

Выполнение проекта по итогам модуля: бот для поиска и хранения информации — 24 часа практики

Пример готовой работы 

Библиотека React

Курсовой проект — интернет-магазин

Освоите одну из самых популярных библиотек на JavaScript — React. При помощи этой библиотеки вы сможете создавать интерактивные пользовательские интерфейсы. Вам достаточно описать, как части интерфейса приложения выглядят в разных состояниях. React будет своевременно их обновлять, когда данные изменяются. Вы сможете создавать инкапсулированные компоненты с собственным состоянием, а затем объединять их в сложные пользовательские интерфейсы.

13 часов теории

76 часов практики

Компоненты, композиция компонентов

События и состояние

Props

Формы

Жизненный цикл и работа с HTTP

HOC

hooks, Context API

React Router

Redux и Redux Thunk, Redux Observable, Redux Saga

Выполнение проекта по итогам модуля: интернет-магазин обуви — 24 часа практики

Пример готовой работы 

Дополнительные модули

Английский язык для начинающих разработчиков

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

5 часов теории

13 часов практики

Чтение технической документации

Языки программирования. Составление отчётов об ошибках
QA-тестирование
Слова из технической сферы, которые часто произносят неправильно
Навык просмотра англоязычного видеоконтента
Самопрезентация. Elevator Pitch
Прохождение собеседований
Высококлассное резюме и сопроводительное письмо
Email-переписка
Общение в технических чатах
Как вести звонки и встречи
Как учить лексику
Как учить грамматику

Алгоритмы и структуры данных

Научитесь проектировать быстрые алгоритмы, применять стандартные структуры данных, а главное — мыслить как программист. Знание алгоритмов повышает шансы на трудоустройство, так как в большинстве компаний задачи на алгоритмы — неотъемлемая часть собеседования и тестового задания.

8 часов теории

Введение в алгоритмическую сложность. Бинпоиск

Динамическое программирование и «жадность»

Сортировки

Динамический массив. Списки. Деки

Пирамиды и деревья поиска

Хеширование

Графы

Орграфы

Основы графического дизайна

Узнаете о принципах колористики и цветоведении, научитесь работать с композицией и типографикой.

Курс включает видеолекции и тесты с самопроверкой.

6 часов теории

Колористика и цветоведение

Композиция

Типографика, шрифтовой дизайн

Soft Skills

Изучите навыки self-менеджмента, которые помогают отслеживать своё состояние, время, процессы. Узнаете о базовых управленческих навыках, актуальных для руководителей любого уровня.

23 часа теории

8 часов практики

Личная эффективность

Целеполагание

Принятие решений

Процесс коммуникации

Коммуникации для руководителя

Нетворкинг

Переговоры

Командная работа

Построение карьеры и работа на фрилансе

Карьера в Frontend-разработке

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

6 часов теории

Пошаговый план поиска работы

Анализ рынка труда

Резюме, портфолио frontend-разработчика и сопроводительное письмо

Собеседование: как подготовиться и пройти

Статистика и измерение эффективности поиска работы

Индивидуальная карьерная консультация

Фриланс: первые шаги

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

6 часов теории

Как начать работать на фрилансе

Как фрилансеру правильно организовать рабочий процесс, пространство и файлы

Как понять, будете ли вы успешны на фрилансе

Биржа FL

Дипломный проект

Суммирует все знания и навыки, полученные вами на курсе

Вы реализуете систему бронирования ж/д билетов

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

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

Изучаете материалы в личном кабинете

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

Все уроки теперь и в мобильном приложении

Мы разработали платформу для смартфонов, чтобы вы могли учиться в спортзале, самолёте, на даче или в пути.

  • Учитесь, где нравится 

    Доступ к учебным материалам всегда под рукой: это экономит ваши ресурсы

  • Занимайтесь даже без интернета

    Можно скачать материалы на телефон и учиться даже там, где плохая связь

  • Получайте подсказки по дедлайнам

    Приложение работает как помощник: напомнит про домашнюю работу или вебинар

  • Загружайте задания с телефона

    Удобно отслеживать статус практических работ и отвечать на комментарии преподавателя

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

Ваше резюме после обучения

Frontend-разработчик

    Ключевые навыки

  • Вёрстка под тач и мобильные устройства
  • Работа с Flexbox и JavaScript
  • Способность правильно использовать переменные, числа и строки

  • Создание прототипа и конструктора объекта
  • Использование выражений в JavaScript
  • Применение символов, итераторов и генераторов
  • Импорт и экспорт модулей
  • Создание интерактивных веб-страниц
  • Работа с файлами и медиаресурсами
  • Применение принципов клиент-серверного взаимодействия
  • Создание одностраничных веб-приложений (SPA)
  • Навыки использования библиотеки React, JSX, React router, VirtualDom

Инструменты

JavaScript
JavaScript
Самый популярный язык программирования для разработки веб-приложений. Единственный язык, который поддерживается на любых устройствах и платформах.
JSX
JSX
Расширение синтаксиса стандартного JavaScript. Позволяет писать очень похожий на HTML код прямо в JavaScript-коде, упрощая создание React-компонентов и улучшая читаемость кода. Перед выполнением JSX преобразуется в JavaScript.

XHR и AJAX

XHR и AJAX

Asynchronous JavaScript And XML (AJAX) — технология обращения к серверу без перезагрузки страницы. Используется для реализации элементов интерфейса, динамической загрузки данных. Объект XMLHttpRequest (XHR) даёт возможность делать подобные HTTP-запросы.
React
React
Простая и удобная JavaScript-библиотека для создания пользовательских интерфейсов. React предоставляет виртуальный DOM API для взаимодействия между кодом и реальным DOM. В основе лежит использование компонентов — частей пользовательского интерфейса, содержащих в себе разметку и функциональность.

VirtualDOM

VirtualDOM

Техника и набор библиотек / алгоритмов, которые позволяют улучшить производительность на клиентской стороне.
Flexbox
Flexbox
С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту или прибивать их к нижнему краю.

React Router

React Router

Предоставляет базовые функции и компоненты для работы в двух окружениях (браузере и react-native).
HTML5
HTML5
Язык для структурирования и представления содержимого интернета. В HTML версии 5 улучшена поддержка мультимедиа-технологий, при этом сохранена обратная совместимость, читаемость кода для человека и простота анализа для парсеров.
CSS3
CSS3
Язык для описания внешнего вида страниц сайта. Возможности CSS3 — создание анимации без использования JavaScript, поддержка градиентов, теней и многое другое.
GitHub
GitHub
GitHub —крупнейший веб-сервис для совместной работы разработчиков над кодом и хостинга проектов. GitHub основан на системе контроля версий GIT.

EnglishDom

EnglishDom

Видео-лекции, которые помогут вам начать разговаривать на английском языке, как настоящий разработчик.

Вашу квалификацию подтвердят официальные документы

Мы обучаем по государственной лицензии и выдаём документы установленного образца.

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

Поможем найти
ту самую работу
Центр развития карьеры
помогает трудоустроиться студентам Нетологии
1
Научим составлять резюме и проходить интервью
Разберём ваш предыдущий опыт, определим сильные стороны и поможем составить успешное резюме. Научим презентовать себя и проведём тест-драйв интервью.
2
Поможем наработать практику и оформить портфолио
Приобретёте практический опыт и наполните портфолио ещё во время обучения. Разберёте тестовые задания от работодателей и сможете принять участие в их проектах.
3
Предложим стажировки и проекты от партнёров
Предоставим доступ к карьерной странице со стажировками и вакансиями от партнёров Нетологии. Будем делиться подборками с новыми интересными вакансиями.
header
Воркшопы и много практики
Вы сможете сформировать портфолио, выполняя задания компаний-партнёров Нетологии или проходя у них стажировки. Сфокусируетесь на практике, откликах и результате. Поработаете над реальными заданиями, защитите свои решения и получите развивающую обратную связь.
84%
студентов нашли работу с помощью Центра развития карьеры
4 075
компаний-партнёров в базе Нетологии для отработки практики
skyenglamodaramblerraiffeisenvkozonagimakasperskyalfa2gisgettaic

Проекты студентов курса

Кликайте на картинку и смотрите, что делают наши студенты — вы сможете также

Наталья Рыжова, адаптивная вёрстка сайта для разных устройств

Алексей Стегура, «Крестики-нолики» на JavaScript

Сусанна Алиева, вёрстка сайта под разные браузеры

Наталья Рыжова, подбор шрифта для надписи на футболке

Наши студенты достигают своих целей. Вот их истории

Наталья Скрепинская

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

Роман Четпоров

Отличный курс. Позволил мне как абсолютному новичку плавно войти в web-разработку. Это то, с чего нужно начинать. Вся информация отлично структурирована, и видно, что преподаватели любят и знают своё дело на 100%. И что очень важно: ни один вопрос (даже вне лекций) не останется без ответа.

Иван Николаенко

«Я начал чувствовать, что способен реализовать себя как высококлассного специалиста».

Предложение для компаний

Вы можете обучить сотрудников на этом курсе. Адаптируем программу под ваш бизнес и предоставим отчёты об успеваемости. При обучении сразу нескольких сотрудников — более выгодная стоимость.

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

Пробуйте себя в разных направлениях бесплатно

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

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

Вернём деньги, если обучение не подойдёт

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

Подробные условия

40%
с 21.02 по 23.02

Когда весна не за горами

Скидка уже включена в стоимость. Оплатите до 23 февраля, чтобы скидка не сгорела.

Условия акции
19 месяцев обучения, старт 4 марта
Запишитесь или получите консультацию
Частями без переплат
3 750 ₽/месяц
6 250 на 36 месяцев
Одним платежом
со скидкой 5%
128 300
 ₽
225 000
-40%
акция действует
до 23 февраля
Нажимая кнопку, принимаю условия политики и пользовательского соглашения
Нашли дешевле? Сделаем скидку
Вернём деньги, если обучение не подойдёт
Возможность получить налоговый вычет — 13%
19 месяцев обучения, старт 4 марта
Frontend-разработчик: расширенный курс
Частями без переплат
3 750 ₽/месяц
6 250 на 36 месяцев
Одним платежом
со скидкой 5%
128 300
 ₽
225 000
-40%
акция действует
до 23 февраля
Нашли дешевле? Сделаем скидку
Вернём деньги, если обучение не подойдёт
Возможность получить налоговый вычет — 13%
Запишитесь или получите консультацию
Нажимая кнопку, принимаю условия политики и пользовательского соглашения

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

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

  • Кто будет проверять мои домашние задания?

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

  • В чём заключается помощь с трудоустройством?