img
img
24 февраля 2022
15 апреля 2022
8 мин
71

Фронтенд-разработчик: кто это такой и как им стать с нуля

Frontend-разработчик создает внешнюю — пользовательскую часть веб-ресурса.

img
Автор статьи
Виктория Дербенченко
Редактор
img

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

Кто такой фронтенд-разработчик и какие задачи решает

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

Любая страница в интернете состоит из разметки элементов — HTML-кода, и CSS-стилей — внешнего вида элементов. Код и стили любой страницы видны в консоли разработчика в браузере. Для этого кликните в любом месте страницы правой кнопкой мыши и выберите в выпадающем меню «Посмотреть код».

Фронтенд-разработчик: кто это такой и как им стать с нуля

Откроется панель, где код разметки и стилей любого элемента. Например, логотипа Яндекс.

Фронтенд-разработчик: кто это такой и как им стать с нуля

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

Страница, которую создал верстальщик, статичная. Задача фронтендера — «оживить» ее. Сделать так, чтобы раскрывались меню, работали ссылки, подгружался контент, инпуты реагировали на клики мыши.

Какими инструментами и технологиями должен владеть

HTML и CSS

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

Например, препроцессор HTML меняет длинный классический код:

<a href="#">Ссылка</a>

На:

a(href="#") Ссылка

Препроцессоры делают код читабельным и производительным. Он становится коротким и тратит меньше ресурсов браузера при его обработке.

Популярные препроцессоры:

  • HTML — Haml, Jade, Slim;
  • CSS — Less, Sass, Stylus.

Фронтендеру достаточно изучить один препроцессор, а освоить остальные будет уже легче.

JavaScript и TypeScript

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

Разработчик должен понимать, как работают структуры данных, как применяются функции, что такое прототипы, методы объекта и другие базовые понятия. Если начать пользоваться библиотеками без изучения JavaScript, это будет просто копированием частей кода без понимания, что и как работает.

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

скриншот из TypeScript

jQuery

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

Вот как выглядит код на JavaScript:

document.getElementById('id').innerHTML = 'Тише едешь, дальше будешь';

И вот как в сокращенном виде на jQuery:

 $('#id').html('Тише едешь, дальше будешь');

Gulp и WebPack

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

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

React, Vue.js или Angular

Это фреймворки JavaScript. С ними разработка идет быстрее. У фронтендера есть выбор — использовать шаблон из репозитория с настроенным сборщиком, стартовой страницей или начать проект с нуля и самостоятельно установить необходимые инструменты.

Строгих требований, какой фреймворк обязательно должен знать разработчик, нет. Специалист выбирает любой, а остальные осваивает по мере необходимости.

Git

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

Часто Git нужен при совместной работе над проектом. Если код пишут два фронтендера, каждый создает свою ветку проекта в Git. В результате нет риска повредить или перезаписать изменения другого разработчика.

Линтеры

Это анализаторы качества JavaScript-кода. Они проверяют, соответствует ли код стандарту ES — стандарту, который понимает большинство веб-браузеров.

Задачи линтеров:

  • найти ошибки в коде;
  • избежать опечаток в коде;
  • избежать бесконечных циклов;
  • проверить недоступный код;
  • проверить другие ошибки.

Один из популярных линтеров — ESLint.

скриншот ESLint

Требования к frontend-разработчику

Профессиональные навыки

💪Кодирование. Основная задача фронтендера — писать и разбираться в js-коде, понимать, как работает HTML и CSS.

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

💪Семантическая верстка. Разработчик прописывает семантические теги, для того чтобы поисковые роботы проиндексировали страницы.

💪Контроль версий. Через систему контроля версий фронтендер отслеживает и контролирует изменения исходного кода. Если вдруг в коде появится ошибка, не нужно писать его заново — возвращайтесь к моменту, когда код был еще в порядке.

💪Визуальный дизайн. Фронтендер не занимается дизайном сайта и приложений, но ему могут пригодиться базовые знания основных принципов дизайна. Например, если дизайнер нарисует макет, который нельзя запрограммировать на JavaScript технически, разработчик внесет правки в дизайн так, что сайт будет по-прежнему выглядеть хорошо.

Личные качества

👉Коммуникация. Фронтендеру нужно уметь общаться с другими участниками команды, договариваться о разделение обязанностей, обсуждать технические решения. Возможно, придется брифовать клиента. Хорошо развитые коммуникационные навыки помогут определить, что именно нужно заказчику.

👉Внимательность к деталям. Важно замечать даже небольшие изменения кода, так как они могут повлиять на весь проект.

👉Организация. Отслеживание сроков, задач проекта, рабочего процесса и бюджетов — полезные навыки для фронтендера. Они пригодятся тем, кто хочет претендовать на роль тимлида.

👉Терпение. Ситуации, когда что-то перестает работать на сайте, неизбежны. Ошибку в коде можно искать часами, а потом несколько дней думать, как исправить.

👉Английский язык. Большая часть документации к различным библиотекам, фреймворкам и системам — на английском языке.

Карьерный путь и зарплата фронтенд-разработчика

У фронтенд-разработчика есть три варианта развития:

📌Горизонтальный: постоянно учиться новому, чтобы претендовать на высокооплачиваемые вакансии.

📌Вертикальный: расти по карьерной лестнице в одной компании.

📌Диверсификационный: осваивать дополнительные специализации. Например, изучать серверные языки программирования, принципы работы с базами данных и серверов, чтобы стать фулстек-разработчиком.

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

Как быстро фронтендер будет переходить от позиции к позиции, зависит от него самого и компании, в которой он работает. Иногда программисты долгое время остаются в позиции мидла из-за нежелания улучшать навыки и приобретать новые умения. Либо сама компания не дает разработчикам возможностей для роста и развития.

Зарплата фронтендеров, по данным на Хабр за первое полугодие 2021 года, выросла на 9,1% по сравнению со вторым полугодием 2020 года, и составляет 120 000 рублей.

зп фронтенда

Источник: habr.com

Уровень заработной платы зависит от региона и уровня компании.

динамика зп в регионах

Исследование на Хабр Карьере

А вот так выглядит статистика заработной платы для джуна, мидла, сеньора, тимлида и фронтенд-разработчика игр:

зп фрондендов разного уровня

Обзор зарплат фронтендеров с Zarplan

Уровень конкуренции за рабочее место

Хабр сообщает, что в 2020 году во фронтенде наблюдался кадровый голод: на 1716 вакансий претендовало 914 кандидатов. Из этих соискателей работу в основном искали джуны и мидлы — 436 и 384 соответственно. Сеньоры не так заинтересованы в новом месте работы — на них приходится всего 10% резюме. Среди джунов за одно место конкурирует 1,7 человек. Причем сильнее конкуренция в Москве и Санкт-Петербурге.

конкуренция во фронтенде

Распределение резюме в зависимости от уровня

конкуренция по городам России

Распределение резюме по городам

Как стать frontend-разработчиком

Начните изучать верстку, CSS-стили и JavaScript самостоятельно. В интернете много бесплатного обучающего контента — видео, онлайн-тренажеры, книги. Например, на code.mu есть и обучающие материалы, и практические задания.

скриншот тренажера HTML-академии

Онлайн-тренажер HTML-академии, который помогает изучать верстку

Дополнительно найдите ментора — специалиста, который будет направлять в обучении. Он подскажет, что и в каком порядке проходить, поможет решить сложную задачу. Но ментор не будет обучать всему подряд, учиться придется самостоятельно.

Чтобы стать полноценным специалистом уровня джуна необходимо много практиковаться, читать книги, смотреть вебинары, изучать спецификации и чужой код. Четкий план обучения дают на онлайн-курсах.

Курс от Skypro обучает фронтенд-разработке за 12 месяцев. Это 420 часов теории и практических заданий, которые студенты выполняют индивидуально и в команде, 9 тематических модулей, помощь кураторов и методистов. Программа рассчитана на студентов, которые никогда ранее не занимались разработкой. Всё, что потребуется, — желание получить знания, разобраться в тонкостях профессии и 10 часов в неделю.

Предложения о стажировке и первую работу ищите на HH.ru, SuperJob, career.habr.com, headz.io, geekjob.ru, телеграм-каналах вроде Job for Junior.

Трудоустройство — это тоже навык. И в Skypro этому обучают: готовят к собеседованиям, помогают составить резюме и портфолио.

Коротко о фронтенд-разработчике

  • Фронтендер — программист, который создает пользовательский интерфейс сайта — всё, что помогает пользователям управлять девайсами и приложениями с помощью голоса, нажатий, жестов, через командную строку.
  • Основной список инструментов фронтендера: знания JavaScript и TypeScript, препроцессоров HTML и CSS, библиотеки jQuery, сборщиков проектов Gulp или WebPack, фреймворков React, Vue.js или Angular, Git, линтеров.
  • Помимо профессиональных навыков, разработчик должен обладать определенными личными качествами. Например, внимательностью, чтобы проверять написанный код и находить в нем ошибки. Владеть коммуникативными навыками, уметь организовывать свое время и рабочий процесс, быть терпеливым, чтобы успешно работать и развиваться в профессии.
  • В России средняя зарплата фронтенд-разработчика — 120 000 рублей в месяц, в Москве — 165 000 и Петербурге — 130 000.
img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Ещё по теме
    img
    Программирование
    IT-компания — это не только Google

    Рассказываем про «Тинькофф», «Билайн» и другие компании.

    16 мая 2022
    2 мин
    карьера
    img
    Программирование
    Как составить и оформить баг-репорт

    Указывайте в отчете только одну ошибку, прикладывайте скрины, сообщения и коды.

    04 мая 2022
    6 мин
    баг-репорт
    img
    Программирование
    Как работать со списками в Python

    Учимся добавлять и изменять элементы, объединять и копировать списки.

    02 мая 2022
    5 мин
    python
    списки
    img
    Программирование
    Цикл for в Java: что это, как с ним работать

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

    25 апреля 2022
    6 мин
    java
    циклы
    языки программирования
    img
    Программирование
    Как работать с модулем JSON в Python

    JSON часто применяют, когда разрабатывают API и веб-приложения.

    25 апреля 2022
    9 мин
    python
    языки программирования
    img
    Программирование
    Как IT-специалисту из России найти работу за рубежом в 2022 году

    Есть сервисы, платформы и телеграм-каналы с вакансиями по всему миру.

    21 апреля 2022
    6 мин
    востребованные профессии
    img
    Программирование
    Что такое HTML: основные теги

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

    16 апреля 2022
    6 мин
    html (hypertext markup language)p Language)
    верстка сайтов
    img
    Программирование
    Как работает цикл for в Python

    Цикл for используют, когда количество повторов известно заранее.

    14 апреля 2022
    5 мин
    python
    циклы
    языки программирования
    img
    Программирование
    Комьюнити для разработчика

    Есть комьюнити на платформах, под эгидой компаний или самоорганизующиеся.

    07 апреля 2022
    6 мин
    общение
    сообщество
    img
    Программирование
    Гайд: как определить, какое направление в IT тебе подходит

    Обязанности и зарплата аналитика, Python- и Java-разработчиков и не только.

    01 апреля 2022
    9 мин
    выбор профессии
    гуманитарий в IT
    img
    Программирование
    Правильное питание на удаленке. Почему это важно?

    Правильное питание — это не о жестких диетах и полном отказе от любимых продуктов.

    01 апреля 2022
    7 мин
    удаленная работа
    img
    Программирование
    Как я нашла время на учебу, когда времени не было совсем

    Благодаря методу «круга-пирога» увидите свое время и возьмете его под контроль.

    30 марта 2022
    7 мин
    дистанционное обучение
    домашняя работа
    самоорганизация
    img
    Программирование
    9 причин, почему не получается внедрять полезные привычки

    Ищите мотивацию, хвалите себя, визуализируйте план и результат.

    30 марта 2022
    8 мин
    постановка цели
    самоорганизация
    img
    Программирование
    Как больше успевать: зачем есть по одной лягушке в день и как справиться со слоном

    Лягушки — небольшие, но неприятные дела, слоны — долговременные задачи.

    30 марта 2022
    2 мин
    самоорганизация
    эффективность
    img
    Программирование
    Как поставить цель и не бросить на полпути

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

    30 марта 2022
    6 мин
    постановка цели
    самоорганизация
    img
    Программирование
    Кто такой менеджер проектов, чем занимается и как им стать

    Этот специалист контролирует все этапы проекта и приводит его к успеху.

    30 марта 2022
    8 мин
    управление проектами
    img
    Программирование
    Как не угробить здоровье на удаленке

    Советы всем удаленщикам — больше двигаться, делать зарядку, разминку для глаз.

    30 марта 2022
    9 мин
    удаленная работа
    img
    Программирование
    Junior, Middle, Senior в разработке — кто есть кто и как перейти на уровень выше

    Junior зарабатывает от 40 000 ₽, Middle от 100 000 ₽, а Senior от 250 000 ₽ и выше.

    29 марта 2022
    12 мин
    junior
    middle
    senior
    img
    Программирование
    Как банковская служащая в 32 года с нуля перешла в IT и в 40 открыла свою компанию по разработке онлайн-игр

    Совет от героини: сделайте первый шаг, дальше будет проще; учитесь и идите вперед.

    29 марта 2022
    14 мин
    смена профессии
    смена сферы
    img
    Программирование
    Пять приложений, чтобы не отвлекаться от учебы и работы

    Фишки и стоимость Forest, WaterDo, SleepTown, Alarmy, Pomodoro Timer Lite.

    29 марта 2022
    5 мин
    самоорганизация
    img
    Программирование
    Самый краткий гид по специализациям программистов

    Программист fullstack получает до 550 000 ₽, а на тестировщика учатся 4–15 мес.

    29 марта 2022
    3 мин
    backend-разработка
    c++
    frontend-разработчик
    java-разработчик
    востребованные профессии
    инженер по тестированию
    img
    Программирование
    Язык SQL: что это такое и зачем он нужен

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

    29 марта 2022
    7 мин
    mysql
    базы данных
    img
    Программирование
    Как освоить c нуля IT-профессию и перейти на новую работу без опыта

    Сначала поставьте цель: выберите сферу и определите, кем видите себя через 10 лет.

    29 марта 2022
    6 мин
    выбор профессии
    смена сферы
    img
    Программирование
    Словарь IT-сленга

    Термины разработки, Scrum, неформального общения, организационных процессов.

    29 марта 2022
    13 мин
    сленг
    словарь
    img
    Программирование
    Подборка: 33 книги и подкаста для начинающих программистов

    Узнаете о работе программиста и поймете, как писать хороший код.

    28 марта 2022
    10 мин
    книга
    подкаст
    img
    Программирование
    Хакнуть мозг: как современные знания помогают мозгу развиваться и учиться

    Мозг меняется всю жизнь. Мы можем на него влиять: изучать новое, развивать навыки.

    28 марта 2022
    8 мин
    развитие мозга
    img
    Программирование
    Как совмещать работу, учебу, семью и быт: рассказ будущего тестировщика

    Помогает планирование, вера в то, что реально изменить жизнь, поддержка семьи.

    28 марта 2022
    8 мин
    курс обучения
    личная история
    онлайн-образование
    смена профессии
    тестирование
    img
    Программирование
    Что такое CSS и как с ним работать

    С помощью CSS задают цвет, размеры, анимацию, адаптируют сайт под устройства.

    16 марта 2022
    9 мин
    css
    img
    Программирование
    Как создать телеграм-бота на Python

    Python — самый популярный язык программирования в феврале 2022 года.

    16 марта 2022
    9 мин
    python
    img
    Программирование
    Какие профессии в IT подойдут гуманитарию

    Гуманитарию подойдут профессии тестировщика, веб-дизайнера и не только.

    15 марта 2022
    9 мин
    выбор профессии
    карьера
    img
    Программирование
    Frontend или backend: чем отличаются и какой вид разработки выбрать

    Фронтендер создает интерфейс продукта, бэкендер работает с серверной частью.

    15 марта 2022
    7 мин
    backend-разработка
    frontend
    img
    Программирование
    Кто такой Java-разработчик, чем занимается и как им стать

    Обязанности Java-разработчика — писать код, тестировать и улучшать его.

    15 марта 2022
    7 мин
    java
    java-разработчик
    карьера
    img
    Программирование
    Что такое IT-сфера и почему она сейчас так популярна

    IT-отрасль привлекает удаленкой, карьерным ростом, высоким доходом.

    04 марта 2022
    7 мин
    it
    карьера
    img
    Программирование
    Как установить Python на компьютер и начать на нём писать

    Воспользуйтесь Google Colab, онлайн-интерпретаторами или скачайте Python.

    04 марта 2022
    4 мин
    python
    языки программирования
    img
    Программирование
    Как создать приложение для Андроид самостоятельно с нуля: инструкция

    Используйте конструкторы no-code, Java или Kotlin, Android Studio.

    04 марта 2022
    8 мин
    андроид
    разработка
    img
    Программирование
    Postman: как пользоваться программой для тестирования API

    Бесплатный сервис позволяет писать тесты, поддерживает разные типы API.

    04 марта 2022
    6 мин
    api
    postman
    img
    Программирование
    Google Colab: что это такое и как с ним работать

    Colab используют, чтобы создавать код на Python прямо в браузере.

    04 марта 2022
    4 мин
    google colab
    img
    Программирование
    Как перейти в разработчики из другой профессии

    Освоить новую профессию реально с нуля в любом возрасте, главное — мотивация.

    03 марта 2022
    8 мин
    карьера
    разработка
    img
    Программирование
    Как помочь ребенку выбрать профессию

    Не выбирайте по принципу «чем проще, тем лучше» и уважайте желания ребенка.

    03 марта 2022
    7 мин
    карьера
    родителям
    img
    Программирование
    Нужно ли высшее образование программисту: сравниваем все «за и «против»

    Важнее опыт и проекты в портфолио, но иногда высшее образование все-таки нужно.

    02 марта 2022
    5 мин
    образование
    img
    Программирование
    Стоит ли переходить на удаленку: плюсы и минусы

    Сегодня удаленка доступна для разных сфер: ИТ, маркетинг, сервис, продажи.

    02 марта 2022
    6 мин
    удаленка
    img
    Программирование
    Какой язык программирования выбрать новичку

    Выбирайте по уровню спроса у работодателей и направлению в программировании.

    24 февраля 2022
    7 мин
    языки программирования
    img
    Программирование
    Фильмы про программистов: лучшие фильмы и сериалы про компьютерных гениев

    20 фильмов и сериалов для тех, кому интересен мир информационных технологий.

    24 февраля 2022
    7 мин
    фильмы
    img
    Программирование
    Backend-разработчик: кто это такой и чем он занимается

    Backend-разработчик отвечает за внутреннюю — серверную сторону веб-ресурса.

    24 февраля 2022
    9 мин
    backend
    карьера
    img
    Программирование
    Что такое спринты в программировании и как их выполнять

    Спринты используют в долгих проектах и сложных продуктах.

    24 февраля 2022
    5 мин
    agile
    scrum
    спринты в программировании
    img
    Программирование
    Как начать изучать Python

    Преимущества Python — понятный синтаксис и читаемость, готовые библиотеки.

    24 февраля 2022
    9 мин
    python
    языки программирования
    img
    Программирование
    Jupyter Notebook: что это такое и как им пользоваться

    Jupyter-ноутбуки применяют для визуализации данных в big data и data science.

    24 февраля 2022
    7 мин
    jupyter notebook
    python
    разработка
    img
    Программирование
    Как развить soft skills

    Soft skills помогают развивать компетенции, осваивать новые тенденции в работе.

    24 февраля 2022
    11 мин
    soft skills
    саморазвитие
    img
    Программирование
    Как начать изучать Java

    На Java разрабатывают всё: от приложений и ПО до технологий Big Data.

    24 февраля 2022
    7 мин
    java
    java-разработчик
    языки программирования