Чем отличается верстальщик от frontend разработчика

Чем отличается верстальщик от front-end developer?

Если фронтенд строится на стороне сервера, то дополнительно потребуется знать используемый серверный язык программирования (например, Python, Ruby или PHP) и используемый фреймворк (Django, Ruby-on-Rails, Yii). На практике бывало такое, что фронтендер просил в нужной части проекта сделать var_dump от структуры данных, которую надо показать и перечислить серверные методы, которые надо вызвать по нажатию предполагаемых кнопок.

Зачастую фронтенд-разработчик может и сам закодировать эти серверные методы, если не требуется углубляться в серверную логику (отношения в данных, конкретная бизнес-логика, хранение данных, кэширование, очереди, крон-задачи). Я лично таких очень ценю.

И моё личное мнение — фронтенд разработчику не помешают базовые знания про UML. Иногда с ними так тяжело обсуждать обмен данными по AJAX. У них это какой-то непрерывный поток магической энергии, волшебным образом преобразующийся в буковки на экране пользователя, а вот для бакенда это набор отдельных операций, иногда ещё и асинхронный. Диаграммы последовательностей ни читать, ни писать многие не умеют. Таймлайны составлять не умеют.

Чем верстальщик отличается от фронтенд-разработчика

Если поискать на работных сайтах сабж (любой из них), то число вариаций будет зашкаливать: верстальщик, web developer, фронтенд-разработчик, веб-верстальщик, HTML-верстальщик, даже слово «веб-мастер» и «веб-технолог» некоторые помнят.

Если поискать на работных сайтах сабж (любой из них), то число вариаций будет зашкаливать: верстальщик, web developer, фронтенд-разработчик, веб-верстальщик, HTML-верстальщик, даже слово «веб-мастер» и «веб-технолог» некоторые помнят. При этом з/п человека-верстальщика может быть 60-100К, а более круто звучащего Web Developer (ага, с заглавных) — 30-70К. Обе вакансии в примере московские, мы смотрели в вакансиях ITmozg.

Всё это говорит об одном: работодатели не чуют разницы между «верстаком» и «фронтендом». А в чем, собственно, разница

Коротко: HTML-верстальщик — это тот, кто делает из графического макета HTML+CSS страницу. Без погружения в бэкенд. Фронтенд-разработчик — это тот, кто может помимо этого писать на JavaScript, знает фреймворки и библиотеки, знает и применяет AJAX и CORS, умеет писать заглушки для AJAX запросов. То есть с частичным погружением в бэкенд.

Когда стоит интересоваться вакансией верстальщика?

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

• Опыт командной работы — очень важный пункт при приеме в любую нормальную ИТ-компанию, плюс вам на будущее.
• Понимание процесса — научитесь верстать так, чтобы разработчик не матерился, принимая работу. А еще поймете, когда дизайнера можно потыкать носом в макет и поучить жизни. Мелочь, а приятно.
• Наставничество — ситуация на рынке кадров, не смотря на его «перегретость», все еще не самая лучшая. Иными словами, готового профи найти сложно. Поэтому частая практика: вас принимают на место верстальщика и обучают тонкостям (конечно, при условии, что базу вы знаете-умеете). Но слишком рассчитывать на помощь мастера не стоит, ибо он тоже занят. Как говорит наш разработчик: «80% процентов успешного успеха — это самостоятельное изучение и умение посылать в гугл правильные запросы. А если вообще хотите быть впереди планеты всей — запросы в англоязычный интернет».
• Возможности горизонтального роста — не собираетесь же вы всю жизнь собирать хтмл-шаблоны? Пощупаете JS, если с логикой все в порядке — мутируете со временем в полноценного фронтенда. Или в бэкенда, что больше понравится. Большинство нынешних ИТ-компаний дают возможности расти, и это радует. Мы у себя в студии тоже — обучаем и выращиваем дремучих спецов.

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

Западные ИТ-компании выдвигают такой список требований:

• Понимание ключевых серверных технологий.
• Верстка графических макетов в HTML, CSS и JavaScript.
• Создание визуально привлекательных веб-страниц и интерфейсов.
• Создание, редактирование и изменение шаблонов CMS или фреймворка.
• Программирование на JS и знание его библиотек.
• Кросс-браузерная и кросс-платформенная верстка и тестирование.
• Препроцессоры и сборщики LESS, SASS, GRUNT, GULP.
• Понимание UX и юзабилити.
• Работа с SVG-объектами.
• Адаптивная/отзывчивая верстка.
• Мобильная разработка.
• Работа с DOM.
• Умение работать с контролем версий (Git, GitHub, CVS и т.д.).
• Знание HTML5 API (канвасы, геолокация, видео и т.д).
• Иметь опыт работы с веб-форматами (JSON, JSONP, XML).
• Уметь проводить юнит-тестирование.
• Уметь работать с веб-шрифтами.
• Уверенно пользоваться графическими редакторами.
• И много всего еще.

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

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

Призываем работодателей тщательнее выбирать термины при размещении вакансии. А вам, коллеги, — проверять каждую. Мало ли, что там скрывается за очередным «frontend-HTML-верстальщиком».

В чем отличие веб-разработки и верстки: на кого лучше начинать учиться и есть ли разница

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

Основные различия между веб-разработчиком и верстальщиком

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

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

Верстальщику для успешной карьеры будет достаточно:

• Научиться работать с основными графическими программами, где веб-дизайнеры создают макет: Photoshop, Figma, Experience, Illustrator. Слишком высокий уровень владения необязателен, но вам потребуется уметь работать с макетом, который вам предоставили – выгружать из него изображения, шрифты, рассчитывать расстояние между элементами и так далее.

Пример рабочего макета для верстки в Figma

• Знать на хорошем уровне HTML и CSS. Ваша основная задача верстать макеты, созданные дизайнером на этих языках разметки, поэтому вы должны знать их на хорошем уровне. В идеале, у вас не должно быть проблем с тем, чтобы сверстать макет любой сложности.
• Уметь делать адаптивную верстку. Макет, который вы сверстаете, должен одинаково хорошо смотреться на любых размерах и форматах экрана – от смартфонов до монитора. Если вы хорошо освоили HTML/CSS, то научиться задавать условия для адаптивной верстки сможете достаточно быстро.
• Знать как работать с базовыми HTML-фреймворками, вроде Bootstrap. Он значительно упрощает верстку некоторых компонентов, да и в целом ускоряет процесс. Если у вас есть хорошая база в виде углубленных знаний HTML/CSS, то освоение не займет много времени.
• Уметь работать с CSS-препроцессорами. С их помощью можно значительно упростить и ускорить верстку. Хоть само их знание необязательно для разработки, но многие компании и рабочие коллективы трубуют от начинающих умение работать с препроцессорами. Если вы освоили CSS, то препроцессоры сможете освоить за пару вечеров.
• Умение делать кроссбраузерную верстку. То есть готовый макет должен нормально отображаться в любом браузере. Сейчас с этим проблем нет, но если вы решили применить новые технологии, то должны понимать, как сделать так, чтобы они корректно работали в основных браузерах.
• Базовые знания JavaScript. Они могут потребоваться, чтобы внести в готовый проект немного динамики, например, всплывающие окна.

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

• Продвинутые знания HTML и CSS, включая самые новые технологии. Ваша задача теперь не просто сверстать сайт, чтобы он был похож на тот, что на макете, но и сделать так, чтобы он был адаптирован для работы со сторонними инструментами, например, админ-панелью. Для этого нужно знать HTML и CSS на продвинутом уровне.
• Продвинутые знания JavaScript и сопутствующих библиотек, вроде JQuery. От вас потребуется не просто преобразовывать изображение сайта в код, но делать его функциональным, а для этого, в большинстве случаев, требуется умение работы с JavaScript.
• Умение работать с продвинутыми фреймворками вроде Angular, React и подобными. Они значительно сложнее, чем условный Bootstrap и без хороших знаний связки HTML/CSS/JS освоить их будет нереально. Даже, если вы опытный верстальщик, то на подробное изучение любого продвинутого фреймворка уйдет минимум пара недель.

Пример рабочей среды Angular.js

• Знание серверных технологий, вроде AJAX, на базово-среднем уровне. Хоть фронтендер и не занимается работой с сервером, иногда возникает необходимость “подкрутить” какой-то функционал на серверной стороне.

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

Разница в обязанностях

В задачи верстальщика входит лишь перевод макета от дизайнера в HTML/CSS. Дополнительно результат нужно будет адаптировать к разным типа устройств и браузеров. Навыки программирования практически не потребуются – максимум, что от верстальщика будет необходимо сделать: пару всплывающих окон, анимацию, слайдеры, подгрузку каких-нибудь дополнительных карточек (и то в редких случаях). Большинство из этого можно попытаться реализовать даже без навыков программирования – только за счет CSS и HTML.

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

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

Перспективы разработчика и верстальщика

С развитием Zero-code, нейросетей и автоматической генерации HTML/CSS кода профессия верстальщика начинает понемногу обесцениваться. Да, вакансии до сих присутствуют в большом количестве, но оплата по ним становится ниже. Например, сейчас предпринимателю гораздо проще сделать одностраничный landing page самому или нанять кого-нибудь, кто сделает его в конструкторе. Это значительно быстрее, чем нанимать дизайнера для рисования макета, а потом и верстальщика для его преобразования в код.

Появляется все больше сервисов, способных вытеснить верстальщиков с рынка через несколько лет

Верстальщики пока еще не вытеснены с рынка и вряд ли эта профессия исчезнет в ближайшее время, но в ней наметились такие тенденции:

• Снижение оплаты. Еще лет пять назад верстальщик мог получать примерно столько же, сколько начинающий веб-разработчик. Сейчас оклад в среднем уменьшился на 30-40%.
• Постепенное увеличение требований к соискателям. Лет пять назад было достаточно на хорошем уровне владеть HTML/CSS и уметь адаптировать свою верстку под мобильные платформы. Сейчас все чаще появляются дополнительные требования, вроде знания JavaScript, владение популярными препроцессорами и так далее.
• Снижение порога входа. С другой стороны профессии верстальщика становится все проще обучиться бесплатно: есть много полезных материалов в открытом доступе, библиотеки вроде Bootstrap и нововведения в CSS значительно облегчают процесс верстки.
• Увеличение конкуренции. В свою очередь снижение порога входа приводит к появлению все большего количества специалистов, в то время как количество проектов растет медленнее, чем появляются новые специалисты.

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

На кого лучше начинать учиться

В обоих случаях вам придется изучать базу, которая включает в себя:

• HTML/CSS до продвинутого уровня;
• адаптивную верстку;
• базовый JavaScript;
• библиотеки вроде Bootstrap.

Это вполне реально освоить полностью самостоятельно и бесплатно. В интернете много статей, видео-гайдов, туториалов на примере верстки реальных проектов, тематических форумов, книг. Основная проблема в структурировании материала – его много и начинающему изучать очень сложно выстроить логическую последовательность шагов. Однако, на форумах и профессиональных блогах можно найти примерный учебный план от практикующих веб-разработчиков. Если его придерживаться, выделять на учебу не менее 2 часов в день и 4 дней в неделю, то вполне реально освоить все необходимые навыки для верстальщика начального уровня месяца за 2-3.

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

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

Если вы не хотите работать неопределенное время в позиции верстальщика, то после освоения базы вам придется изучать:

• JavaScript на продвинутом уровне – знать несколько “ходовых” скриптов и выражений будет недостаточно;
• серверные языки программирования, в первую очередь PHP;
• продвинутые фреймворки вроде React;
• Git для отправки готовых проектов и работы в команде.

Дополнительно может потребоваться изучение разных вспомогательных технологий для работы в той или иной команде. Если вы сумели в полной мере освоить приведенный выше перечень, то это не будет для вас проблемой – разберетесь за пару вечеров.

Срок обучения на веб-разработчика зависит от таких параметров:

• обучаетесь самостоятельно или в рамках каких-то комплексных курсов;
• сколько времени готовы уделять в день и сколько дней в неделю;
• какой стек технологий решили выбрать (изучать все основные фреймворки и библиотеки одновременно не рекомендуется);
• ваших личных особенностей.

В среднем на обучение профессии веб-разработчика придется потратить от 6 месяцев.

Как учиться на веб-разработчика

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

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

Профессиональные курсы по веб-разработке стоят дорого, а их длительность составляет несколько месяцев

Заключение

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

Как верстальщик стал фронтенд-разработчиком

Всем привет! Давно думал рассказать, как я попал на Хеслет, и как он изменил мое представление об онлайн-курсах и подходе к самообразованию.

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

Первые шаги: изучение рынка, случайная встреча с Хекслетом, изучение вёрстки в Академии и работа

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

HTML и CSS я изучал в HTML Academy, в то время это был лучший сайт с интерактивными курсами по вёрстке. Моей первой ошибкой было то, что я надолго застрял в вёрстке, даже нашёл работу и просидел на ней полтора года, пока второй раз в жизни не решил, что нужно что-то менять.

JavaScript я начал учить по онлайн-книге И.Кантора, плюс записался на онлайн-интенсив «JavaScript. Архитектура клиентских приложений» в HTML Academy. Курсы в Академии проходят в формате самостоятельного решения задач, и видеолекций, на которых показывают 80 % того самого решения. На выходе получается pet-проект. Этот подход распространён в большинстве курсов. Студенту в лайв-режиме показывают, как решить задачу, похожую на ту, которую ему дают для самостоятельного решения. В итоге получается так, что студент почти всё переписывает с решения учителя, и ему кажется, что в реальном мире все так же просто.

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

На Хекслет я попал по рекомендации одной хорошей знакомой, с которой познакомился в Telegram. Уже в июне у меня было первое собеседование на должность фронтенд-разработчика. Спрашивали в основном стандартные вопросы про типы данных в JS, указатели на область видимости, замыкания, способы объявления функций, наследование. Из вёрстки спросили только, что такое БЭМ и пользовался ли я препроцессорами раньше.

Ответы на 90 % этих вопросов есть в серии книг You don’t know Javascript. Я бы посоветовал всем, кто ищет работу, прочитать эти книги, они небольшие.

Через пару часов в Telegram мне пришло сообщение, что я прошел собеседование. Так мне наконец-то удалось сменить профессию верстальщика на фронтенд-разработчика. Несмотря на это, я продолжил по вечерам заниматься на Хекслете.

В первый день мне достался обычный ПК с установленным на нем Линуксом. Мне сказали, чтобы я установил все нужные программы. Это было моё первое знакомство с этой операционной системой. Помню, как я с красным лицом гуглил «как установить WebStorm на Линукс» и надеялся, что никто в этот момент не посмотрит в мой экран. Уже к середине дня мне поставили задачу сделать небольшую правку на сайте одного из клиентов. Все сайты этой компании были написаны на Ruby, с которым я не имел ранее опыта. Тимлид мне помог развернуть проект, и уже к вечеру от меня улетел первый комит. Работая в этой компании, начал изучать React и связанные с ним библиотеки. На нём было несколько проектов, в которых я выполнял отдельные задачи.

У меня осталась проблема — зарплата была не очень высокой из-за отсутствия конкуренции IT-компаний в моём городе. Решил, что нужно попробовать поискать удалённую работу. Поиск я начал на площадках hh.ru и Хабр-карьера. Но этот поиск не дал результатов. Либо я не получал ответов на отклики, либо рекрутёры куда-то пропадали.

Последней каплей стало скайп-собеседование, после которого мне дали тестовое задание. Задание я выполнил технически правильно, но никакого фидбека по нему не получил. А человек, у которого я просил фидбек, просто не ответил на сообщение. И я решил, что стоит попробовать поискать работу в другом городе с релокацией.

Смена работы и дальнейший рост

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

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

Все было уже по старой схеме: компьютер, установка программ, чтение внутренней документации. Помню, как в тот момент меня впечатлили на данный момент казалось бы обычные вещи. Платная подписка на Slack, Gmail, Jira и так далее. На следующий день дали первый проект, который был написан частично на устаревшем фреймворке Backbone. Хорошо, что первые задачи не были связаны с ним.

Ах да, новая компания, и новый backend-язык. В этой компании на бэкенде использовался Python. Помню, как на развертывание первого проекта у меня ушло 8 часов, а на решение задачи часа два. Впоследствии мне всё же пришлось покопаться в Backbone — не такая сложная библиотека, какой кажется на первый взгляд.