О профессииПрограммаКак учимКоманда курсаТарифы
КомпаниямНачать учиться бесплатно

Каждой компании нужен сайт или приложение, а значит, нужны и фронтенд‑разработчики

Они отвечают за внешнюю часть сервиса: заголовки, меню, карточки

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

Освоите профессию с нуля за 10 месяцев

Получите мощный набор знаний и инструментов

Мы регулярно обновляем программу и учим актуальным навыкам, которые нужны работодателям.

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

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

Составили программу по образовательной модели 4C/ID: будете учить только то, что нужно для решения настоящих задач
7 тем・1 проект・1 неделя
Бесплатно
HTML, CSS, JavaScript: бесплатный модуль
Почувствуете себя в роли frontend-разработчика и поймёте, хотите ли развиваться в программировании. Изучите базовый синтаксис 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 недель
Софтскилы для разработчиков
Узнаете, как организовать учебный процесс, адаптироваться в новой среде и взаимодействовать в команде. Теория и практические задания помогут сделать учёбу и будущую работу легче и осознаннее.
Карьерный центр・1 месяц
Карьерный трек: подготовка к трудоустройству
Составите резюме, которое привлечёт внимание рекрутеров, и напишете сопроводительное письмо для откликов на вакансии. Узнаете, как правильно оформлять портфолио, и построите стратегию поиска работы.
Карьерный центр・До 6 месяцев
Акселерация: активный поиск работы с поддержкой HR-экспертов
Будете откликаться на вакансии, делать тестовые и ходить на собеседования, а мы вас поддержим. Например, расскажем о типичных ошибках в общении с работодателями и как их избежать. Акселерация может продолжаться до 6 месяцев — обычно этого достаточно, чтобы получить первую работу в IT.
Дополнительно・В любое время
Нейросети для разработчиков
Научитесь с помощью YandexGPT:
  • Генерировать код для создания функций, классов, обработки данных.
  • Искать ошибки в коде.
  • Искать информацию о синтаксисе, функциях, библиотеках и других аспектах языка.
  • Вести документацию.
  • YandexGPT

Получите сертификат о переподготовке

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

Очень много практики

Cоберёте солидное портфолио: в базовом курсе сделаете 11 проектов, а в расширенном — 13

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

Создадите одностраничный сайт и напишете CSS для работающего приложения

Ещё 7 месяцев после выпуска бесплатно помогаем с поиском работы — для этого у нас целый карьерный центр

Готовим к выходу на рынок IT и поддерживаем, когда начинаете общаться с работодателями

10 000+ выпускников Практикума находят работу после учёбы

Среди тех, кто хотел сменить профессию. Больше половины из них — во время учёбы и в первые 2 месяца после выпуска.

Это данные исследования ВШЭ: они основаны на опыте выпускников Яндекс Практикума на российском рынке труда

Начать учиться бесплатно

Как устроена учёба

Никаких давно снятых видео и длинных лекций

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

По расписанию только воркшопы с наставниками, остальное — в своём темпе

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

Учёба в Практикуме похожа на реальную работу

Программа поделена на спринты — отрезки по 2–3 недели, за которые вы изучаете тему и делаете проект. Потом отправляете его на ревью, а эксперт проверяет и комментирует. И тот же цикл дальше, пока не дойдёте до конца.

В курсе есть модуль по YandexGPT

Работодатели ценят специалистов, которые умеют работать с нейросетями

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

С чем YandexGPT может помочь разработчикам:
  • с генерацией и проверкой кода
  • ведением документации
  • ответами на вопросы о языке

Эти выпускники уже стали фронтенд‑разработчиками. Большинство — без опыта в IT

БулатBookmate
31 год

Всю жизнь мечтал писать код, но работал PR-менеджером. Пробовал разные курсы, но все их бросал. А в 2019 году нашёл Практикум и теперь работаю frontend-разработчиком в Bookmate.

Спросить про обучение
МаксимLoymax
30 лет

Я работал в продажах, затем в такси и не представлял, чем именно хочу заниматься. Однажды случайно наткнулся на Практикум и прошёл курс. С тех пор уже вырос до middle frontend‑разработчика в Loymax. Параллельно работаю в Яндекс Практикуме.

Спросить про обучение
АлёнаSayana
27 лет

5 лет работала юристом, но мне всегда были интересны технологии и я решила стать frontend-разработчиком. Благодаря поддержке одногруппников и наставника в Практикуме, получилось сдать все проекты, а затем устроиться в стартап Sayana.

Спросить про обучение
МишаOttofeller
31 год

7 лет я работал поваром, но хотел расти в другом направлении. Мне был интересен дизайн и программирование. Поэтому я пошёл учиться на курс. Порой было непросто, но я справился и теперь работаю в компании Ottofeller.

Спросить про обучение

Попробуйте любой формат курса бесплатно — выбрать один-единственный можно позже

  •                                        

Что входит в любой формат

  • Ещё можно платить частями Практикуму столько месяцев, сколько идёт курс. Общая стоимость будет меньше, чем в рассрочку от банка
  • Вернём деньги в любой момент за остаток курса,
    если что-то не понравится. Подробности — в 7 пункте оферты

На этом курсе вы освоите профессию с нуля

А если вы уже знаете HTML, CSS, JS и имеете опыт коммерческой разработки, вам подойдёт курс «Мидл фронтенд-разработчик»

Изучите продвинутый JavaScript и TypeScript, научитесь использовать API браузера, освоите DevOps и прототипирование

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

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

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

Операционная система:
• 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 частей:
  • Карьерный трек: студенты при поддержке наших HR-экспертов составляют резюме или оформляют портфолио, пишут сопроводительные письма.
  • Акселерация: студенты начинают активный поиск работы, а мы им помогаем — отвечаем на вопросы, проводим тренировочные собеседования, предлагаем вакансии от партнёров.
Важно помнить, что мы не ищем работу за вас, а помогаем её найти.
Что делать, если я не справлюсь с нагрузкой?
В программе предусмотрены каникулы, во время которых можно отдохнуть или повторить сложные темы.

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

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

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

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

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

Или позвоните нам сами:

+998(78)122-86-14

А если не любите голосом — напишите: