Верстальщик на фрилансе: какие навыки нужны и где взять первые заказы

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

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

Что делает верстальщик

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

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

• Вёрстка по макету. Лендинги, многостраничные сайты, отдельные страницы и блоки.
• Адаптив. Перестройка страницы под мобильные устройства и планшеты.
• Правки и доработки. Исправление «поехавшей» вёрстки, добавление новых блоков на существующий сайт.
• Вёрстка писем. HTML-письма для рассылок — отдельная ниша со своими ограничениями почтовых клиентов.

Какие навыки нужны для старта

Минимальный набор для первых заказов скромнее, чем кажется по вакансиям в студиях. Но то, что входит в базу, нужно знать уверенно — заказчик сразу видит небрежную вёрстку, даже если не умеет читать код.

1. 1HTML. Семантическая разметка: заголовки по иерархии, списки, формы, кнопки, правильные теги для навигации и разделов.
2. 2CSS. Блочная модель, позиционирование, Flexbox и Grid, медиазапросы, переменные, работа со шрифтами и изображениями.
3. 3Адаптивная вёрстка. Подход mobile-first или desktop-first, тянущиеся блоки, проверка на разных ширинах экрана.
4. 4Работа с Figma. Умение снять размеры, отступы, цвета и шрифты, экспортировать иконки и картинки, понять логику компонентов.
5. 5Базовый JavaScript. Бургер-меню, слайдер, модальное окно, табы — типовые интерактивные элементы лендинга.
6. 6Git. Хранение кода в репозитории, понятная история изменений, передача проекта заказчику.

Сверху полезно добавить препроцессор (например, SCSS), методологию именования классов вроде БЭМ и умение оптимизировать изображения. Эти навыки не обязательны для первого заказа, но заметно повышают качество и скорость работы.

Какие заказы бывают на рынке

Заказы на вёрстку сильно различаются по объёму и требованиям. Новичку полезно понимать, с какими задачами он справится сразу, а к каким стоит подойти позже.

Самый удобный старт — лендинг по готовому макету. Задача ограничена одной страницей, требования видны в Figma, результат легко показать в портфолио. Правки готовых сайтов тоже частый заказ, но там приходится разбираться в чужом коде, и это требует аккуратности.

Отдельное направление — вёрстка на конструкторах и в CMS. Часть заказчиков хочет страницу, которую потом сможет редактировать сам. Здесь к знанию HTML и CSS добавляется понимание конкретной платформы и её ограничений.

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

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

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

• Живая ссылка. Выложите каждую работу на бесплатный хостинг статических страниц, чтобы её можно было открыть в браузере.
• Код в репозитории. Ссылка на GitHub или аналог показывает аккуратность разметки и структуры.
• Пара строк о задаче. Что было в макете, какие элементы сделали интерактивными, на каких экранах проверяли.

План выхода на фриланс по шагам

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

Если вы начинаете с нуля, выбирайте обучение с большим количеством практики на реальных макетах, а не только теорию. Главное правило для верстальщика: каждую тему закрепляйте практикой на реальном макете, а не только учебными задачками.

Как оценивать работу и называть цену

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

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

Что влияет на трудоёмкость

• Количество уникальных блоков и сложность сетки.
• Есть ли в макете мобильная и планшетная версии или их придётся додумывать.
• Интерактив: слайдеры, анимации, модальные окна, формы с проверкой.
• Требования к поддержке браузеров и скорости загрузки.
• Нужна ли интеграция с CMS или конструктором.

Отсутствие мобильной версии в макете — одна из самых частых причин споров при сдаче. Решение простое: обсудить это до старта и записать договорённость. Как закрепить объём работ письменно, рассказывает материал про договор фрилансера с заказчиком.

Где искать первые заказы

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

• Биржи и платформы. Много небольших задач на вёрстку и правки — хорошо для первых отзывов.
• Дизайнеры-фрилансеры. Партнёрство даёт регулярный поток макетов без поиска заказчиков.
• Небольшие студии. Часто отдают вёрстку на аутсорс в периоды загрузки.
• Знакомые с бизнесом. Правки и доработка существующих сайтов, адаптив старых страниц.

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

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

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

С какими трудностями сталкиваются в первых проектах

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

• Неполный макет. Нет состояний кнопок при наведении, сообщений об ошибках в формах, вида блоков с длинным текстом. Уточняйте это у заказчика до старта, а не в момент сдачи.
• Шрифты и лицензии. Шрифт из макета может быть платным или недоступным для веба. Спросите, кто отвечает за лицензию, и предложите близкую бесплатную замену, если её нет.
• Тяжёлые изображения. Картинки, экспортированные из макета без сжатия, замедляют загрузку страницы. Сразу готовьте их в современных форматах и нужных размерах.
• Чужой код. При правках существующего сайта изменения в одном месте ломают другое. Перед работой сохраните исходную версию, чтобы можно было откатиться.

Каждая такая ситуация — повод дополнить свой список вопросов к заказчику. Через несколько проектов он превратится в короткий бриф, который вы будете отправлять до начала работы, и сроки станут предсказуемыми — и для вас, и для клиента.

Как сдавать вёрстку без лишних правок

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

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

Со временем у хорошего верстальщика появляются постоянные партнёры — дизайнеры и студии, которые возвращаются с новыми макетами. Именно такие связи, а не разовые заказы с бирж, делают доход на вёрстке стабильным.

Частые вопросы

Можно ли стать верстальщиком на фрилансе с нуля?

Да, вёрстка — один из понятных входов в веб: результат проверяется по макету, а портфолио можно собрать на открытых шаблонах из Figma без коммерческих заказов.

Нужен ли верстальщику JavaScript?

Базовый — да: для бургер-меню, слайдеров, модальных окон и табов. Глубокое знание фреймворков на старте не обязательно.

Что положить в портфолио верстальщика?

3–5 свёрстанных макетов разной сложности с живыми ссылками на демо и кодом в репозитории, плюс пару строк о том, что было сделано в каждой работе.

Какие заказы на вёрстку брать первыми?

Небольшие лендинги по готовому макету и адаптив существующих страниц: объём понятен, а результат хорошо смотрится в портфолио.

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

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