Профессия Фронтенд-разработчик (frontend developer): Кто это? Чем занимается? Разбор профессии
В этой статье вы узнаете все подробности о профессии фронтенд-разработчика: что нужно знать, где и как обучаться, где можно работать и за какие деньги. Также в этой публикации мы подготовили для вас подборку онлайн, офлайн курсов и вузов, которые помогут добиться совершенства во фронтенде. А на десерт вас ждет большая подборка полезных бесплатных материалов.
Содержание
- Кто такой фронтенд-разработчик? Обязанности, чем занимается
- Зарплата и востребованность
- С чего начать и куда податься?
- Плюсы и минусы занятий на курсах
- Что выбрать: курсы vs халява?
- Выдающиеся личности в профессии
- Подборка online курсов
- Офлайн-курсы для фронтенд-разработчиков в Москве
- Вузы Москвы для фронтенд-разработчиков
- Часто задаваемы вопросы о профессии фронтенд-разработчик
- Плюсы и минусы профессии
- Где найти работу? Место работы, карьера
- Важные качества в профессии
- Полезные ссылки по фронтенду
Кто такой фронтенд-разработчик? Обязанности, чем занимается
Фронтенд-разработчик (frontend-developer) —программист, который занимается внешней, клиентской частью сайтов и приложений, отображающейся в браузере. То есть интерфейсом (users/usinginterface) и юзабилити: менюшками, фильтрами, кнопками, анимацией, формами, галереями, интерактивом, рекламными блоками и т.д. Он отвечает за корректную работу всех этих элементов веб-ресурса.
Результат работы этого специалиста играет одну из ключевых ролей в SEO продвижении сайтов и их популярности у ЦА. Он отвечает за верстку, реализацию функционала — все то, что напрямую влияет на пользовательский опыт и привлекательность площадки.
Иногда фронтенд-разработчик занимается и первичной структурой сайта. Результат его работы — удобный, быстрый сайт с тем самым интуитивным интерфейсом и ярким оформлением, соответствующим ожиданиям и потребностям пользователя.
Обязанности фронтенд-разработчика направлены на создание функционального интерфейса, который обеспечит положительный пользовательский опыт:
- работа с HTML и CSS и дизайн-макетами;
- верстка сайта и шаблонов под CMS;
- работа со скриптами для визуализации и анимации, их оптимизация;
- настройка всех блоков страниц (кнопок, галерей и остальных элементов сайта или приложения);
- проверка, тестирование функционала, устранение багов, автоматизация проекта.
Фронтенд-разработчик закладывает костяк веб-ресурса по макетам веб-дизайнера, прорабатывает оформление, занимается организацией и отладкой программного кода, устраняет неточности и баги, автоматизирует проект. Он отвечает за соответствие результата задумке, за то, чтобы во всех браузерах ресурс выглядел одинаково презентабельно и работал как надо. В целом, фронтенд-разработчику нужно иметь представление о веб дизайне и верстке.
Что нужно знать
Условно выделяют два вида фронтенд-разработчиков:
- corefrontenddevelopers. Хорошо разбираются в ядре JavaScript, создают новые функции на сайте, но не сильны в дизайн-аспекте.
- UX/UI frontend developers. Больше занимаются красотой и удобством интерфейса и не так сильны в бизнес-логике.
Независимо от этой классификации, чтобы добиться успеха в этой отрасли, нужно уметь очень много:
- языки программирования HTML, CSS, JavaScript (полезно изучить и PHP);
- основы структур данных, операционных систем, алгоритмов;
- препроцессоры и сборщики LESS, SASS, GRUNT, GULP, Stylus;
- методология адаптивной, отзывчивой верстки, в том числе кроссбраузерной и кроссплатформенной;
- мобильная разработка;
- веб-шрифты;
- библиотеки и фреймворкиjQuery, Bootstrap, Angular, React, Vue, Backbone и т.д.;
- система Git, GitHub, CVS и т.д.;
- базовое понимание адаптивного дизайна;
- популярные CMS (WordPress, Drupal, Joomla и другие) и варианты плагинов к ним;
- Photoshop и другие графические редакторы;
- шаблонизаторы, системы сборки и бандлеры;
- английский язык на уровне не ниже Intermediate, чтобы быть в состоянии читать спецификации;
- UI/UX-проектирование;
- основы SEO-оптимизации.
Если прямо углубляться, желательно знать OOCSS / BEM / SMACSS, Python, пригодится работа с объектами DOM, API, AJAX и CORS, понимание SVG, HTML5 API, ECMAScript 6, инструментов дебаггинга в духе ChromeDevTools и Firebug, баз данных и языков запросов MongoDB, SQL, MySql и т.д.
Это в идеале. Основное, что должен знать фронтенд-разработчик — конечно, HTML, CSS и JavaScript. Дополнительные инструменты и сервисы, которые нужно изучить, зависят от ниши фронтенда, которую вы выбрали.
Если разбить требования к знаниям по уровням:
- Стажеру-фронтенду достаточно знать JavaScript, HTML, CSS, Typescript и React.js.
- Джуниору — все, что выше, плюс Redux, БЭМ, Git, СУБД и адаптивную верстку.
- Миддлу — все, что знает джуниор, плюс Vue.js и кроссбраузерную верстку.
- Сениору — все, что выше, плюс Angular, RubyonRails и управление разработками.
- Лиду (ведущему специалисту) — все вышеперечисленное плюс основы управления персоналом, проектирование архитектуры ресурсов и приложений.
Зарплата и востребованность
Программист — одна из самых востребованных профессий. И фронтенд-разработчик — весьма популярная и хорошо оплачиваемая позиция.
Средняя зарплата фронтенд-девелопера на начало ноября 2020 года, по данным портала russia.trud.com, составляет около 92 тысяч рублей.
Средняя зарплата по уровням и скиллам:
- Джуниор — около 40-50 тыс. руб.
- Миддл— около 70-100 тыс. руб.
- Синиор— около 100-170 тыс. руб.
- Лид (ведущий специалист) — около 150-180 тыс. руб. и выше.
Обращаем ваше внимание: требования от вакансии к вакансии разнятся и их спектр довольно широк. Может потребоваться умение работать в командной строке Unix-систем, быстро разбираться в чужом коде и много чего еще.Уровень зарплат варьируется в зависимости от региона, страны и, естественно, ваших навыков и специализации. В России выше всего заработок фронтенд-разработчика в Москве — от 40 тыс. руб. для джуниоров.
В среднем для этой профессии (в рублях):
- в Москве, МО и Пермском крае — около 120 000;
- в СПб, Калининграде, Омске, Новосибирске и ряде других городов— около 100 000;
- в Казани и Екатеринбурге — около 90 000;
- в Краснодаре — около 85 000;
- в Новосибирске — около 60 000.
В регионах — от 50 000 и выше, например, в Екатеринбурге можно найти зарплату от 50 до 100 тыс. руб., во Владивостоке — от 40 до 150 тыс. руб., в Краснодаре — от 50 до 150 тыс. руб.
В целом, в России ЗП фронтенда колеблется в пределах 40-150 тыс. руб., в Москве средняя зарплата — от 100 до 260 тыс. руб. По данным портала StackOverflow, основанным на опросах за 2019 год, годовая зарплата фронтедрера без опыта работы в РФ составляет от 510 тысяч рублей до 1 млн 300 тысяч рублей, то есть диапазон примерно такой же, как и по данным русских источников: от 42 до 108 тысяч рублей в месяц.
Джуниоры без опыта, как правило, могут рассчитывать в России на доход до 40 тысяч, спустя год — на 50-80 тысяч,миддлы— на 100-130 тысяч в месяц. А для лидов и синиоров зарплата в среднем от 150 тыс. рублей, но есть вакансии и на 350, и на 650 тысяч в месяц. Все зависит от региона, требований и компании, в которую вы устраиваетесь, и, конечно, от результатов собеседования.
Поднять свой доход можно, сотрудничая с зарубежными компаниями, в том числе и через иностранные биржи.
Востребованность профессии
На начало ноября 2020 года количество вакансий для фронтенд-разработчиков составляет:
- на Russia.trud— 4496
- на hh.ru— 4 900 (более 1 700 в Москве и около 900 вакансий в СПб)
Как всегда, чем больше вы умеете, тем выше вы ценитесь и получаете. К тому же, профессия фронтенд-разработчика — одна из тех, в которых без постоянного самообучения и освоения новых навыков не обойтись. Нужно прокачивать скиллы, следить за трендами, изменениями в требованиях к клиентской стороне сайтов, интерфейсу различных девайсов.
С чего начать и куда податься?
Где учиться на фронтендаи насколько успешным будет поиск работы,зависит от ваших целей и уже имеющихся знаний. Потому что, как и в случае со многими другими IT-профессиями, одних только курсов, самообучения или одной только вышки в вузе недостаточно. Нужен комплексный подход. Кроме того, в вузах РФ профессии фронтенд-разработчика почти не учат.
Если вы абсолютный новичок в программировании, в качестве базы и старта вам пригодится высшее техническое образование, связанное с информационными технологиями. Затем можно пройти пару онлайн или офлайн-курсов, связанных именно со фронтендом. Также важно постоянно заниматься самообучением, ведь эта сфера весьма динамична.
Где обучаться — на курсах онлайн, офлайн или осваивать профессию самостоятельно?
Для начала разберем офлайн и онлайн-обучение. Здесь особой разницы нет, так как и при очном посещении курсов, и при дистанционном в онлайн-режиме, вы будете учиться на практике, так что здесь все зависит от ваших предпочтений. Качественные программы есть в курсах обеих категорий. Но в онлайн-формате можно найти намного больше предложений от разных учебных заведений.
Теперь давайте оценим плюсы и минусы самостоятельного изучения профессии фронтенд-разработчика и занятий на курсах.
Плюсы и минусы занятий на курсах
Что выбрать: курсы vs халява?
Вывод: чтобы получить профессию фронтенд-разработчика, нужно комбинировать обучение программированию в вузе с онлайн или офлайн-курсами и самообучение или подобрать основательные онлайн/офлайн-курсы и сочетать их с самообучением.
Выдающиеся личности в профессии
Джеффри Зельдман. Один из звездных веб-дизайнеров, ведущая фигура в отрасли, автор книг-бестселлеров о веб-дизайне, одна из самых известных—DesigningWithWebStandards. Основатель компании HappyCog https://www.happycog.com/, сотрудничавшей с WarnerBros. Pictures и другими компаниями мирового уровня.
- Его сайт http://www.zeldman.com/.
- Его соц. сети @zeldman
- Статьи о нем здесь https://www.webmascon.com/personas/zeldman.asp и здесь https://ru.qaz.wiki/wiki/Jeffrey_Zeldman.
- Видео-интервью с рассуждениями Джеффри Зельдмана о прошлом и будущем индустрии https://vimeo.com/219302853
Джесси Джеймс Гарретт. Основатель AdaptivePath, первой в мире компании, консультирующей по поводу создания дружественных для пользователя сайтов. Авторкниги TheElementsofUserExperience, первопроходец отрасли «информационной архитектуры».
- Его твиттер @jjg
- Статьи о нем здесь https://ru.qaz.wiki/wiki/Jesse_James_Garrett и здесь https://www.webmascon.com/personas/garrett.asp
Рич Харрис. Автор проектов Rollup (сборщик ES6-модулей), Svelte (быстрый фронтенд-фреймворк), Ractive (фронтенд-вреймворк для JS).
- Статьи о Харрисе здесь https://www.infoq.com/news/2019/05/svelte-3-interview-rich-harris/ (на английском).
- Твиттер Рича Харриса https://twitter.com/Rich_Harris
Дэн Абрамов. Разработчик, автор популярной библиотеки Redux. Статьи о Дэне здесь https://habr.com/ru/company/ruvds/blog/513764/ и здесь https://vc.ru/dev/63013-veshchi-kotoryh-ne-znaet-den-abramov-i-kak-eto-emu-pomogaetи здесь https://techrocks.ru/2017/09/26/dan-abramov-what-i-learned-after-almost/
Твиттер Дэна @dan_abramov
КайлСимсон. ЗнаменитостьвсфереJavaScript, авторкниг по разработке. Одна из них —YouDon’tKnowJS: Up — стала библией для JavaScript-разработчиков. Больше книг Кайла здесь https://www.livelib.ru/author/334195-kyle-simpsonТакже он авторсериикурсовнаFrontendMastershttps://frontendmasters.com/teachers/kyle-simpson/.
- Статьи о Кайле здесь https://techrocks.ru/2019/04/23/kyle-simpson-interview/,
- Твиттер Кайла @getify
Эван Ю. Автор популярного во всем мире UI-фреймворка—Vue.js. Сотрудничал с Google.
- Статьи об Эване https://habr.com/ru/post/350290/ и здесь https://oddstyle.ru/wordpress-2/intervyu-wordpress-2/intervyu-s-osnovatelem-vue-js-evanom-yu.html и здесь https://medium.com/@vvladislavv/vue-js-в-2018-интервью-автора-фреймворка-vue-js-эван-ю-33d8a0b71a2
- Твиттер Эвана @youyuxi
Егор Яковишен. Фронтенд-тимлид SetkaEditor, SeniorFront-endDeveloperвLookAtMedia, сооснователь стартапа в туристической сфере, трекер во ФРИИ, Мегафоне, Сбербанке.Автор и преподаватель курсов по JavaScript в MoscowCodingSchool и Skillbox.
- Статьи о Егоре здесь https://skillbox.ru/media/code/v_sostoyanii_dedlayna_sverkhsposobnosti/
- Твиттер Егора https://www.facebook.com/yaplusplus
Больше выдающихся веб-дизайнеров и фронтенд-разработчиков вы найдете здесь https://mcocos.ru/blog/design/znamenitye-dizainery/, здесь https://www.webmascon.com/personas/ и здесь https://habr.com/ru/post/140831/.
Подборка online курсов
Фронтенд-разработчик должен быть универсальным специалистом — верстать, «делать красиво», но и очень важно, чтобы он понял и сам сервер иразбирался в особенностях этого аспекта работы площадки. Каждое из этих направлений нужно освоить на должном уровне — приготовьтесь учиться упорно, ведь интерфейсы усложняются, как и требования к фронтенд-разработчикам. Упростят задачу курсы с последовательной насыщенной программой, с которыми мы и предлагаем вам ознакомиться.
Skillbox
Skillbox помогает своим выпускникам с трудоустройством, выдает по окончании сертификат. В университете 300 образовательных программ, более 300 преподавателей. Курсы Skillbox закончило более 63 тысяч студентов.
Преподают студентам эксперты рынка, курсы отличаются обилием практических занятий, плотной обратной связью от опытных профильных специалистов, помощью студентам при работе над дипломными проектами. Это один из самых популярных онлайн-университетов.
Предложения Skillbox для фронтенд-разработчиков:
- «Frontend-разработчик»
- «Профессия Frontend-разработчик PRO»
- «Веб-разработчик с нуля до PRO»
GeekBrains
На момент создания портал назывался «Школа программирования», что говорит о многом. Также учреждение предлагает более 1000 бесплатных курсов и интенсивов.
После прохождения обучения студентам выдается сертификат, компания помогает выпускникам устроиться на работу, устраивает на стажировку, в том числе и в ведущие в отрасли компании-партнеры GeekBrains. Преподают в этом университете ведущие специалисты, сейчас на сайте зарегистрировано более 3 млн пользователей. За каждым учеником закрепляется личный куратор-наставник.
Как GeekBrains обучает профессии фронтенд-разработчика:
- «Frontend-разработчик»
- «Факультет Frontend-разработки»
- «ReactJS. Профессиональная frontend-разработка»
- «Интенсив «Открытое онлайн-собеседование со студентом на вакансию juniorfrontend-разработчика»
- Курсы в 2 частях по JavaScript от GeekBrains 1 уровень и 2 уровень.
Нетология
Тут представлено несколько популярных профессий, по каждой из которых есть курсы различной интенсивности. Вас ждет более 20 различных обучающих программ для программистов. Компания предлагает помощь с трудоустройством и стажировкой в ведущих IT-компаниях РФ. В ее арсенале есть как платные, так и бесплатные курсы. Программы насыщенные, практики во время обучения, как и в предыдущих двух школах, вас ждет много.
Программы Нетологии, обучающие профессии фронтенд-разработчик:
- «Frontend-разработчик с нуля»
- «React: библиотека фронтенд-разработки №1»
SkillFactory
SkillFactory—оншайн-школа, которая специализируется на обучении профессиям, связанным с программированием. В портфолио компании более 30 различных обучающих программ в сферах DataScience, аналитики и веб-разработки, которые успешно прошло более 9 000 человек. В команде — более 50 преподавателей.
Компания является крупнейшим провайдером онлайн-образования в сегменте DataScience, сотрудничает с ведущими организациями, среди которых Яндекс, Ростелеком, Рамблер, Сбербанк. Эти и другие партнеры помогают школе создавать сильные учебные программы, а также выступают работодателями для выпускников курсов.
Курс от SkillFactory для фронтенд-девелоперов:
- «Специализация Frontend-разработчик»
Яндекс.Практикум
Яндекс.Практикум полностью оправдывает свое название —здесь студенты учатся на практике с первого дня. Предусмотрен диплом об окончании, бесплатный вводный курс, помощь с трудоустройством. Представлено более 10 учебных программ, связанных с программированием.
Курсы Яндекс.Практикумдля фронтендов:
Hexlet
Хекслет— портал с практическими программами, который специализируется на обучении программированию. Представлены обучающие материалы для 6 различных профессий из этой отрасли. Всего в школе есть 115 курсов по верстке и программированию, которые уже прошло более 250 000 человек.
Учебные программы для фронтендов от Хекслет:
«Профессия Фронтенд-программист»
itProger
itProger— онлайн-школа IT профессий, которая обучила уже более 4 900 человек. Всего представлено 75 программ обучения, большая часть которых бесплатна. Выбор направлений широк — от геймдева до углубленного изучения языков программирования.
ПредложенияitProger для фронтендов:
Mate Academy
Онлайн-школаMateAcademyинтересна тем, что студенты оплачивают пройденный курс уже со своей зарплаты, после получения профессии фронтенд-разработчика— компания помогает с трудоустройством и только после него берет оплату за проделанную со студентом работу. Таким образом академия уже трудоустроила более 700 своих выпускников.
ПредложенияMateAcademy для фронтенд-разработчиков:
«Frontend онлайн-курс с трудоустройством»
FructCode
Онлайн-школа FructCode с помощью своих интерактивных обучающих материалов и уроков обучила программированию и веб-разработке более 77 тысяч человек, в ней есть возможность осваивать новую профессию в режиме 24/7.
ПредложенияFructCode для фронтенд-разработчиков:
ITVDN
Онлайн-школа ITVDN предлагает более 180 видеокурсов, связанных с популярными языками программирования и информационными технологиями. Каждый месяц компания выпускает 2-3 новых обучающих программы—полученные в ней знания всегда актуальны.
Предложения ITVDN для фронтенд-разработчиков:
HTMLacademy
HtmlAcademy—порталинтерактивныхITкурсовсподробнымитренажерами для оттачивания работы сHTML, CSS и JavaScript, часть из которых бесплатна. Обучение на практике, интенсивы и специализация портала именно на фронтенде— залог успеха.
Предложения HTMLAcademy для фронтенд-разработчиков:
- «Профессия «Фронтенд-разработчик»
- Курсы в 2 уровнях по JavaScript—уровень 1, уровень 2
- «Профессия «React-разработчик»
- «React. Разработка сложных клиентских приложений»
Mobios School
MobiosSchool— онлайн-школа, специализирующаяся на обучении всех, кто связал свое будущее с ай-ти индустрией в рамках 6 популярным профессий. По окончании обучения выпускники получают сертификат.