Что вы будете делать, когда станете фронтенд-разработчиком

Короткий ответ — вместе с другими разработчиками создавать сайты и веб-приложения

Фронтенд-разработчик отвечает за «внешнюю» часть сервиса: заголовки, меню, карточки. Например, белый фон у этого блока, скруглённые края у картинки или кнопка «У меня есть вопросы про учёбу», которая всегда отображается в правом нижнем углу этой страницы, — всё это вы сможете сделать, когда станете фронтенд-разработчиком.

Главное о профессии

Плюсы и минус

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

Технологии и инструменты, которые нужно знать

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

HTML
CSS + SCSS
Flexbox
Git
Bash
JavaScript
TypeScript
React
Redux
Grid Layout
DOM
Webpack + Vite
React Router
ООП

Сколько можно зарабатывать

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

Источник: Хабр Карьера
69 000 ₽
Junior
174 000 ₽
Middle
309 000+ ₽
Senior

Чтобы стать фронтендером,
не нужно техническое образование

Освоить эту профессию и начать путь в IT может каждый. Вот истории наших выпускников — смогли они, получится и у вас.
4,7
TutorTop
4,5
IRecommend
4,3
Отзовик

Чему вы научитесь за 10 месяцев

  • Писать код на HTML, CSS, JavaScript и TypeScript
  • Создавать сайты и веб-приложения под любые задачи бизнеса
  • Применять паттерны проектирования и ООП
  • Создавать приложения с использованием библиотеки React
  • Разбираться в технических заданиях от заказчиков
  • Проектировать решения бизнес-задач через разработку
  • Писать код в реальной среде разработки веб-приложений
  • Тестировать сайты и веб-приложения, устранять ошибки
  • Размещать сайты и веб-приложения в интернете

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

Учёбе нужно уделять не меньше 20 часов в неделю.
Заниматься можно в любое время, главное — вовремя сдавать проекты на проверку.

YandexGPT помогает учиться

Когда в теории что-то непонятно, нейросеть объяснит это другими словами. А в конце каждого урока подготовит краткий пересказ о самом главном.

Полная программа курса

Составили программу по образовательной модели 4C/ID: будете учить только то, что нужно для решения конкретных практических задач фронтендера
7 тем・1 проект・1 неделя
Бесплатно
HTML, CSS, JavaScript: бесплатный модуль
Почувствуете себя в роли разработчика и поймёте, хотите ли развиваться в этом направлении. Изучите базовый синтаксис HTML и CSS. Научитесь размещать блоки на веб-странице, менять шрифт и цвета.
  • Первый код
  • HTML
  • CSS
  • CSS-свойства
  • JavaScript
Первый код
Что делают разработчики, базовые элементы, HTML, CSS
Что такое HTML и CSS
Теги HTML, заголовки, абзац, ссылка, об атрибутах, один тег в другом, изображения, структура HTML-документа, правила CSS, тег style, CSS-файл, блоки, отступы, подпись к обложке, playground
Базовые CSS-свойства
Собрать лендинг, размеры в пикселях, размеры в процентах и долях, цвета в HTML, фон элемента, позиция, размер, повтор фона, прозрачность, коробка в коробке, наследование, типографика, больше вёрстки
Больше CSS
Пик вёрстки, новая секция, классы, типографика, поток и блочная модель, внешние и внутренние отступы, короткая запись свойств, границы, внешний и внутренний фокус элемента, блочные + строчные, расположение элементов по центру — margin: auto, тени, подвал сайта, центрировать по вертикали
JavaScript
Числа, строки, арифметика строк, переменные, подключение JavaScript к HTML, массивы, случайные числа, функции с аргументами, возвращаемое значение, выбор и изменение элементов страницы, булевы величины, объекты, подключение внешних библиотек, циклы, релиз
Напишете простую программу на JavaScript и сделаете страницу интерактивной
2
28 тем・2 проекта・6 недель
HTML и CSS: лейаут, доступность и интерактив
  • Вёрстка
  • Bash и Git
  • Шрифты и типографика
  • Семантика
  • Atomic
  • Grid Layout
  • Кодстайл
  • Псевдоклассы и псевдоэлементы
  • БЭМ
Bash и Git. Основы
Установка и настройка Git, SSH-ключ, настройка аккаунта GitHub, основы командной строки Bash, основные команды для организации командной работы с Git в локальных и удалённых репозиториях
Шрифты и типографика
Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков
Семантика и глобальные атрибуты
Семантика HTML5, структура документа, оптимизация вёрстки, использование идентификаторов
Флексбокс-вёрстка
Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex-basis, flex-grow и flex-shrink
Позиционирование элементов, стилизация форм
Статическое, относительное и абсолютное позиционирования, z‑index, фиксированное и липкое позиционирование, outline, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, кастомные элементы ввода
Grid Layout
Гриды, терминология гридов, столбцы и строки внутри грид-контейнера, отступы, функция repeat(), фракция, расположение элементов, грид-области, выравнивание сетки и содержимого грид-областей, наложение элементов
Настройка страницы, мета, встраиваемый контент
Настройки страницы, описание сайта для браузеров и поисковых машин, фавикон, разметка OpenGraph, страница в странице, API YouTube, виджеты-информеры, тег <video>, тег <audio>
Псевдоклассы, псевдоэлементы, доступность
LVHA, фокусы, ::marker, ::selection, скринридеры, базовые правила a11y при вёрстке, дерево доступности, декоративные и контентные изображения, поля форм, ARIA, настройки уменьшения движения и повышения контрастности
Создадите одностраничный сайт и напишете CSS для работающего приложения
Одностраничный сайт «Оно тебе надо»
Одностраничный сайт «Оно тебе надо»
Написание CSS стилей для приложения «Посмотри в окно»
Написание CSS стилей для приложения «Посмотри в окно»
3
18 тем・2 проекта・6 недель
Дизайн, адаптивная вёрстка и декорирование
  • Кастомные переменные
  • Адаптивность
  • Препроцессоры и постпроцессоры
  • Анимации и декорирование
  • 3D-трансформации
  • Модальные окна
  • Основы дизайна
Разработка интерфейса для разных устройств
Дизайн в мире множества устройств, разница между резиновой и адаптивной вёрсткой, адаптивный макет, синтаксис медиазапросов, характеристики устройств, пользовательские предпочтения, синтаксис диапазонов, выражения от контейнера
Растровая графика, единицы измерения и функции
Форматы, оптимизация изображений, плотность пикселей, адаптивный выбор изображений из набора, image-set(), loading="lazy", относительные размеры блоков и текстовых элементов, функции calc(), min(), max(), clamp()
SVG
Экспорт svg, использование svg: инлайн, <img>, фон, use, fill, stroke, анимация и оптимизация svg, svg-маски
2D-трансформации + транзишены
Transition, матрица трансформаций, transform, transform-origin, translate, rotate, skew, scale, применение нескольких трансформаций
Анимации
Animation (name, duration, iteration-count, direction, timing-function, delay, play-state, fill-mode), @keyframes, оптимальное использование анимации, will-change
Декорирование
Бордер-имидж, фильтры, тени, линейный, радиальный и конический градиенты, репит-градиент, множественные градиенты, бленд-мод
3D-трансформации
Матрица 3D-преобразований, transform-style, perspective и perspective-origin, backface-visibility
Сделаете адаптивный сайт с разными цветовыми темами, а затем самостоятельно соберёте веб‑приложение
Адаптивный сайт «Сложно сосредоточиться»
Адаптивный сайт «Сложно сосредоточиться»
4
11 тем・1 проект・6 недель
Базовый JavaScript
  • Введение в JavaScript
  • Примитивные типы данных
  • Объектная модель документа (DOM)
  • Условия и циклы
  • Функции, массивы и объекты
Примитивы
Примитивные типы данных, оператор typeof, undefined и null, строки, числа и специальные числовые значения
Знакомство с DOM
DOM: выбор элементов, атрибуты и их методы, манипуляции с классами CSS, свойства textContent, события, методы insertAdjacentHTML и insertAdjacentText
Дебаггинг JavaScript
Как читать ошибки, типы ошибок, логические ошибки и console.log, поиск документации, отладка через debugger, conditional breakpoints
Методы работы с данными, условия, циклы
Let и const против var, методы поиска в строке, преобразования строк и работы с числами, явное и неявное преобразования типов, логические операторы, НЕ (!), ИЛИ (||), И (&&), XOR (^), switch-case, тернарный оператор, циклы, директивы break и continue
Создание, добавление и удаление элементов в DOM
InnerHTML, createElement и createTextNode, добавление элементов на страницу, удаление и перемещение элементов, клонирование элементов, template-элементы, объект event, родственные связи в DOM
Массивы
Объединение и преобразование в строку, управление элементами на любых позициях, коллекции в DOM, методы forEach и map, функции обратного вызова и их аргументы, методы filter, some, every, find, reduce, сортировка массива
Функции
Область видимости функции, rest и spread, деструктурирование аргументов
Объекты
Создание объектов и запись свойств, прототипное наследование, дескрипторы свойств, деструктурирование массивов и объектов
Создадите интерактивную страницу с фотографиями. Сначала всё сверстаете, потом напишете логику на JavaScript
Веб-сервис «Mesto»
Веб-сервис «Mesto»
5
7 тем・1 проект・3 недели
Продвинутый JavaScript
  • Webpack
  • Модули в JavaScript
  • Асинхронность
  • Работа с браузерными событиями
  • Формы и их валидация
  • Работа с API
Сборка проекта. Webpack
Библиотека пакетов NPM, подключение репозитория NPM‑пакетов, установка и настройка Webpack, настройка сборки, транспиляция JS: установка Babel, настройка обработки HTML и CSS, минификация CSS и добавление префиксов, использование PostCSS для минификации CSS и добавления префиксов
Модули в JS
IIFE, инкапсуляция и модули, директивы export, import, ES6, особенности работы модулей в браузере, локальный сервер
Продвинутый JavaScript. Асинхронность
Асинхронные операции, колбэки, асинхронные колбэки, таймеры, event loop, promise
Обработка событий
События клавиатуры, объекты event: клавиатура и мышь, снятие слушателя, отмена стандартного поведения браузера, всплытие и делегирование событий
Работа с формами
Доступ к форме из JavaScript, отправка формы; событие submit, получение элементов форм, доступ к значениям элементов форм, события change и input, методы reset и submit
Валидация форм
Встроенная браузерная валидация форм, валидация с помощью JavaScript, связываем JS-методы валидации с DOM, валидация нескольких полей и форм, взаимодействие с другими элементами DOM, введение в регулярные выражения и кастомные сообщения об ошибках
Работа с API
Протокол HTTP, запросы из JavaScript, формат JSON, HTTP-запрос, ответ, инструменты: вкладка Network
Подключите веб-сервис к серверу, чтобы все изменения данных сохранились и сервисом смогли пользоваться другие люди
Веб-сервис «Mesto» (продолжение)
Веб-сервис «Mesto» (продолжение)
6
8 тем・2 проекта・6 недель
TypeScript и ООП
  • Объектно-ориентированное программирование
  • Принципы разработки ПО
  • Работа с окружением
  • TypeScript
Введение в TypeScript
Динамическая и статическая типизация, документация JSDoc, проверка типов во время исполнения, настройка и инструментарий TS, массивы и объекты, специальные типы, создание собственных типов
Объектно-ориентированное программирование
Источники контекста, this, способы привязки, синтаксис классов в JS, добавление и типизация полей и методов классов, интерфейсы классов, принципы в ООП, инкапсуляция, наследование, полиморфизм
Основы TypeScript
Приведение типов, типизация DOM-элементов и их событий, типизация стандартных объектов JS, файлы деклараций d.ts, создание и использование библиотек
Продвинутый TypeScript и ООП
Статические поля и методы, имплементация интерфейсов, дженерики, условные типы
Принципы разработки ПО
Композиция классов, паттерны singleton, adapter/facade/proxy, observer, builder
Работа с окружением
IntersectionObserver, ResizeObserver, FileReader, локальные хранилища
ООП в интерфейсах
Дропдаун, табы, аккордеон, слайдер, галерея, уведомления, календарь, игра морской бой
Спроектируете ООП-архитектуру интернет-магазина с каталогом товаров и корзиной, задокументируете в UML. Реализуете с помощью TS с подключением к серверу
Одностраничное приложение интернет-магазина «Web-ларёк»
Одностраничное приложение интернет-магазина «Web-ларёк»
7
8 тем・1 проект・3 недели
Основы React
  • Концепция SPA
  • CRA: настройка и сборка проекта
  • Синтаксис JSX
  • UseState
  • UseEffect
  • React DevTools
CRA
Подготовка окружения, сборка проектов Vite или Webpack, установка eslint c набором правил Airbnb, prettier, использование SCSS, stylelint, husky
Синтаксис JSX
React и JSX, синтаксис JSX: основы, списки и события, функциональные компоненты
Компоненты и их жизненный цикл
Классовые компоненты, жизненный цикл классовых компонентов, virtual DOM
Состояния и эффекты
Хуки, рефы, useState, useEffect, useLayoutEffect, useRef, кастомные хуки
React DevTools
Установка и использование расширения React DevTools, сборка проекта
Импорт модулей, CSS‑модули
Импорт модулей и изображений, работа с CSS, шрифты, CSS-модули, использование clsx
Библиотеки компонентов
Storybook, реализация компонента в изоляции, разработка через тестирование, сборка проекта как библиотеки для переиспользования
Реализуете страницу блога с настраиваемым через CSS-переменные дизайном
Страница блога
Страница блога
8
4 темы・1 проект・3 недели
Роутинг и авторизация
  • Библиотека Redux
  • React Router
Роутинг в приложениях
Маршрутизация на стороне сервера и клиента, клиентский роутинг и History API, установка и подключение React Router, создание маршрутов, навигация и ссылки, динамические маршруты, фильтрация и сортировка значений
Авторизация и роутинг в веб‑приложениях
Идентификация, аутентификация и авторизация, токены, авторизация доступа с помощью сессий, сохранение данных о пользователе, cookie в веб-приложениях, защита маршрутов на фронтенде, выход из системы
Взаимодействие в режиме реального времени: WebSockets
Открытие и закрытие соединения, события WebSocket, получение и отправка данных, отладка и тестирование WebSocket в консоли разработчика
Глобальное состояние для Redux
Redux Toolkit, RTK Query, redux-thunk, redux-saga, кастомные middleware и enhancer, интеграция с API, Redux DevTools
Реализуете глобальное состояние, роутинг и авторизацию в космической бургерной
Приложение «Stellar Burger»
Приложение «Stellar Burger»
9
4 темы・1 проект・3 недели
Тестирование React-приложений
Научитесь выстраивать удобную для тестирования структуру компонентов, оптимизировать приложения, проводить юнит- и интеграционное тестирование, подготавливать и публиковать в продакшен, деплоить на собственный сервер.
10
1 месяц
Проектный модуль
Работа в команде с менеджерами проектов, тимлидами, системными аналитиками, дизайнерами и разработчиками над реальным крупным проектом заказчика. Опыт, ничем не отличающийся от реального, работа по agile-методологии с применением всего, что изучали ранее, — и даже больше. Под присмотром опытных наставников и тимлидов студенты работают над CRM- и ERP-системами, реализуют чаты и микросервисные архитектуры, строят сложные приложения из отдельных микрофронтендов, применяют Docker и CI для деплоя приложения на серверы.
11
Параллельный модуль・27 недель
Софтскилы для разработчиков
Узнаете, как организовать учебный процесс, адаптироваться в новой среде и работать в команде. Теория и учебные задания помогут сделать учёбу и будущую работу легче и осознаннее.
12
Карьерный центр・30 часов
Программа трудоустройства
Составите резюме, соберёте портфолио, напишете мотивационное письмо. С нашей поддержкой разработаете стратегию поиска и подготовитесь к интервью.
13
Карьерный центр・3–13 недель
Программа акселерации
Будете откликаться на вакансии, писать сопроводительные письма, делать тестовые и ходить на собеседования. Мы вместе будем анализировать отказы и ошибки, чтобы улучшить результаты. Этот этап заканчивается, когда вы получаете предложение о работе, на которое согласны.

10 000+ выпускников Практикума уже нашли новую работу

Это подтверждено исследованием, которое мы провели вместе с Высшей школой экономики. Вот в каких компаниях они работают:

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

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

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

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

Подробнее о профессии фронтенд-разработчика вы можете узнать из нашей статьи.
Каким требованиям нужно соответствовать?
Вам не понадобятся специальные навыки или опыт — мы обучим всему с нуля. Главное — иметь компьютер и достаточно времени для занятий. Выше можно посмотреть программу, чтобы оценить количество учебного материала и свои возможности.
Какой компьютер нужен для учёбы?
Минимальные системные требования, которым должен соответствовать ваш компьютер или ноутбук.

Операционная система:
• Windows 10×64 Home или новее;
• Linux (актуальные LTS-версии Ubuntu, Debian и другие);
• macOS 11 Catalina или новее.

Оперативная память: от 4 Гб.

Процессор: Intel Core i3 начиная с 3 поколения. Лучше — i5 8 поколения или аналогичный от AMD.

Интернет: скорость от 5 Мбит, лучше — от 20 Мбит.

Жёсткий диск: свободное место на HDD или SSD — от 20 Гб.
Кто будет меня учить?
Все наставники — практикующие специалисты: сотрудники Яндекса и других крупных компаний. Программу составляют опытные преподаватели и методисты, а ещё действующие специалисты Яндекса, Школы анализа данных и других лидеров технологической и образовательной индустрий.
Смогу ли я найти работу после обучения?
Гарантий нет, но мы верим, что сможете. Работодателям важно, чтобы вы справлялись с реальными задачами, а не просто обладали набором знаний. Мы учим применять знания на практике, а также предлагаем помощь HR-специалистов из нашего карьерного центра. Но вам точно придётся приложить усилия, чтобы найти работу: активно откликаться на вакансии, проходить собеседования, показывать свои проекты и делать тестовые задания.

По данным исследования Высшей школы экономики, 69% наших выпускников среди тех, кто хотел сменить профессию, начинают новую карьеру после обучения. Больше половины из них — во время учёбы и в первые 2 месяца после выпуска. Эти цифры подкреплены публичным отчётом о трудоустройстве студентов Практикума.
А если я хочу работать в Яндексе?
Некоторые наши студенты работают в сервисах Яндекса, в том числе и в Практикуме. Но с нашей стороны было бы нечестно что-либо гарантировать и завышать ваши ожидания.

Без опыта попасть в крупную IT-компанию возможно, хотя и сложно. Программа составлена так, чтобы вы могли начать карьеру после выпуска и набраться первого опыта. С ним вам будет значительно проще претендовать на позицию в крупных компаниях.
Хорошо, а вы можете помочь с поиском работы?
Да. По желанию студенты могут попасть на программу трудоустройства, которая длится от 2 недель. С поддержкой карьерного центра Практикума студенты оформляют портфолио, проходят тренировочные собеседования с их последующим разбором и учатся писать сопроводительные письма.

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

Если вам понадобится сделать паузу в учёбе или уделить больше времени закреплению материала, напишите своему куратору.
Если не понравится, я могу вернуть деньги?
Да, причём в любой момент. Если обучение в потоке уже началось, придётся оплатить прошедшие дни — но мы вернём деньги за оставшееся время обучения. Более подробно рассказываем об этом в седьмом пункте оферты.
Получу ли я какой-то документ после курса?
Если у вас есть среднее профессиональное или высшее образование, после курса вы получите диплом о профессиональной переподготовке.

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

Ежемесячные платежи работают так: вы вносите первую оплату, и в этот момент привязывается карта. С этой карты автоматически будут списываться следующие платежи каждые 30 календарных дней. Например, оплатили 25 марта — следующий платёж пройдёт 24 апреля. Обучение будет стоить меньше, если оплатить весь курс сразу.

Через компанию: юридические лица — резиденты РФ также могут оплатить обучение в Практикуме. Оставить заявку на оплату от юрлица можно на странице для корпоративных клиентов.
Можно ли оплатить курс за счёт работодателя?
Да, работодатель может оплатить учёбу полностью или разделить оплату с вами: например, поделить сумму 50/50 или 75/25.

Такая оплата пройдёт по счёту или двустороннему договору, а ИП могут оплатить с бизнес-счёта. Если работодатель купит обучение сразу 10 и больше сотрудникам, сделаем скидку 10%.

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

Для этого нужно подать заявление на налоговый вычет через личный кабинет на сайте nalog.ru (в него можно войти через аккаунт на Госуслугах).

К заявлению нужно приложить:
•‎ Справку 2-НДФЛ от работодателя.
•‎ Договор на обучение, в вашем случае это оферта Практикума.
•‎ Лицензию на образовательную деятельность. Вот наша.
•‎ Чек об оплате обучения. Мы отправляем его на электронную почту. Если не найдёте чек у себя в почте, напишите в чат службы поддержки — вышлем копию.
•‎ Справку о получении образовательных услуг — её тоже нужно запросить в чате поддержки.

Подробнее о налоговом вычете — на сайте Федеральной налоговой службы.

Давайте поможем

Напишите, как вас зовут и по какому номеру можно связываться — позвоним и расскажем всё про курсы