Кто такие верстальщики, зачем они нужны и что умеют

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

Сложность в том, что нельзя просто загрузить картинки. Браузеру нужно получить инструкцию на специальных языках:

• HTML, язык гипертекстовой разметки. Позволяет задать структуру отображения сайта и создать интерактивные элементы: формы, выпадающие списки, кнопки.
• CSS, каскадные таблицы стилей. С их помощью задают форму, шрифты и цвета разных элементов.

HTML и CSS не позволяют ничего вычислять, анализировать и изменять, не содержат функций и последовательности действий, а только задают внешний вид сайта так, чтобы браузер пользователя мог его понять и правильно отобразить. Поэтому верстальщик — не совсем программист. Для карьерного роста верстальщику полезно знать языки программирования, например JavaScript, который тоже нужен для формирования внешнего вида сайта.

Часто отдельного верстальщика в компании вообще нет, а вёрсткой занимается фронтенд-разработчик, который знает HTML, CSS и JavaScript.

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

Работа верстальщика построена по следующей схеме:

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

2. Пишет код на HTML и CSS, чтобы страница в браузере отображалась точно так же, как на макете.

3. Этот код верстальщик отправляет разработчикам, чтобы его добавили на сайт. Если разработчик верстает на HTML сам, то он же занимается добавлением.

Во время написания кода задачи верстальщика таковы:

● В точности повторить макет дизайнера.

● Создать интерактивные элементы: выпадающие списки, кнопки, формы.

● С помощью инструментов HTML и CSS сделать так, чтобы страница правильно выглядела на экранах с любым разрешением.

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

Иногда в работе верстальщика появляются дополнительные обязанности:

● Исправить вёрстку, если содержимое сайта изменилось.

● Интегрировать написанный им шаблон страницы в систему управления сайтами, которой пользуется компания, например Bitrix. Часто именно верстальщику нужно сделать так, чтобы созданной им страницей могли потом пользоваться контент-менеджеры для создания новых записей в блоге или карточек товаров.

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

Чтобы стать верстальщиком, необходимо освоить следующие навыки:

● HTML и CSS. Знать синтаксис этих языков. Уметь с их помощью воспроизводить внешний вид, созданный дизайнером. Понимать, как создавать интерактивные элементы.

● Интерфейс среды для работы. Писать HTML-код можно и просто в блокноте. Однако удобнее делать это в специальных инструментах — редакторах кода, например Visual Studio Code или Codeanywhere.

● Адаптивная вёрстка. Уметь с помощью инструментов HTML и CSS подстраивать страницы под размер экранов. Знать принципы вёрстки для мобильных устройств.

● Основы дизайна. Понимать сочетания шрифтов и цветов, чтобы без дизайнера создавать простые страницы или вносить изменения в макеты.

● Работа с препроцессорами. Препроцессоры — это изменения и расширения HTML и CSS, которые облегчают работу. Например, Pug позволяет создавать в HTML циклы, чтобы не писать один и тот же код несколько раз подряд.

● CMS и конструкторы. Знание популярных систем управления сайтами: WordPress, Bitrix, Tilda. Умение загрузить туда написанный код страницы, создать или адаптировать шаблон.

● JavaScript. Уметь написать на языке программирования простую анимацию или переключатель. Пригодится в вёрстке, а в будущем поможет карьерному росту или переходу из верстальщика в программисты.

Также понадобятся софтскилы — навыки, напрямую не связанные с вёрсткой, но позволяющие работать эффективно:

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

● Управление временем. Умение соблюдать дедлайны, ставить и выполнять задачи, распределять рабочие часы.

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

● Эмпатия. Пригодится, чтобы уметь поставить себя на место пользователя. Это поможет понять, насколько удобно будет пользоваться страницей, над которой работает верстальщик.

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

По данным работа.ру, средняя зарплата верстальщика по России — 66 тыс. рублей, минимальная — 40 тыс. рублей, а максимальная доходит до 144 тыс. рублей. Как правило, 40–60 тыс. рублей предлагают специалистам, которые разбираются в HTML, CSS и основах JavaScript.

На hh.ru опубликовано больше 500 вакансий для верстальщиков. На сайте «Город работ» — больше 6000 вакансий. Такое количество предложений указывает на то, что специалисты в этой области достаточно востребованы.

Однако главный плюс профессии верстальщика в том, что если углубить свои знания, то можно стать веб-разработчиком или фронтенд-разработчиком. Эти профессии напрямую связаны с программированием, и вакансий по ним значительно больше — свыше 11 000 предложений на hh.ru. Кроме того, таким специалистам платят больше: от 100 до 500 тыс. рублей в зависимости от навыков и опыта.

Изучать вёрстку нужно постепенно, по шагам. Лучше действовать по следующей схеме:

1. Освоить HTML, его синтаксис, основные инструменты, принципы разбиения страницы на блоки, задания размеров объектов, создания интерактивных элементов.

2. Освоить CSS, синтаксис и принципы задания внешнего вида элементов.

3. Изучить работу в средах написания кода, для облегчения процесса.

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

5. Изучить основы дизайна, чтобы самостоятельно составлять простые страницы и макеты.

6. Разобраться в популярных CMS, понять принципы их работы.

7. Освоить препроцессоры, чтобы ускорить и автоматизировать работу.

8. Изучить основы JavaScript для создания интерактивных страниц.