Как стать фронтенд-разработчиком и что изучать? В этом поможет разобраться дорожная карта по фронтенду:
Как и прежде, фронтенд-разработка стоит на трёх китах — HTML, CSS и JavaScript, поэтому с них и начнём разбор.
HTML
Без понимания разметки дальше не продвинуться, ведь это каркас сайта. Вы должны изучить базовые теги и атрибуты, понимать анатомию HTML-разметки, а также быть в курсе доступности и основ SEO. Не забывайте и об HTML5 — пятой версии, которая встречается в требованиях каждой первой вакансии. Развитие HTML нельзя назвать быстрым, поэтому у вас будет большое преимущество, если вы уже знаете язык разметки.
Материалы для изучения HTML:
CSS
Также важно научиться стилизовать элементы с помощью CSS и повторно использовать стили для похожих элементов, причем делать это правильно. Для начала освойте блочную модель и выравнивание контента (расположение элементов, выравнивание, центрирование и видимость). Затем перейдите к медиа запросам, чтобы учесть технические параметры различных устройств - вам пригодится знакомство с CSS Grid и Flexbox. Затем узнайте об архитектуре и препроцессорах, чтобы углубить свои знания.
Что касается фреймворков, раньше был популярен Bootstrap, но сейчас люди уходят от него и используют TailwindCss. Получается что ты не пишешь CSS, а пишешь просто классы. Это очень полезно для React, а также Bulma и MUI.
Вообще, кроме этого CSS, еще нужно выучить все, что вышло в 2022 году - там есть небольшие изменения. Потому что на самом деле уже мало кто пишет на CSS, ведь даже SASS уже не пишут на CSS.
Потому что на фронт-энде, например, вместо обычного CSS уже SPA, автоматически React на вершине, Vue.js и AngularJS. И все они имеют Tailwindcss, MUI и Bootstrap.
Ситуация с CSS, к сожалению, уже не требует, чтобы вы писали на CSS, но вам все равно нужно работать с этими фреймворками (Tailwindcss/TailwindUI, Bulmaи MUI). Их довольно легко освоить.
Материалы для изучения CSS:
Чтобы получить первые практические навыки в работе с HTML и CSS, следует сверстать несколько страниц: это можно сделать как по шаблонам из приведённых статей, так и написать полностью самостоятельный проект.
JavaScript
Ну и как же стать фронтенд-разработчиком, не зная JavaScript? На «плечи» этого языка ложится функциональность сайта: действия по нажатию кнопок, заполнение форм, прослушивание событий, запуск триггеров и многое другое. Не стоит пренебрегать основами и сразу переходить к изучению «модного» фреймворка — изучайте язык постепенно.
Так, вам потребуется освоить синтаксис и базовые конструкции. Обратите внимание, что JavaScript — язык со слабой типизацией, то есть выполняет неявное преобразование типов автоматически. Это значит, что вы можете написать что-то вроде 10+"1" и не получить никакой ошибки. Напротив, результат будет строкой — 101. Вы можете почитать об этом подробнее в большом исследовании под названием WTF JavaScript.
Ну а мы вернёмся к дорожной карте по фронтенд-разработке. Важно освоить DOM, интерфейс для работы с HTTP-запросами и ответами Fetch API, технологию AJAX и XMLHttpRequest, ECMAScript 6+, модульный подход и веб-компоненты. Также пробегитесь по перечисленным концепциям вроде строгого режима и теневого DOM.
Материалы для изучения JavaScript:
Веб-безопасность
Знаете, что такое OWASP? Это открытый проект, собирающий статистику и направленный на обеспечение безопасности веб-приложений. Чтобы стать фронтенд-разработчиком нужно уделять особое внимание безопасности. Хоть способов обезопасить себя и становится больше, но злоумышленники тоже не стоят на месте.
Итак, вам нужно понимать преимущества HTTPS перед HTTP, принцип работы CORS, политику защиты контента (CSP), а также регулярно следить за обновлениями на сайте OWASP.
Инструменты
Здесь всё просто:
- Освойте работу с системой контроля версий Git и выберите удобный сервис для хостинга проектов.
- Пользуйтесь линтерами и форматерами для улучшения качества кода.
- Для сборки используйте таскраннеры и бандлеры.
- Возьмите в привычку работать с менеджерами пакетов npm и yarn.
Фреймворки
3 основных фреймворка в работе с фронтендом: React, Angular, Vue.js.
Хорошее сравнение можно найти в этой статье. Для тех, кто желает освоить React с нуля, предлагаем понятную дорожную карту по React-разработке.
GraphQL
Это основной язык API-запросов фронтенд-разработчиков. Платформа Apollo в свою очередь представляет собой реализацию GraphQL для транспортировки данных из облака к UI веб-приложения, а Relay Modern — это фреймворк, использующий GraphQL и предназначенный для работы с data-driven приложениями.
Держите руководство по GraphQL для начинающих.
Заключение
Итак, чтобы стать фронтенд-разработчиком, следует хорошо владеть HTML, CSS и JavaScript, уметь обеспечивать безопасность веб-приложений, владеть основными инструментами, такими как Git, Prettier, ESLint, npm scripts и webpack, изучить хотя бы один из основных JavaScript-фреймворков и получить навык работы с GraphQL. Но ни в коем случае не останавливайтесь на этом. Например, всё чаще компании нанимают именно фулстек-девелоперов, поэтому рекомендуем также ознакомиться с дорожной картой по бэкенд-разработке и роадмапом по JavaScript.