Кто такой верстальщик
Верстальщик создаёт веб-страницы по дизайнерским макетам, используя HTML-код для правильного отображения на различных устройствах, таких как телефоны, планшеты и ноутбуки.
HTML позволяет создавать структуру сайта из базовых элементов, таких как блоки, картинки, видео- или аудиофайлы. Кроме того, HTML позволяет создавать интерактивные элементы, например, изменять цвет фона у кнопок при наведении.
CSS используется для визуального оформления веб-сайта. Он задает стили, такие как цвета, шрифты и группирует объекты и блоки между собой. Благодаря CSS, у верстальщика есть много возможностей для творчества и воплощения дизайнерских идей.
Поэтому верстальщик — это почти программист, который умеет понимать дизайнерские задумки и создавать из них работающие версии веб-страниц.
Hard skills верстальщика
Расстроим ленивых — одними HTML и CSS вы не обойдётесь. Полезных технологий и инструментов много, однако есть must have для любого верстальщика. Перечислим всё необходимое.
Основы дизайна. Важно, чтобы верстальщик понимал базовые концепции UX/UI, такие как то, что 12-й размер шрифта может быть слишком маленьким, или что светло-серый цвет на белом фоне может быть плохо читаемым. Для улучшения своих знаний в этой области, можно начать с прочтения книги Стива Круга «Не заставляйте меня думать», которая является бессмертной классикой для всех, кто работает с веб-дизайном.
Препроцессоры. Препроцессоры позволяют удобнее и быстрее верстать. Например, с помощью Sass можно использовать переменные и функции в CSS, а с Pug - тоже самое, только в HTML. Кроме того, Pug позволяет делать вложенные конструкции без скобок и даже взаимодействовать с JavaScript-кодом.
Pug не расширяет язык HTML, но позволяет использовать дополнительные конструкции, такие как циклы. Например, если нужно вывести несколько карточек товаров на статической странице, то в HTML нужно сверстать каждую карточку вручную. В Pug же можно создать шаблон карточки и использовать его для всех карточек, что экономит время и упрощает верстку.
Sass решает аналогичные задачи. Например, у нас есть шаблон кнопки — он представляет собой набор стилей, который наследуют другие элементы button на странице. Без препроцессора нам пришлось бы копировать все стили и создавать отдельный класс для каждой кнопки. А с Sass мы лишь переопределим некоторые свойства класса. Можно даже сделать миксин — такой шаблон, который мы назовём button и будем вызывать каждый раз, когда понадобится очередная кнопка.
Ещё один пример. Допустим, дизайнер создал 50 иконок с пятью размерами — и для каждой нужно создать отдельный класс. Можно действовать прямолинейно: 50 раз скопировать селектор и во всех копиях поменять название. А можно создать массив в Sass и в нём сделать 50 иконок. В общем, гораздо проще запрограммировать препроцессор, чем писать всё вручную.
Bootstrap и другие фреймворки. В Bootstrap все настройки находятся в одном файле _variables.scss, что значительно упрощает код и его понимание. В этом же файле указаны все цвета, параметры закругления кнопок и элементов, шрифты и отступы — их легко установить с помощью одной переменной.
Рекомендуем изучить хотя бы один популярный фреймворк — ведь в коммерческой разработке вы неизбежно с ними столкнётесь. А зная один фреймворк, вы уже относительно быстро разберётесь с другими — как с документацией, так и с кодом. Учтите, что в документации Bootstrap описаны только основные моменты, освоить его по-настоящему можно только в процессе разработки.
JavaScript. Как минимум нужно умение подключать сторонние библиотеки или настраивать слайдер. Верстальщик не только работает со стилем, но и создаёт базовые функциональные элементы, проверяет, как ведут себя кнопки и отправляются данные. В проектах часто пишут что-то несложное на JavaScript: слайдеры, переключатели и простенькую анимацию. Всё это собирается на ванильном JS — и это must have. А если в команде пишут на React, то и его придётся освоить на базовом уровне.
Сборщики (например, Webpack). Если научитесь запускать их по инструкции, этого будет достаточно. Начинающему верстальщику не нужно глубоко понимать сборщики, потому что на проекте с ними, как правило, работают фронтендеры.
Виртуальные окружения. Хватит умения разворачивать и настраивать их, прокидывать пакеты, переустанавливать переменные.
Кроме того, вам наверняка пригодятся и дополнительные инструменты:
- Git — чтобы хранить проекты и управлять ими.
- Docker — чтобы упаковывать проекты со всеми окружениями и зависимостями (если Docker используют в компании).
- Командная строка Linux или macOS — чтобы автоматизировать работу.
- Node.js — чтобы устанавливать, обновлять и удалять npm-пакеты.
Остальное зависит от того, какие технологии используют в конкретной компании. Где-то пишут на PHP, а где-то на Ruby или Python. Например, у нас в Hexlet верстальщики даже иногда копаются в Ruby и строят бизнес-логику под компоненты, которые верстают. Но это скорее исключение, чем правило.
Но даже когда вы всё это освоите, вам придётся постоянно учиться новому. Вёрстка — не статичный предмет, спецификации постоянно меняются, и нужно следить за тем, что происходит в индустрии.
Эмпатия — главный soft skill верстальщика
Верстальщик должен быть эмпатичным. Что бы ни говорили дизайнеры и разработчики, важнее всего то, что увидит пользователь, — именно эту мысль нужно доносить до руководства.
Кроме того, верстальщик должен понимать, что такое доступность. Необходимо упростить взаимодействие с сайтом для пользователей с ограниченными возможностями, например, для слабовидящих людей или для людей с нарушениями опорно-двигательного аппарата, которые работают только с клавиатурой. Для этого нужно продумать, каким будет input и максимально описать label. Важно учитывать, что визуально сайт может выглядеть хорошо, но скринридер не всегда может объяснить, для чего нужно текстовое поле.
Хороший способ - посетить популярный сайт, отключить экран, включить скринридер и выполнить какой-то сценарий, например, заказать билет. Это поможет понять тонкости работы с пользователями, которые пользуются скринридерами. При этом станет ясно, что в книгах и статьях не всегда рассказывают обо всех тонкостях работы с такими пользователями.
Совет кажется очевидным, но многие верстальщики об этом не задумываются. Хотя их задача в том, чтобы сайт работал — в том числе и с программой для чтения с экрана.
Сколько зарабатывают верстальщики
Всё сильно зависит от умений специалиста. Так, начинающий специалист, который знает основы HTML, CSS и JavaScript, может получать от 25 до 60 тысяч рублей в зависимости от региона.
Например, вот чего ожидают от верстальщика без опыта работы:
Специалисты с опытом работы от года, уже могут претендовать на зарплату от 70 до 130 тысяч рублей. Такой широкий диапазон объясняется разницей в квалификации и наборе технологий, которыми должны обладать кандидаты. Как правило, от мидл-специалиста ждут, что он разбирается в JavaScript-фреймворках, умеет работать с препроцессором, сборщиками и знает стандарты веб-вёрстки:
Senior-специалисты получают гораздо больше — от 100 до 200 тысяч рублей. От таких верстальщиков работодатели ожидают, что они умеют писать хороший код на JavaScript и отлично знают Vue, React или Angular. Поэтому часто опытные верстальщики переходят во Frontend- или Fullstack-разработку.
Вот чем занимаются и что знают Senior-разработчики:
Как учиться новичку
Учебных материалов и ресурсов по вёрстке сейчас море. У меня есть несколько любимчиков, которых я рекомендую всем начинающим.
Книги. Тут советую быть осторожнее, потому что значительная часть книг про HTML и CSS — на английском языке. И пока их переведут, стандарты уже поменяются. Но есть хорошие книги — сборники рецептов. Например, «CSS для профи» Кита Гранта или «Секреты CSS. Идеальные решения ежедневных задач» Лии Веру. Лучше проверять примеры, потому что стандарты меняются часто и некоторые рецепты уже могут устареть.
Сайты. Есть прекрасный портал CSS-Tricks, на котором выкладывают сборники рецептов и примеры кода. Также можно посмотреть авторов на CodePen — там публикуют код и примеры вёрстки, решения задач, организовывают конкурсы по вёрстке.
Курсы. Основная ошибка новичков при самостоятельном обучении — идти за новым, пропуская базу. В результате они знают, что такое гриды, но не понимают, что такое потоки документов, как они друг на друга накладываются и как этот порядок изменить. Особенно сильно это мешает на практике, в коммерческой разработке.
Если не знаете, как самостоятельно организовать процесс обучения и хватаетесь хаотично за все темы подряд, то курсы — это неплохой выход. Если же вы уже сумели освоить несколько технологий самостоятельно, пишете на серверном языке и понимаете, как правильно двигаться по материалу, то и с вёрсткой справитесь.
Однако надо помнить, что курсов недостаточно, чтобы войти в новую профессию. Ни одна школа не даст достаточного количества практики, поэтому ещё во время обучения постарайтесь придумать для себя интересные проекты или набирайтесь опыта на фрилансе. Худшая стратегия — ограничить себя задачам с курсов, учебными проектами и тренажёрами.
Практика — это ключевая часть обучения. Даже если вы прочитаете тонну самых лучших книг, вы не сможете сразу всему научиться. Теорию нужно постоянно закреплять на практике: начните с вёрстки текста и постепенно двигайтесь к более сложным темам.
Вырасти с нуля до уровня «могу сверстать лендинг» можно за месяц. Нужна лишь практика — и не только дома, но и в коммерческой разработке. Здорово, если после нескольких учебных проектов вы устроитесь на работу и будете набивать шишки в продакшне.
Учебный материал лучше разбивать на небольшие темы, а сразу же после изучения каждой темы надо выполнять практические задания. И делать это лучше ежедневно, регулярно, а не раз в неделю по десять часов подряд.
И наконец, развеем один большой миф. Некоторые ребята говорят, что верстать — это просто. Согласимся с этим утверждением, но только если речь о начальном уровне. Чем дальше, тем сложнее. Даже работая 10 лет специалисты могут сказать, что знают вёрстку неидеально. До сих пор, читая статьи и переводы, узнают что-то новое. Так что процесс обучения бесконечен.