Что должен уметь верстальщик и как прокачать скиллы: инструкция для новичков

Никита Михайлов

---

Преподаватель в Hexlet, автор Telegram-канала LayoutCoder. В Twitter — @n__mikhaylov.

Стать верстальщиком можно меньше чем за год — но для этого придётся регулярно учиться, хотя бы полчаса в день. Расскажу, какие hard и soft skills нужно развивать и где брать информацию.

Кто такой верстальщик

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

Язык HTML позволяет из базовых элементов создать структуру сайта — разделять контент на блоки и добавлять туда такие элементы, как картинки, видео- или аудиофайлы. Ещё HTML помогает создавать интерактивные элементы — например, изменять цвет фона у кнопок при наведении.

Чтобы добавить визуала для сайта, используют язык CSS. Он стилизует сайт: изменяет шрифты, задаёт цвета всем элементам, группирует объекты и блоки между собой. CSS — это практически безграничные возможности по преображению сайта и воплощению идей дизайнера.

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

Hard skills верстальщика

Расстрою ленивых — одними HTML и CSS вы не обойдётесь. Полезных технологий и инструментов много, однако есть must have для любого верстальщика. Перечислю всё необходимое.

Основы дизайна. Верстальщик должен владеть базовыми концепциями UX/UI. Например, понимать, почему 12-й размер шрифта слишком маленький, а светло-серый цвет на белом фоне смотрится так себе. Для начала можно прочитать книгу Стива Круга про веб-юзабилити «Не заставляйте меня думать». Это бессмертная классика для всех, кто работает с вебом.

Препроцессоры. С препроцессорами вёрстка идёт удобнее и быстрее. Например, c Sass можно использовать переменные и функции в CSS, а с Pug — то же самое, только в HTML. Кроме того, с Pug можно создавать вложенные конструкции без скобок и даже взаимодействовать с JavaScript-кодом.

Pug не расширяет язык, но позволяет использовать фишки, которых нет в HTML, например циклы. Представим, что нужно вывести пять карточек товаров на статичном сайте. Способ в лоб: сверстать на HTML одну карточку, скопировать её пять раз и в каждой копии изменить данные. А если карточек не пять, а 100? В 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-разработку.

Читайте также:

React.js для новичков в программировании: что это такое, как он устроен и зачем нужен

Вот чем занимаются и что знают Senior-разработчики:

Как учиться новичку

Учебных материалов и ресурсов по вёрстке сейчас море. У меня есть несколько любимчиков, которых я рекомендую всем начинающим.

Книги. Тут советую быть осторожнее, потому что значительная часть книг про HTML и CSS — на английском языке. И пока их переведут, стандарты уже поменяются. Но есть хорошие книги — сборники рецептов. Например, «CSS для профи» Кита Гранта или «Секреты CSS. Идеальные решения ежедневных задач» Лии Веру. Лучше проверять примеры, потому что стандарты меняются часто и некоторые рецепты уже могут устареть.

Сайты. Есть прекрасный портал CSS-Tricks, на котором выкладывают сборники рецептов и примеры кода. Также можно посмотреть авторов на CodePen — там публикуют код и примеры вёрстки, решения задач, организовывают конкурсы по вёрстке.

На YouTube есть классный канал keyframers со стримами по анимации. Мы тоже проводим вебинары и публикуем видеоуроки у себя на канале. Некоторые из них веду я. Ещё советую сайт и подкаст Вадима Макеева и CSS-live с переводами актуальных статей.

Курсы. Основная ошибка новичков при самостоятельном обучении — идти за новым, пропуская базу. В результате они знают, что такое гриды, но не понимают, что такое потоки документов, как они друг на друга накладываются и как этот порядок изменить. Особенно сильно это мешает на практике, в коммерческой разработке.

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

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

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

Вырасти с нуля до уровня «могу сверстать лендинг» можно за месяц. Нужна лишь практика — и не только дома, но и в коммерческой разработке. Здорово, если после нескольких учебных проектов вы устроитесь на работу и будете набивать шишки в продакшне.

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

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