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

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

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

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

Плюсы и минус

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

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

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

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

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

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

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

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

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

Учёбе нужно уделять не меньше 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, командная строка, настройка и подключение Git к проекту, первый коммит, командная работа, регистрация на GitHub, SSH-ключи, локальный и удалённый репозитории, клонирование репозитория
Шрифты и типографика
Подключение шрифтов к странице, настройки шрифтов, подключение внешних шрифтов, оформление текста, переполнение текстовых блоков
Семантика и глобальные атрибуты
Контейнеры HTML5, семантика и выразительность HTML, таблицы, приведение кода в порядок, язык документа и его элементов, идентификаторы
Флексбокс-вёрстка
Флекс-контейнер, направление внутри флекс-контейнера, выравнивание по основной и дополнительной осям, перенос флекс-элементов, gap, свойства флекс-элементов, flex basis, flex-grow и flex-shrink
Позиционирование элементов, стилизация форм
Статическое, относительное и абсолютное позиционирования, z-index, фиксированное и липкое позиционироване, inset, стилизация полей ввода, кнопок и ярлыков, псевдоклассы валидации, выпадающие списки, accent-color
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, свойства .innerHTML и .textContent, события, методы insertAdjacentHTML и insertAdjacentText
Дебаггинг JavaScript
Как читать ошибки, типы ошибок, логические ошибки и console.log, поиск документации, отладка через debugger
Методы работы с данными, условия, циклы
Let и const против var, методы поиска в строке, преобразования строк и работы с числами, явное и неявное преобразования типов, логические операторы, НЕ (!), ИЛИ (||), И (&&), switch-case, тернарный оператор, циклы, директивы break и continue
Создание, добавление и удаление элементов в DOM
innerHTML, createElement и createTextNode, добавление элементов на страницу, удаление и перемещение элементов, клонирование элементов, template-элементы, объект event, родственные связи в DOM
Массивы
Объединение и преобразование в строку, управление элементами на любых позициях, коллекции в DOM, методы forEach и map, функции обратного вызова и их аргументы, методы filter, some, every, find, reduce, сортировка массива
Функции
Область видимости функции, затенение идентификаторов, способы создания функции, стрелочные функции, аргументы по умолчанию, функции с неопределённым числом аргументов, поднятие переменных и функций
Объекты
Создание объектов и запись свойств, обращение к свойству, операторы: delete, in, перебор свойств, передача по ссылке, сравнение объектов, поверхностное копирование объектов, глубокое копирование объектов
Создадите интерактивную страницу с фотографиями. Сначала всё сверстаете, потом напишете логику на JavaScript.
Веб-сервис «Mesto»
Веб-сервис «Mesto»
5
7 тем・1 проект・3 недели
Продвинутый JavaScript
  • Webpack
  • Модули в JavaScript
  • Асинхронность
  • Работа с браузерными событиями
  • Формы и их валидация
  • Работа с API
Сборка проекта. Webpack
Библиотека пакетов NPM, подключение репозитория NPM пакетов, установка и настройка Webpack, настройка сборки, транспиляция JS: установка Babel, настройка обработки HTML и CSS, минификация CSS и добавление префиксов
Модули в JS
IIFE, инкапсуляция и модули, директивы export и import, особенности работы модулей в браузере, локальный сервер
Продвинутый 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
Динамическая и статическая типизация, самодокументированный код, проверка типов во время исполнения, настройка и инструментарий TS, массивы и объекты, специальные типы, создание собственных типов
Объектно-ориентированное программирование
Источники контекста, this, способы привязки, синтаксис классов в JS, добавление и типизация полей и методов классов, интерфейсы классов, принципы в ООП, инкапсуляция, наследование, полиморфизм
Основы TypeScript
Приведение типов, типизация DOM-элементов и их событий, типизация стандартных объектов JS, файлы деклараций d.ts, создание и использование библиотек
Продвинутый TypeScript и ООП
Статические поля и методы, имплементация интерфейсов, дженерики, условные типы
Принципы разработки ПО
Композиция классов, паттерны singleton, adapter/facade/proxy, observer, builder
Работа с окружением
Тултип, валидация, дропдаун, модальное окно, табы, аккордеон, слайдер, галерея
ООП в интерфейсах
Дропдаун с асинхронным поиском, всплывающее подтверждение/уведомление, интерфейсы: сообщение об ошибке, список дел (ToDo), чат, календарь, редактируемая таблица, редактор фото
Разработаете фронтенд интернет-магазина с каталогом товаров, корзиной и оформлением заказа. Затем с помощью TypeScript и ООП расширите функционал приложения.
Одностраничное приложение интернет-магазина «Web-ларёк»
Одностраничное приложение интернет-магазина «Web-ларёк»
7
8 тем・1 проект・3 недели
Основы React
  • Концепция SPA
  • CRA: настройка и сборка проекта
  • Синтаксис JSX
  • useState и useEffect
  • React DevTools
CRA
Create React App, новый проект, распаковка и структура проекта
Синтаксис JSX
React и JSX, синтаксис JSX: основы, списки и события, функциональные компоненты
Компоненты и их жизненный цикл
Классовые компоненты, жизненный цикл классовых компонентов, virtual DOM
useState и useEffect
Хуки, внутреннее состояние: useState, эффекты: useEffect, зависимости
React DevTools
Установка и использование расширения React DevTools, сборка проекта
Импорт модулей, CSS-модули
Импорт модулей и изображений, работа с CSS, шрифты
Библиотеки компонент
Добавление классового компонента, работа в изоляции, storybook
Самостоятельно напишите фундамент проектного приложения на React.js.
Приложение «Stellar Burger»
Приложение «Stellar Burger»
8
4 темы・1 проект・3 недели
Роутинг и авторизация
  • Библиотека Redux
  • React Router
Роутинг в приложениях
Маршрутизация на стороне сервера и клиента, клиентский роутинг и History API, установка и подключение React Router, создание маршрутов, навигация и ссылки, динамические маршруты, фильтрация и сортировка значений
Авторизация и роутинг в веб-приложениях
Идентификация, аутентификация и авторизация, токены, авторизация доступа с помощью сессий, сохранение данных о пользователе, cookie в веб-приложениях, защита маршрутов на фронтенде, выход из системы
Взаимодействие в режиме реального времени: WebSockets
Открытие и закрытие соединения, события Websocket, получение и отправка данных, отладка и тестирование WebSocket в консоли разработчика
WS и Redux: собственный middleware для работы с сокетами
Принцип реализации WebSocket с Redux (JS), middleware, actions и reducers для работы с WebSocket, конфигурация Store и подключение Middleware
Создадите Redux-хранилище. Реализуете роутинг и авторизацию в приложении.
Приложение «Stellar Burger» (продолжение)
Приложение «Stellar Burger» (продолжение)
9
4 темы・1 проект・3 недели
Тестирование React-приложений
Научитесь ускорять работу React-приложений, проводить их тестирование, выводить в продакшен и релизить на собственном удалённом сервере.
10
1 месяц
Проектный модуль
Вам предстоит поработать в команде над задачей от заказчика. Вы создадите и опубликуете приложение с использованием знаний, которые получили ранее
11
Параллельный модуль・27 недель
Софтскилы для разработчиков
Узнаете, как организовать учебный процесс, адаптироваться в новой среде и работать в команде. Теория и учебные задания помогут сделать учёбу и будущую работу легче и осознаннее
12
Карьерный центр・30 часов
Программа трудоустройства
Составите резюме, соберёте портфолио, напишете мотивационное письмо. С нашей поддержкой разработаете стратегию поиска и подготовитесь к интервью
13
Карьерный центр・Подготовка к интервью тем・3–13 недель
Программа акселерации
Будете подаваться на вакансии, писать сопроводительные письма, делать тестовые и ходить на собеседования. Мы вместе будем анализировать отказы и ошибки, чтобы улучшить результаты. Этот этап заканчивается, когда вы получаете предложение о работе, на которое согласны

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

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

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

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

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

Операционная система:
• Windows 10×64 Home или новее;
• Windows 11×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 апреля. Обучение будет стоить меньше, если оплатить весь курс сразу.

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

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

Мы работаем с 12:00 до 21:00 по Астане и связываемся в течение одного дня. Если оставите заявку сейчас, то перезвоним уже в рабочее время.