Фронтенд-разработчик — человек, благодаря которому Вы видите сайт или приложение такими, какие они есть. Цвет фона, шрифт, анимированные элементы интерфейса, продуманная навигация.
Как им стать, где он обитает и как много зарабатывает — разбираемся в статье. Будет полезно и тем, кто хочет стать фронтенд-разработчиком, и тем, кто хочет нанять его на работу.
Примеры задач, антизадач и точек роста фронтенд-разработчика:
| Что делает | Что точно не делает | Что может делать |
| — Собирает сайт по макету от дизайнера (например, макет из графического редактора Figma) | — Не рисует дизайн-макет (это задача дизайнера) | — Дорабатывать логику интерфейса, если решение дизайнера оказывается некорректным |
| — Создаёт фасад сайта на движке конкретной CMS (например, в Wordpress) | — Не отвечает за технические неполадки (ситуация «сайт лёг») | — Учиться работать с разными CMS-системами, писать код с нуля |
| — Работает с фреймворками (например, фреймворки для JavaScript — React, VueJS) | — Не работает с фреймворками для других разработчиков (например, для Python — Django). | — Изучать серверный язык программирования и его фреймворки |
| — Верстает удобную корзину в личном кабинете покупателя на сайте интернет-магазина | — Не интегрирует туда платёжный шлюз (это задача бэкенд-разработчика) | — Протестировать разные варианты интерфейса корзины, чтобы выяснить, какой из них пользователи реже бросают |
Подытожим метафорой. Представьте, что Вы захотели поесть борщ в ресторане. Нашли место, пришли, заказали.
Как Вам готовят сам борщ, какие продукты используют, откуда их привозят, как хранят, скорость подачи заказа — это задача других специалистов. Кухню, то есть сервер с данными сайта, мы с Вами не видим.
Зато видим, какую подачу нам организовали. Выбор посуды, приборов, дополнительных штук типа соли и приправ — насколько всё это красиво, удобно и заботливо. Вот это и есть задача фронтенд-разработчика.
Есть суп чайной ложкой можно, но неудобно, то и дело еда соскальзывает обратно в тарелку. Так же с сайтом. Можно сделать классную форму обратной связи и большую кнопку для её отправки. И тут же забыть адаптировать её к мобильной версии, тогда с телефона пользователю придётся вглядываться в слишком мелкий текст и промахиваться пальцем мимо строчек для заполнения.
Что нужно знать?
Вы же хотите получить классный оффер? Тогда вперёд.
Карьера фронтенд-разработчика делится на три уровня: начинающий (junior), средний (middle) и ведущий (senior). От этого зависит зарплата, количество обязанностей и их сложность. Требования по знаниям в разных проектах сильно отличаются, но база пока остаётся неизменной. А «софт скиллы» и вовсе вечны.
Ниже будет «пирамида развития» от начинающего до матёрого фронтенд-разработчика. Посмотрим, что нужно для старта в профессии, а затем будем карабкаться выше по должности, добавляя новые технологии и навыки.
| Уровень | Hard Skills / языки, технологии | Soft Skills / улыбаемся и машем | Будет преимуществом |
| Junior |
— HTML, CSS, JavaScript |
— Работа в команде |
— Тяга к развитию, желание изучать стек технологий для разработчика уровня middle |
| Middle |
— Unit-тесты |
— Обучение новичков |
— Знание Docker |
| Senior |
— Angular, Ruby on Rail |
— Разработка стратегии |
— Знание серверных языков программирования — PHP, Python, Ruby, Go, C# |
Списки терминов на английском в описаниях вакансий могут напугать. На деле работодатели должны понимать, что нет идеального человека на позицию со знанием того самого фреймворка, немного графического дизайна, немного ковыряний в PHP, сверху TDD/BDD, SQL и всё это одновременно.
Не поняли, что это за ругательства? То же можно испытать от каждой второй вакансии на рынке. Прочувствуйте. Это нормально. Если Вам знакома половина из списка требований — откликайтесь.
Достаточно стека технологий из таблицы в зависимости от уровня, софт скиллов и готовности обучаться. Адаптироваться к инструментам компании несложно: можно попросить себе наставника, доступ к корпоративной библиотеке и тренажёрам с задачами. Можно изучать узкие технологии на свой вкус и искать работодателя, которому нужны именно они.
Сколько можно заработать (много)
Давайте сразу к цифрам. Посмотрим зарплаты фронтенд-разработчиков за последний год. По географии будем ориентироваться на Москву, регионы России, ближнее зарубежье (страны СНГ), дальнее зарубежье (Европа и Америка). Разобьём на стартовую, среднюю и высокую зарплаты.
Зарплата фронтенд-разработчика на фрилансе сопоставима с наймом: планка колеблется от 500 до 3000 руб/час в зависимости от опыта и сложности задачи. Многие предлагают, к примеру, пакетную разработку сайта: тогда суммы могут быть от 80 000 руб. Если это разовая задачка подправить элемент на странице — 1000-2000 руб. за работу. Можно осмотреться на биржах фриланса и прикинуть, какой ценник поставить за свои навыки.
Где и сколько учиться?
Сейчас есть два основных варианта — обучаться самостоятельно или покупать платные курсы по фронтенд-разработке. Оба варианта хороши, выбор зависит от Ваших потребностей, возможностей и бэкграунда в разработке.
Самоучкой — можно. Что понадобится?
Коротко: книги, бесплатные тренажёры и открытые ресурсы с задачами, сообщества, онлайн-учебники, ютуб, много свободного времени, жёсткая дисциплина и умение систематизировать входящую информацию.
— Книги
Быстро устаревают, но выбрать одну, чтобы получить базовое понимание и «советы бывалого» — полезно. В них есть необходимый иногда академический взгляд, который поможет упорядочить знания.
- Роберт Мартин «Чистый код». Как писать код красиво, понятно, без мусора и делать ревью. Вы научитесь писать так, чтобы вас полюбили коллеги, оптимизировать свой код и править чужой;
- Джон Даккет «Разработка и дизайн веб-сайтов». Хорошее руководство для разработки интерфейсов — охватывает азы HTML и CSS и более продвинутые темы: работу с нестандартными шрифтами, адаптивная вёрстка и другие;
- Крис Минник, Ева Холланд «Программирование на JavaScript для чайников». Название говорит за себя. Научитесь настраивать IDE, работать с анимацией, узнаете про распространённые ошибки;
- Кэй С. Хорстман «Современный JavaScript для нетерпеливых». Основы и углубление в сложные темы, всё написано доступным языком. Есть обозначения уровня сложности каждого раздела, примеры кода;
- Леа Веру «Секреты CSS. Идеальные решения ежедневных задач». Книга раскрывает скрытые возможности CSS. Обзор основ, концепций, разных методов вёрстки, оптимизации и не только.
— Бесплатные тренажёры и открытые ресурсы
Спасибо энтузиастам — сейчас связку HTML, CSS и JavaScript может освоить каждый на базовом уровне, если найти инструмент. Есть ресурсы с отдельными блоками практических задач и большие бесплатные пошаговые курсы. Есть курсы с демо-версией — как правило, бесплатно дают выучить первый раздел, а дальше надо покупать.
- Code Basics / Бесплатные курсы программирования. Есть полноценные курсы по HTML, CSS и JavaScript. Интерактивные уроки с подсказками, структурированная программа, среда разработки прямо в браузере;
- GitHub / Hexlet / Тестовые задания от IT-компаний. Крупный сборник тестовых заданий на разные позиции. Указана должность, стек, название организации, где предлагают такое тестовое. Есть задачи с детальным разбором;
- Яндекс.Практикум / Курс фронтенд-разработчик. Полного бесплатного курса нет, но можно пройти бесплатную вводную часть. Сможете изучить базовый синтакс и написать первую маленькую программу на JavaScript;
- Front End Development Libraries Certification. Англоязычный сборник задач по фронтенду. Рассчитан на тех, кто уже умеет в связку HTML, CSS и JS. Есть задачи по библиотекам и дополнительным фичам языков;
- Задачи по программированию на itProger. Сборник задач для разных языков программирования. Есть углублённые задачи по фреймворкам, в случае с фронтендом — React, Node и другие;
- W3Schools Online Tutorials & Exercises. Англоязычный сборник задач и викторин по всем языкам программирования. Переходите во вкладку Exercises, выбирайте и наслаждайтесь.
— Онлайн-учебники
Отличаются от книг не только форматом, но и регулярными обновлениями. Рекомендуем учебники по трём столпам фронтенда — HTML, CSS и JavaScript. Все разбирают тему с нуля, рассказывают о концепциях, теории и предлагают практические задания с примерами кода.
- Современный учебник JavaScript. Вас погрузят в основы, познакомят со спецификациями, синтаксисом. Научат работать с функциями, типами данных, классами, ошибками, модулями, прототипами, особенностями браузеров. А напоследок предложат тематические статьи про всякие украшательства для страниц и фичи;
- Современный учебник CSS. Вас познакомят с принципами и синтаксисом CSS, покажут возможности языка, расскажут о современных методах применения. Научат писать стили чисто и быстро. Для обучения стоит знать HTML хотя бы на начальном уровне;
- HTML5BOOK. Расскажут не только о HTML, но и о CSS, JavaScript и типографике. Есть авторские статьи, где рассказывают, как создавать стильные нестандартные интерфейсы, адаптировать их под разные устройства и в целом пичкать сайты красотой.
— Сообщества
Место, где можно и нужно просить совет, делиться трудностями и успехами. Коллеги помогут разобрать код, отточить навыки и даже пройти профориентацию.
Крупная подборка сообществ офлайн и онлайн есть на свободном ресурсе для разработчиков GitHub. Ознакомьтесь, там есть разбивка на города, чтобы можно было обнаружить единомышленников буквально на соседней улице и познакомиться.
Платные курсы
Коротко: доступная и структурированная подача информации, наставник, команда студентов, которые набивают шишки и символы вместе с вами, сертификат или диплом. Всё готово — берите и учитесь по плану. Фишка некоторых курсов — гарантированное трудоустройство или возврат денег.
| Чей курс | Стоимость | Срок обучения | Трудоустройство | Налоговый вычет 13% |
| Skillbox |
260 000 руб, есть рассрочка без переплат на 24 месяца |
9 месяцев |
Да |
Да |
| Нетология |
235 000 руб, есть рассрочка без переплат на 24 месяца |
19 месяцев |
Да |
Да |
| Eduson ACADEMY |
207 000 руб, есть рассрочка без переплат на 24 месяца |
9-12 месяцев |
Да |
Да |
| GeekBrains |
252 000 руб, есть рассрочка без переплат на 36 месяцев |
9 месяцев |
Да |
Да |
| skypro |
От 268 000 до 420 000 руб |
12 месяцев |
Нет, только карьерная консультация |
Да |
Как устроиться на работу? Три пути самурая и советы
Представьте, вот Вы чему-то научились, пора в свободное плавание. А куда и как? Сейчас есть три главных способа начать трудовой путь разработчика.
Специализированные ресурсы для поиска работы в IT. Это знакомые нам всем сайты, где работодатели выкладывают тысячи вакансий в день. Среди русскоязычных можем выделить: HeadHunter, Хабр.Карьера, Geekjob, БУДУ, Superjob, Tproger, Работа.ру.
Для тех, кто планирует переезд после устройства в международную компанию, есть аналогичные зарубежные ресурсы: Indeed: Job Search, Glassdoor, Idealist, Relocate.me, Jora, Hired.
Курсы с гарантированным трудоустройством. Посмотреть Вы их можете чуть выше, в разделе «Где и сколько учиться» — мы специально выделили трудоустройство отдельной колонкой.
Степень помощи в трудоустройстве у всех разная. Кто-то рекомендует Вашу кандидатуру работодателям и отпускает в свободное плавание, кто-то готов даже вернуть деньги, если Вы не найдёте работу в определённый срок.
Стажировка в компаниях, или трудоустройство «на вырост». Сейчас многие организации открывают наборы на стажировки — гиганты вроде Яндекса, Сбербанка, Тинькофф, Озона и зарубежные компании.
Следить за предложениями можно на сайте и в соцсетях компаний. Зачем? Крутая возможность получить опыт коммерческой разработки в большой корпорации, зарекомендовать себя, пополнить портфолио, поработать под наставничеством старших коллег. Бытует мнение, что стажировка всегда бесплатная. Нет, это не так, в Яндексе, к примеру, стажировка оплачивается. Всё зависит от компании.
Ещё советы
Рассылок резюме может быть недостаточно, а при приёме на стажировку обращают внимание на достижения. Вот список советов, что стоит сделать, чтобы найти работу быстрее, легче и по душе:
- Сделать портфолио из самостоятельных проектов. Разместить его на LinkedIn, в соцсетях, в резюме и на биржах фрилансеров;
- Вооружиться списком пабликов вконтакте, групп в фейсбуке и каналов в тележке, где выкладывают интересные вакансии;
- Ходить на IT-конференции, выставки, лекции и семинары — или смотреть онлайн.
Что спрашивают у фронтенда на собеседовании?
Классическое собеседование делится на две части, как курсовая работа — теорию и практику. Мы не будем рассказывать, что надеть на собеседование, в какую сторону смотреть и куда деть руки. Только по делу.
Теория
Вопросов может быть много. В основном они направлены на опыт разработчика и его предпочтения в работе. Так становится понятно, по пути вам или нет. Вот топ вопросов, которые задают кандидатам:
- Какие знаете способы отладки ошибок в браузере?
- Как переносить макет, где есть нестандартные шрифты?
- Знакомы с какой-нибудь CMS? Разрабатывали что-то для этого движка?
- Как Вам работа в команде? У нас есть дизайнер, бэкенд-разработчик, технический руководитель, контент-менеджер. С ними нужно будет общаться, дружить, делать задачи вместе :)
- С какой работой раньше сталкивались? Умеете верстать сложные, многостраничные сайты, интернет-магазины? Примерно представляете, как это делать?
- Ну всё, теперь о Вашем стеке. Опишите, что знаете, с чем работали, почему выбрали именно такой фреймворк? Умеете в Git?
- Вы любите учиться? Что читаете, как часто изучаете новое, где берёте знания? Нам важно, чтобы сотрудник был готов к обучению, готовы дать книги, тренажёры с задачами, всякие полезные штуки;
- Какие технические проблемы у Вас были и как вы их решали? Может быть, ошибка в коде — съехал баннер на странице, и было не понятно, что с этим делать;
- Какая среда разработки вам нравится и почему? Мы работаем там-то, нам так комфортно. Готовы переучиваться?
- Знакомы с SEO? Как использовали в своей работе? Что с Вашей стороны нужно сделать,
чтобы сайт взлетел в поисковой выдаче? - Как оцените свою скорость работы? Лучше сдать результат на четвёрку или посидеть, покопаться в задаче, сделать идеально?
- (Прости господи) кем Вы видите себя в нашей компании через 5 лет?
- (Потому что предыдущий — вода) какие способы оптимизировать сайт вы знаете? Пример — страничка товара тормозит, загружается минуты три. В чем дело, как будете решать проблему?
Практика
Реальные задачки с рабочих полей. То, с чем чаще всего сталкивается фронтенд-разработчик. Это как рутина, так и что-то нетривиальное, с чем тоже нужно уметь справляться.
Будьте готовы к ряду вопросов о библиотеках, которые используются в работе, синтаксисе языка — например, 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 на высоком.
Обучаться фронтенду можно самостоятельно с помощью книг, онлайн-учебников, бесплатных курсов и тренажёров. А можно выбрать платные курсы со структурированной подачей материала и наставниками.
На собеседовании задают вопросы об опыте и предпочтениях. Например, точно спрашивают о стеке технологий, любимой среде разработки, способах решения проблем, умении работать в команде, знании систем управления контентом, скорости работы и планах на будущее.
Быть фронтенд-разработчиком сегодня круто и востребованно. Сейчас у желающих есть все ресурсы, чтобы освоить профессию с нуля. Рынок труда ежедневно пополняется новыми специалистами — и они, надо сказать, идут нарасхват :)
