Фронтенд-разработчик: плюсы и минусы профессии

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

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

Примеры задач, антизадач и точек роста фронтенд-разработчика:

Подытожим метафорой. Представьте, что Вы захотели поесть борщ в ресторане. Нашли место, пришли, заказали.

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

Зато видим, какую подачу нам организовали. Выбор посуды, приборов, дополнительных штук типа соли и приправ — насколько всё это красиво, удобно и заботливо. Вот это и есть задача фронтенд-разработчика.

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

Что нужно знать?

Вы же хотите получить классный оффер? Тогда вперёд.

Карьера фронтенд-разработчика делится на три уровня: начинающий (junior), средний (middle) и ведущий (senior). От этого зависит зарплата, количество обязанностей и их сложность. Требования по знаниям в разных проектах сильно отличаются, но база пока остаётся неизменной. А «софт скиллы» и вовсе вечны.

Ниже будет «пирамида развития» от начинающего до матёрого фронтенд-разработчика. Посмотрим, что нужно для старта в профессии, а затем будем карабкаться выше по должности, добавляя новые технологии и навыки.

Списки терминов на английском в описаниях вакансий могут напугать. На деле работодатели должны понимать, что нет идеального человека на позицию со знанием того самого фреймворка, немного графического дизайна, немного ковыряний в PHP, сверху TDD/BDD, SQL и всё это одновременно.

Не поняли, что это за ругательства? То же можно испытать от каждой второй вакансии на рынке. Прочувствуйте. Это нормально. Если Вам знакома половина из списка требований — откликайтесь.

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

Сколько можно заработать (много)

Давайте сразу к цифрам. Посмотрим зарплаты фронтенд-разработчиков за последний год. По географии будем ориентироваться на Москву, регионы России, ближнее зарубежье (страны СНГ), дальнее зарубежье (Европа и Америка). Разобьём на стартовую, среднюю и высокую зарплаты.

Зарплата фронтенд-разработчика в Москве

Зарплата фронтенд-разработчика в регионах РФ

Зарплата фронтенд-разработчика в странах СНГ

Зарплата фронтенд-разработчика в зарубежных странах

Зарплата фронтенд-разработчика на фрилансе сопоставима с наймом: планка колеблется от 500 до 3000 руб/час в зависимости от опыта и сложности задачи. Многие предлагают, к примеру, пакетную разработку сайта: тогда суммы могут быть от 80 000 руб. Если это разовая задачка подправить элемент на странице — 1000-2000 руб. за работу. Можно осмотреться на биржах фриланса и прикинуть, какой ценник поставить за свои навыки.

Где и сколько учиться?

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

Самоучкой — можно. Что понадобится?

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

— Книги

Быстро устаревают, но выбрать одну, чтобы получить базовое понимание и «советы бывалого» — полезно. В них есть необходимый иногда академический взгляд, который поможет упорядочить знания.

1. Роберт Мартин «Чистый код». Как писать код красиво, понятно, без мусора и делать ревью. Вы научитесь писать так, чтобы вас полюбили коллеги, оптимизировать свой код и править чужой;
2. Джон Даккет «Разработка и дизайн веб-сайтов». Хорошее руководство для разработки интерфейсов — охватывает азы HTML и CSS и более продвинутые темы: работу с нестандартными шрифтами, адаптивная вёрстка и другие;
3. Крис Минник, Ева Холланд «Программирование на JavaScript для чайников». Название говорит за себя. Научитесь настраивать IDE, работать с анимацией, узнаете про распространённые ошибки;
4. Кэй С. Хорстман «Современный JavaScript для нетерпеливых». Основы и углубление в сложные темы, всё написано доступным языком. Есть обозначения уровня сложности каждого раздела, примеры кода;
5. Леа Веру «Секреты CSS. Идеальные решения ежедневных задач». Книга раскрывает скрытые возможности CSS. Обзор основ, концепций, разных методов вёрстки, оптимизации и не только.

— Бесплатные тренажёры и открытые ресурсы

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

1. Code Basics / Бесплатные курсы программирования. Есть полноценные курсы по HTML, CSS и JavaScript. Интерактивные уроки с подсказками, структурированная программа, среда разработки прямо в браузере;
2. GitHub / Hexlet / Тестовые задания от IT-компаний. Крупный сборник тестовых заданий на разные позиции. Указана должность, стек, название организации, где предлагают такое тестовое. Есть задачи с детальным разбором;
3. Яндекс.Практикум / Курс фронтенд-разработчик. Полного бесплатного курса нет, но можно пройти бесплатную вводную часть. Сможете изучить базовый синтакс и написать первую маленькую программу на JavaScript;
4. Front End Development Libraries Certification. Англоязычный сборник задач по фронтенду. Рассчитан на тех, кто уже умеет в связку HTML, CSS и JS. Есть задачи по библиотекам и дополнительным фичам языков;
5. Задачи по программированию на itProger. Сборник задач для разных языков программирования. Есть углублённые задачи по фреймворкам, в случае с фронтендом — React, Node и другие;
6. W3Schools Online Tutorials & Exercises. Англоязычный сборник задач и викторин по всем языкам программирования. Переходите во вкладку Exercises, выбирайте и наслаждайтесь.

— Онлайн-учебники

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

1. Современный учебник JavaScript. Вас погрузят в основы, познакомят со спецификациями, синтаксисом. Научат работать с функциями, типами данных, классами, ошибками, модулями, прототипами, особенностями браузеров. А напоследок предложат тематические статьи про всякие украшательства для страниц и фичи;
2. Современный учебник CSS. Вас познакомят с принципами и синтаксисом CSS, покажут возможности языка, расскажут о современных методах применения. Научат писать стили чисто и быстро. Для обучения стоит знать HTML хотя бы на начальном уровне;
3. HTML5BOOK. Расскажут не только о HTML, но и о CSS, JavaScript и типографике. Есть авторские статьи, где рассказывают, как создавать стильные нестандартные интерфейсы, адаптировать их под разные устройства и в целом пичкать сайты красотой.

— Сообщества

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

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

Платные курсы

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

Как устроиться на работу? Три пути самурая и советы

Представьте, вот Вы чему-то научились, пора в свободное плавание. А куда и как? Сейчас есть три главных способа начать трудовой путь разработчика.

Специализированные ресурсы для поиска работы в IT. Это знакомые нам всем сайты, где работодатели выкладывают тысячи вакансий в день. Среди русскоязычных можем выделить: HeadHunter, Хабр.Карьера, Geekjob, БУДУ, Superjob, Tproger, Работа.ру.

Для тех, кто планирует переезд после устройства в международную компанию, есть аналогичные зарубежные ресурсы: Indeed: Job Search, Glassdoor, Idealist, Relocate.me, Jora, Hired.

Курсы с гарантированным трудоустройством. Посмотреть Вы их можете чуть выше, в разделе «Где и сколько учиться» — мы специально выделили трудоустройство отдельной колонкой.

Степень помощи в трудоустройстве у всех разная. Кто-то рекомендует Вашу кандидатуру работодателям и отпускает в свободное плавание, кто-то готов даже вернуть деньги, если Вы не найдёте работу в определённый срок.

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

Следить за предложениями можно на сайте и в соцсетях компаний. Зачем? Крутая возможность получить опыт коммерческой разработки в большой корпорации, зарекомендовать себя, пополнить портфолио, поработать под наставничеством старших коллег. Бытует мнение, что стажировка всегда бесплатная. Нет, это не так, в Яндексе, к примеру, стажировка оплачивается. Всё зависит от компании.

Ещё советы

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

1. Сделать портфолио из самостоятельных проектов. Разместить его на LinkedIn, в соцсетях, в резюме и на биржах фрилансеров;
2. Вооружиться списком пабликов вконтакте, групп в фейсбуке и каналов в тележке, где выкладывают интересные вакансии;
3. Ходить на IT-конференции, выставки, лекции и семинары — или смотреть онлайн. 

Что спрашивают у фронтенда на собеседовании?

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

Теория

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

1. Какие знаете способы отладки ошибок в браузере?
2. Как переносить макет, где есть нестандартные шрифты?
3. Знакомы с какой-нибудь CMS? Разрабатывали что-то для этого движка?
4. Как Вам работа в команде? У нас есть дизайнер, бэкенд-разработчик, технический руководитель, контент-менеджер. С ними нужно будет общаться, дружить, делать задачи вместе 🙂
5. С какой работой раньше сталкивались? Умеете верстать сложные, многостраничные сайты, интернет-магазины? Примерно представляете, как это делать?
6. Ну всё, теперь о Вашем стеке. Опишите, что знаете, с чем работали, почему выбрали именно такой фреймворк? Умеете в Git?
7. Вы любите учиться? Что читаете, как часто изучаете новое, где берёте знания? Нам важно, чтобы сотрудник был готов к обучению, готовы дать книги, тренажёры с задачами, всякие полезные штуки;
8. Какие технические проблемы у Вас были и как вы их решали? Может быть, ошибка в коде — съехал баннер на странице, и было не понятно, что с этим делать;
9. Какая среда разработки вам нравится и почему? Мы работаем там-то, нам так комфортно. Готовы переучиваться?
10. Знакомы с SEO? Как использовали в своей работе? Что с Вашей стороны нужно сделать,
    чтобы сайт взлетел в поисковой выдаче?
11. Как оцените свою скорость работы? Лучше сдать результат на четвёрку или посидеть, покопаться в задаче, сделать идеально?
12. (Прости господи) кем Вы видите себя в нашей компании через 5 лет?
13. (Потому что предыдущий — вода) какие способы оптимизировать сайт вы знаете? Пример — страничка товара тормозит, загружается минуты три. В чем дело, как будете решать проблему?

Практика

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

Будьте готовы к ряду вопросов о библиотеках, которые используются в работе, синтаксисе языка — например, JavaScript. Популярные задачки есть на просторах интернета, достаточно вбить в поиск «react вопросы на собеседовании». Смотрите, что написано в требованиях вакансии, и прогоняйте себя по ним.

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

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

Ко всему этому можно и нужно подготовиться. Хорошие примеры тестовых заданий можно найти на свободных ресурсах для программистов — GitHub, Geeksforgeeks, BitBucket, GitLab. Там есть всё: разного уровня сложности и разной сферы применения.

На десерт — минусы и рутина

Давайте запомним: что для миддла рутина, то для джуна праздник (или кошмар). Список ниже — особенности профессии, с которыми столкнётся любой фронтенд. По нраву ли они Вам — оцените сами.

— Сфера развивается супер быстро

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

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

— Однообразные задачи

Есть у всех, особенно в начале карьеры. Отрисовать кнопку, сдвинуть, согласовать, вернуть на место, сдвинуть, поменять цвет, убрать анимацию. И так на каждом сайте / в приложении / etc. 

Начинающим разработчикам не дадут сразу в руки серьёзные вехи проекта, но нагрузят рутинными задачками, чтобы довести их решение до автоматизма и проработать все вопросы. Рост уменьшит рутину и — в идеале — даст возможность её делегировать.

— Общение с командой и клиентами

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

Нужно принимать решения по вёрстке и интерфейсу и защищать их перед всеми. Уметь уступать, где это требуется, и находить компромисс.

— Размытые обязанности

Проще говоря, Вас могут потащить в бэкенд-разработку. Это обратная сторона фронтенда — внутряк сайта, его функционал, сервер, базы данных. Здесь нужен другой стек технологий — язык программирования, как правило, PHP, Ruby, Python, C#, знание баз данных, протоколов передачи данных http и https и ещё куча всего. 

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

— Переработки

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

Будьте готовы плотно заняться тайм-менеджментом и личными границами с самого начала. Джуниор-разработчикам стоит пообщаться с коллегами и начальством на тему ожиданий друг от друга.

FAQ

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

Можно ли стать фронтендом с нуля? А если я домохозяйка или мне 50 лет?

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

Реально ли зарабатывать 300 тыс. в месяц, занимаясь фронтенд-разработкой?

Реально. Ваш потолок — это Ваши навыки и готовность их развивать. Потребуется несколько лет, чтобы выйти на доход в 200-300 тысяч/месяц. Учитесь, старайтесь заполучить место в топовых компании, где Вам смогут ежемесячно обеспечивать такой бюджет.

Фронтенд-разработчик и верстальщик — это одно и то же?

Нет. Верстальщик переносит дизайн-макет в код, используя HTML и CSS. Для фронтенд-разработчика это лишь самый минимальный навыков. Он тоже должен уметь аккуратно воплотить макет в жизнь, но на этом всё только начинается.

Можно без знания языков программирования?

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

Если у меня нет портфолио — это очень плохо?

На стартовой должности это не критично, Вас всё равно могут взять. Но лучше сделать какой-нибудь личный проект на GitHub и презентовать его. Так Вы покажете свой стиль работы, умение обосновывать логику. Учебные проекты для портфолио тоже подойдут. 

Нужно ли вузовское образование?

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

Где работать лучше всего?

Везде. Буквально: спрос на фронтенд-разработчиков высок. Они одинаково нужны как для работы над приложением Сбербанка, так и для создания интернет-магазина верхней одежды. Выбирайте задачи по душе: пусть это будет IT-стартап, вёрстка лендингов для психологов, создание веб-приложения для службы доставки шаурмы и ещё куча всего.

Коротко о главном

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

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

Карьеру фронтенда можно поделить на три уровня: начинающий (junior), средний (middle) и ведущий (senior). “Звание” зависит от опыта и стека технологий, которым владеет специалист. Отсюда же вытекает заработок. Он достаточно высокий — в среднем от 45 000 руб. на начальном уровне до 200 000 на высоком.

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

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

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