Мини-курс

Frontend-разработчик с нуля

8 коротких уроков, чтобы понять, как делают сайты и веб-приложения, которые видит пользователь, — и решить, ваше ли это.

8 уроков и итоговый тест
≈ 3 ч на весь курс

Начать с урока 1 Кому подходит ↓

Коротко о профессии

Frontend-разработчик делает ту часть сайта или веб-приложения, которую человек видит и с которой работает: страницы, кнопки, формы, анимации. Он превращает макет дизайнера в код на HTML, CSS и JavaScript, получает данные с сервера и следит, чтобы всё было удобно на телефоне и компьютере. Это профессия программиста: начать можно с нуля, но учиться придётся несколько месяцев.

Зарплаты сильно зависят от города и опыта — смотрите актуальные вакансии: frontend-разработчик на hh.ru.

Что делает frontend-разработчик

Когда вы открываете сайт доставки, листаете меню, добавляете блюдо в корзину и видите, как меняется сумма, — всё это работа frontend-разработчика. Он делает интерфейс: то, что видит пользователь, и то, как оно отвечает на его действия.

Его инструменты — три языка браузера. HTML описывает, из чего состоит страница: заголовки, кнопки, картинки. CSS — как она выглядит: цвета, шрифты, расположение. JavaScript — как она ведёт себя: что происходит при нажатии, как подгружаются данные, как проверяется форма.

Во всех уроках курса мы будем делать один пример — сайт кофейни «Зерно»: меню с ценами, корзину и форму заказа. На нём разберём, как макет превращается в работающую страницу.

Кому подойдёт, а кому нет

Скорее подойдёт, если

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

Скорее не подойдёт, если

Не хочется программировать — тогда присмотритесь к дизайну или тестированию
Раздражают мелочи вроде отступов в 2 пикселя и разных браузеров
Нужна работа через месяц: на подготовку к первой работе уходят месяцы
Интереснее данные и логика на сервере — тогда посмотрите в сторону бэкенда

Программа: 8 уроков

Урок 1 из 8 пройден знаете

Кто такой frontend-разработчик и чем он занят

Чем занимается frontend-разработчик, чем frontend отличается от backend, с кем он работает в команде и на каких технологиях строится профессия.
15 мин · Дальше: HTML и CSS: вёрстка интерфейса
Открыть
Урок 2 из 8 пройден знаете

HTML и CSS: вёрстка интерфейса

Как frontend-разработчик верстает страницу по макету: смысловая разметка HTML, блочная модель CSS, расположение элементов с помощью Flexbox и Grid.
20 мин · Дальше: JavaScript в браузере: элементы страницы и события
Открыть
Урок 3 из 8 пройден знаете

JavaScript в браузере: элементы страницы и события

Как JavaScript оживляет страницу: DOM, поиск элементов, обработчики событий, изменение текста и классов. Делаем корзину кофейни, которая пересчитывает сумму.
25 мин · Дальше: Адаптивность и доступность: телефон, планшет, программы экранного доступа
Открыть
Урок 4 из 8 пройден знаете

Адаптивность и доступность: телефон, планшет, программы экранного доступа

Как сделать сайт удобным на любом экране и для любого человека: медиазапросы и подход mobile first, относительные единицы, подписи к картинкам и полям, контраст и работа с клавиатуры.
20 мин · Дальше: Данные с сервера: API, JSON и запросы fetch
Открыть
Урок 5 из 8 пройден знаете

Данные с сервера: API, JSON и запросы fetch

Как frontend получает данные от backend: что такое API и JSON, как отправить запрос с помощью fetch, показать данные на странице и не забыть про загрузку и ошибки.
25 мин · Дальше: Фреймворки: React и Vue — что это и зачем они
Открыть
Урок 6 из 8 пройден знаете

Фреймворки: React и Vue — что это и зачем они

Зачем frontend-разработчикам фреймворки: компоненты, состояние и автоматическое обновление страницы. Пример корзины на React, сравнение с Vue и когда переходить к фреймворку.
20 мин · Дальше: Инструменты: Git, npm, Vite и инструменты разработчика в браузере
Открыть
Урок 7 из 8 пройден знаете

Инструменты: Git, npm, Vite и инструменты разработчика в браузере

Чем пользуется frontend-разработчик каждый день: Git для истории кода, npm для библиотек, сборщик Vite для проекта и инструменты разработчика в браузере для поиска ошибок.
20 мин · Дальше: Как стать frontend-разработчиком: план обучения, портфолио, первая работа
Открыть
Урок 8 из 8 пройден знаете

Как стать frontend-разработчиком: план обучения, портфолио, первая работа

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

Итоговый тест

16 вопросов по всем урокам, около 12 минут. В конце — разбор, какие темы повторить, и вывод по вашим ответам: стоит ли идти в профессию дальше.

Пройти тест

Что дальше

Если тема зацепила, продолжить можно так.

Бесплатно, своими силами

Пройдите курсы «HTML и CSS», «Основы JavaScript» и «Git и GitHub» на этом сайте — это фундамент профессии.
Сверстайте по готовому макету одностраничный сайт и опубликуйте его на GitHub Pages.
Сделайте страницу, которая берёт данные из открытого учебного API и показывает их списком с поиском.
Пройдите официальное руководство React на react.dev и повторите тот же проект на React.
Соберите 3–4 проекта в портфолио: ссылки на работающие сайты и код в репозиториях.

С курсом и наставником

Готовим подборку курсов: цена, срок, формат и есть ли помощь с работой. Сравним несколько школ, а не одну «лучшую».

Частые вопросы

Нужен ли опыт программирования?

Для этого курса — нет: он показывает, из чего состоит профессия. Для работы понадобятся HTML, CSS и JavaScript на хорошем уровне — их можно изучить в соседних курсах сайта.

Чем frontend отличается от backend?

Frontend — то, что работает в браузере и видит пользователь. Backend — то, что работает на сервере: хранит данные, проверяет оплату, отправляет письма. Подробно — в уроке 1.

Сколько времени займёт этот курс?

Около трёх часов: 8 уроков по 15–25 минут и итоговый тест. Удобный темп — урок в день.

Нужно ли сразу учить React?

Нет. Сначала — уверенные HTML, CSS и JavaScript, иначе фреймворк будет казаться магией. Когда и зачем переходить к React — в уроке 6.

Дадут ли сертификат?

Нет: мини-курс — знакомство с профессией. В конце вы увидите результат теста и темы, которые стоит повторить.