Дорожная карта фронтенд-разработчика⁠⁠

Рассказываем, что должен уметь фронтенд-разработчик. Проверьте свой уровень знаний и какие еще навыки можете развить, чтобы быть вне конкуренции.

Как работает интернет и верстка

Как бы странно это ни звучало, для начала стоит изучить принципы работы интернета. Мы настолько привыкли ко всемирной паутине, что мало задумываемся, какие процессы приводят сайты в движение: как работает клиент-серверная архитектура, что такое DNS, хостинг, домен и HTTP-протокол — все это нужно знать и понимать.

Далее переходим к базе, с которой начинается обучение на фронтенд-разработчика. У каждого сайта и приложения есть две стороны: то, что видят и с чем взаимодействуют пользователи, — фронтенд, и то, что от них скрыто, — бэкенд. Проще всего объяснить принцип на примере HTML и CSS.

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

CSS — язык описания стилистических правил, который отвечает за то, как будет выглядеть страница. В него входят таблицы стилей, с помощью которых, например, задают шрифт, внешний вид элементов, анимацию.

JavaScript

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

Эти базовые знания можно изучить в бесплатной части курса «Фронтенд-разработчик» Яндекс Практикума. Вы напишете простую программу и сможете понять, верное ли направление выбрали.

Инструменты TypeScript

TypeScript — это язык программирования, основанный на JavaScript. Его преимущество — в дополнительных возможностях, которые позволяют создавать более надежные и поддерживаемые программы. Он строго типизирован, поэтому ошибки можно выявить еще на этапе разработки, а в команде работать с ним гораздо проще.

Системы контроля версий

Незаменимый инструмент разработчика — Git. Это система контроля версий (Version Control System, VCS), в которой поэтапно сохраняется информация обо всех изменениях в коде: в любой момент вы можете вернуться к каждой сохраненной версии.

Также стоит научиться работать с сервисом онлайн-хостинга GitHub. Вместе с Git он позволяет сохранять код и работать в команде с другими разработчиками.

В Яндекс Практикуме есть бесплатный курс по основам Git. Вы научитесь работать с ветками, объединять их и решать конфликты, использовать локальный и удаленный репозиторий, управлять им через IDE и консоль и разберетесь в принципах и культуре командной разработки.

Бандлеры

При создании сайтов и приложений разработчики делят код на части. Чтобы не подключать их вручную, используют бандлеры — сборщики модулей. Один из самых популярных — Webpack. Он достаточно быстрый и помогает оптимизировать ресурсы и оперативно подгружать изменения. Но набирает популярность сборщик Vite, и чтобы не терять актуальность своих знаний, пора осваивать и его.

Таск-раннеры

Еще один полезный инструмент. Если бандлеры собирают проект в единое целое, то таск-раннеры запускают конкретные задачи, например, минифицировать файл. Впрочем, тот же Webpack выполняет обе функции. Но лишних знаний не бывает.

Линтеры и форматеры

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

Менеджеры пакетов

В программировании часто используются готовые решения — коды, написанные другими разработчиками и выложенные в открытый доступ. Они называются пакетами или зависимостями. Копирование файлов вручную — процесс трудоемкий, поэтому используют менеджеры пакетов: они устанавливают зависимости в проект и автоматизируют этот процесс. Самые популярные — NPM, YARN и PNPM.

Фреймворки

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

Веб-безопасность

Защита от киберугроз — задача первостепенной важности. Изучите HTTP и HTTPS и разницу между ними, CORS — технологию, дающую доступ к ресурсам другого домена, и CSP — политику защиты контента. Также познакомьтесь с проектом OWASP: его эксперты отслеживают и составляют список критических уязвимостей веб-приложений, что помогает поддерживать безопасность проектов.

GraphQL

GraphQL — это язык запросов данных и среда, в которой они выполняются. С его помощью получают данные из API и передают их в приложение или на сайт, то есть от сервера к клиенту. Он значительно ускоряет разработку и позволяет получать только нужные данные из разных баз.

Научиться писать код для сайтов и приложений — сложно, но реально. На курсе «Фронтенд-разработчик» вы получите все важные навыки и получите опыт работы в команде над реальной задачей — создадите и опубликуете собственное приложение! Проходите бесплатный урок, почувствуйте себя в роли разработчика и решите, хотите ли продолжить обучение.

НАЧАТЬ УЧИТЬСЯ БЕСПЛАТНО