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

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

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

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
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Ещё по теме
    Что такое Agile

    Agile — это группа гибких методов, чтобы улучшать продукт.

    20 июня 2022
    4 мин
    5 причин освоить Python

    Это универсальный и перспективный язык, который подходит новичкам.

    Как отбирают кандидатов в IT-компаниях

    IT-рекрутер обращает внимание на то, как вы мыслите и рассуждаете.

    5 причин научиться программировать на Java

    Этот язык постоянно развивается, но остается стабильным, на нём кодят уже 27 лет.

    Как работать со словарями в Python

    Словарь создают с помощью ключевого слова dict, синтаксиса языка.

    Каково быть тестировщиком: 4 истории о боли и радости

    Рассказы тестировщиков: какие ошибки они замечают в обычной жизни.

    Что такое Node.js и зачем ее изучать

    Node.js — платформа с открытым исходным кодом для работы с JavaScript.

    09 июня 2022
    5 мин
    Что такое массивы в Java и как с ними работать

    Массив — это набор однотипных элементов, упорядоченных по номерам.

    Как написать тест-кейс

    Создавайте простые тест-кейсы и учитывайте интересы пользователя.

    06 июня 2022
    6 мин
    Мифы о программистах

    Есть стереотипы, что программисты — это мужчины, всемогущие хакеры и интроверты.

    17 мая 2022
    2 мин
    Код: что ты такое

    Код определяет внешний вид и внутреннюю логику программ, сайтов.

    17 мая 2022
    2 мин
    7 англоязычных подкастов для тех, кто хочет прокачаться в IT

    Про Python, frontend-разработку, мягкие навыки, работу над проектами.

    17 мая 2022
    3 мин
    6 ютуб-каналов для разработчиков

    Ответы на вопросы новичков, интервью успешных спецов, полезные советы.

    17 мая 2022
    2 мин
    Женщины в IT

    Достижения и цитаты шести героинь, которые не побоялись попробовать себя в IT.

    17 мая 2022
    2 мин
    Почему IT — сфера будущего

    Информационные технологии помогают бизнесу зарабатывать и упрощают жизнь.

    IT-компания — это не только Google

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

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

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

    04 мая 2022
    6 мин
    Как работать со списками в Python

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

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

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

    Как работать с модулем JSON в Python

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

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

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

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

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

    Как работает цикл for в Python

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

    Комьюнити для разработчика

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

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

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

    Правильное питание на удаленке. Почему это важно?

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

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

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

    9 причин, почему не получается внедрять полезные привычки

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

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

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

    Как поставить цель и не бросить на полпути

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

    Кто такой менеджер проектов, чем занимается и как им стать

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

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

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

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

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

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

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

    Пять приложений, чтобы не отвлекаться от учебы и работы

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

    29 марта 2022
    5 мин
    Язык SQL: что это такое и зачем он нужен

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

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

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

    Словарь IT-сленга

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

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

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

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

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

    28 марта 2022
    8 мин
    Что такое CSS и как с ним работать

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

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

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

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

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

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

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

    15 марта 2022
    7 мин
    Кто такой Java-разработчик, чем занимается и как им стать

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

    15 марта 2022
    7 мин
    Что такое IT-сфера и почему она сейчас так популярна

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

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

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

    Postman: как пользоваться программой для тестирования API

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

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

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

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

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

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

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

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

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

    02 марта 2022
    5 мин
    Стоит ли переходить на удаленку: плюсы и минусы

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

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

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

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

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

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

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

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

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

    Как начать изучать Python

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

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

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

    24 февраля 2022
    7 мин
    Как развить soft skills

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

    24 февраля 2022
    11 мин
    Как начать изучать Java

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

    kralbetbetturkeyikimislibahis1xbetm.infohipas.infohttps://www.wiibet.com/restbetcdn.com
    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить