От автора: привет, друзья! В данной статье будет затронута тема верстки и всего, что с ней связано: что это вообще такое, кто такой верстальщик, какие знания ему необходимы. Мы поговорим о требованиях, которые предъявляются к представителям этой профессии, а также рассмотрим варианты того, где можно работать и сколько зарабатывать, как найти свою нишу и т. д.
Кто такой веб-верстальщик
Чтобы ответить на вопрос, кто такой веб-верстальщик, нужно понимать, что представляет собой веб-верстка. А также разобраться в том, какое место в этапах создания сайта она занимает.
Итак, верстка — это процесс написания веб-страниц с помощью специальных языков. Если упрощенно рассмотреть схему создания сайта, то можно выделить следующие этапы.
Планирование. На данном этапе собирается информация о будущем сайте: для чего он создается, кто будет его основными посетителями, какой необходим функционал и т. д. Результатом является техническое задание (ТЗ).
Дизайн. Специалист на основе технического задания, составленного во время планирования, создает макет (внешний вид) будущего сайта. Делается это в каком-либо графическом редакторе. Чаще всего используются Figma и Photoshop.
Верстка. Верстальщик на основе макета, созданного дизайнером, делает (верстает) HTML-страницу. При этом используются такие языки как HTML, CSS и JavaScript. На данной странице уже работают все ссылки, листаются галереи, слайдеры, функционируют выпадающие меню и прочее. Если создается одностраничный сайт, лендинг, то его уже можно разместить в интернете. Итогом данного этапа является HTML-шаблон.
Программирование. На данном этапе программируется — либо устанавливается на готовую CMS (систему управления сайтом) — полученный на предыдущем этапе HTML-шаблон. Это делается с целью автоматизации процессов добавления, редактирования, удаления страниц и прочего. Программирование нужно для того, чтобы было проще управлять сайтом, и с работой мог бы справиться обычный редактор без технических знаний.
Размещение сайта в интернете, на хостинге. Проект тестируется, исправляются ошибки, если таковые обнаружены.
Схема несколько упрощена, но вполне реальна, и главное — наглядно видны основные этапы создания сайта, за счет чего можно расширить определение верстки.
Верстка — это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript. Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.
Необходимые знания и умения
Из написанного выше понятно, что для верстки используются HTML, CSS и JavaScript. Особенно HTML и CSS. Их нужно знать просто на 5+.
Конечно, не нужно наизусть учить все-все HTML-теги и CSS-свойства. Что-то уже устарело и не используется вообще, другое применяется постоянно, третье редко. Но, в целом, HTML и CSS нужно знать достаточно хорошо и понимать их возможности.
Также на верстку налагаются определенные требования. Она должна быть:
кроссбраузерной — то есть страница должна одинаково выглядеть во всех браузерах;
адаптивной — страница должна хорошо выглядеть в экранах мобильных устройств, планшетов и смартфонов;
SEO-friendly — верстка, которая будет оптимизирована под поисковые системы;
обеспечивающая доступность сайта.
На Западе сейчас большое внимание уделяется последнему пункту. Тут речь идет о том, чтобы люди с ограниченными возможностями — например, инвалиды по зрению — также могли пользоваться сайтом. И вопрос доступности относится, не в последнюю очередь, к верстке. Думаем, что вскоре этому и у нас будут уделять немалое внимание.
Кроме того, сегодня есть много технологий, которые применяются для верстки. Если раньше были HTML и CSS, то сегодня это HTML5 и CSS3, препроцессоры, Flex и Grid, которые уже можно смело использовать, различные фреймворки и так далее.
Конечно, все это сразу выучить и начать применять невозможно, поэтому верстальщик до становления хорошим профи проделывает определенный путь. Эту дорогу сейчас и рассмотрим, а также определимся, что нужно знать и уметь. Для каждого этапа развития разработчика существует определенное название.
Junior — знает основные HTML-теги и CSS-свойства, может править контент на странице, добавлять встроенное содержимое — например, видеоролик из YouTube или карту Googlе. При самостоятельной верстке макета испытывает некоторые затруднения и нуждается в наставнике и руководителе.
Junior точно должен знать HTML, CSS, разбираться в работе с изображениями, аудио, видео. Также ему необходима информация о том, какие есть браузеры, редакторы кода, инструменты разработчика — хотя бы один из них, от браузера Chrome.
Middle — самостоятельный верстальщик, способный сделать макеты практически любой сложности. Причем сверстанные страницы будут кроссбраузерными, адаптивными.
Объем знаний Middle намного больше. Он должен знать все, что знает Junior, а также: медиа-запросы, анимацию, CSS-фреймворки, препроцессоры, Flexbox, Grid, JavaScript, jQuery.
Senior — самостоятельный верстальщик, способный вести сложные проекты, планировать время на выполнение, обучать других сотрудников. Senior обязан знать все, что знают Junior и Middle, на высочайшем уровне. Кроме того, у него должны быть знания из смежных областей: например, SEO, основы PHP, популярные CMS, оптимизация загрузки и т. д.
Можно сказать, что такое деление условно. Например, некоторые относят знания основ PHP и CMS к Middle-разработчику. Тем не менее, даже такая примерная градация дает понять, какие навыки и знания нужны на каждом из этапов, и главное — показывает последовательность изучения этих технологий, языков и инструментов.
Заработок верстальщика
Верстальщик может найти работу не только в веб-студии или компаниях, занимающихся созданием сайтов на заказ. Эти профессионалы также нужны в интернет-СМИ, рекламных агентствах, IT-отделах некоторых организаций и так далее. Зарабатывать верстальщики в подобных областях могут в среднем от 40 000 до 80 000.
Посмотреть большое изображение
При подборе веб-студии для работы следует учесть одну особенность. Чем меньше организация, тем больше требований предъявляется к верстальщику, и наоборот.
Маленькие веб-студии с небольшим количеством сотрудников предъявляют к работникам больше требований из смежных областей. Например, им нужны знания PHP, PHP-фреймворков, CMS — WordPress или Joomla.
Более крупные компании предъявляют больше требований именно к верстке. Например, она должна быть с использованием препроцессоров, SEO-ориентированной, с микроразметкой и так далее.
Соответственно, иногда бывает проще устроиться на работу в более крупную компанию и заниматься только версткой, чем попасть в маленькую веб-студию и решать еще кучу смежных вопросов, которые к основному, по большому счету, не имеют отношения. И, как правило, заработок в больших организациях выше и стабильнее.
Кроме того, верстальщики очень популярны на фрилансе. На соответствующие биржи за их услугами обращаются иногда и те же веб-студии, и предприниматели, и рекламщики: для создания лендингов, внесения правок в существующие сайты и так далее. Зарабатывать на фрилансе верстальщику до 100 000 рублей в месяц более чем реально.
Посмотреть большое изображение
Конечно, на фрилансе есть немалая конкуренция. Но по своему опыту можем смело сказать, что хороших специалистов, которые ответственно относятся к работе и заказчикам, не так уж много.
Если выполнять свою работу качественно и в оговоренные сроки, не обманывать, быть на связи, отвечать на сообщения, то за довольно короткое время можно набрать пул постоянных источников, которые будут обращаться к вам снова и снова. А это уже достаточно стабильный и, главное, прогнозируемый заработок.
Альтернативы
Есть большое количество рекламщиков — арбитражников трафика — которым постоянно требуются услуги по верстке. Среднему такому профессионалу нужно с десяток лендингов и прелендингов в месяц. В них необходимо постоянно вносить правки, а также они нуждаются в постоянной доработке и оптимизации.
Соответственно, если найти такого рекламщика-арбитражника и работать с ним в паре, можно также неплохо зарабатывать. Причем доход будет довольно стабильным и прогнозируемым.
Верстка — это интересная, постоянно меняющаяся область деятельности в создании сайтов. Например, раньше использовали Float, и ни о каком Flex не было даже слышно. Потом появился Flex, и еще недавно его применяли с опаской, совсем чуть-чуть, а сегодня уже — на полную мощь.
То же самое произошло с Grid. И появляются новые и новые технологии.
Верстальщик — это профессия, в которой можно постоянно развиваться, и очень много смежных видов деятельности в веб-разработке неразрывно связаны с ней. Независимо от того, чем вы предпочтете заниматься в области сайтостроения (front-end, back-end, full-stack), с этим процессом вам придется сталкиваться постоянно.
Верстка — это Must Have для любого веб-разработчика. Она — вход в профессию.
Видео презентация курса «Верстка-Мастер. Полное руководство»
Читайте нас в Telegram, VK, Яндекс.Дзен
