Первые шаги на фрилансе для верстальщика: что добавить в портфолио и резюме

Верстка сайтов — одна из самых доступных профессий для входа во фриланс. Но именно здесь новички массово сталкиваются с «эффектом пустого стола»: навыки есть, код пишется, а заказы не приходят. Дело не в том, что вы плохо верстаете. Причина в другом: ваше портфолио и резюме не показывают готовность решать коммерческие задачи. Клиенту нужен не учебный код, а работающий инструмент для бизнеса.

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

Почему верстальщики теряют заказы: разрыв между навыком и продажей

Главное заблуждение, которое я регулярно вижу у начинающих: «клиент покупает качественный код». На самом деле клиент покупает работающий сайт. Ему важно, чтобы страница продавала товар, собирала заявки или информировала посетителей. Если в портфолио сплошь учебные проекты «сверстал макет из Figma», заказчик не видит в вас партнёра, который понимает бизнес-результат.

Конкуренция среди верстальщиков на российских биржах (Kwork, FL.ru, Habr Freelance) огромна. Заказчики получают десятки откликов на один проект. Чтобы выделиться, нужно демонстрировать не процесс вёрстки, а конкретную пользу: ускорение загрузки, адаптивность, SEO-подготовку, интеграцию в CMS. Вы продаёте не умение писать div и flex, а решение бизнес-задачи. Если вы этого не показываете — заказ уходит другому.

Типовые ошибки, которые убивают шансы на заказ

• Портфолио без реальной пользы. Только «верстка по макету» из онлайн-курсов. Заказчику непонятно, как этот сайт поведёт себя на телефоне, насколько быстро загрузится и можно ли будет его продвигать в поиске.
• Резюме-биография. «Я учился в университете, люблю код, хочу работать». Это лирика, а не продающее предложение. Клиенту нужна конкретика: «верстаю адаптивные сайты с SEO-оптимизацией и интеграцией в WordPress».
• Отсутствие живых ссылок. Репозиторий на GitHub с кусками кода — это прекрасно для коллег, но заказчик хочет нажать на ссылку и сразу увидеть результат. Скриншоты не заменяют работающий сайт.
• Непонимание интента. Новички часто не уточняют, что именно нужно клиенту: просто адаптивная вёрстка, интеграция в CMS, правки существующего сайта или полный цикл от макета до запуска. Без этого вы рискуете либо переделать лишнее, либо не доделать нужное.
• Слишком сложные описания. Термины вроде «рендеринг», «парсинг», «микросервисы» без объяснения, как это поможет клиенту, только отпугивают. На старте фриланса важнее говорить на языке результата.

Из практики: На первых порах я сам терял заказы, потому что отправлял клиентам ссылку на GitHub и считал, что этого достаточно. Когда я начал прикладывать живые ссылки на хостинг и коротко описывать, какую задачу решает проект, количество откликов выросло в разы.

Что должно быть в портфолио верстальщика: 5 обязательных проектов

Портфолио — это лицо верстальщика. Оно отвечает на единственный вопрос заказчика: «Может ли этот человек сделать сайт, который будет работать у меня?». Для старта не нужно 20 кейсов. Достаточно пяти качественных и разных по типу проектов, которые закрывают основные потребности клиентов. Я сам собирал стартовое портфолио именно так, и эта структура до сих пор работает.

1. Одностраничный сайт (Лендинг) для продажи товара или услуги

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

• Что показать:
  • Полную адаптивность от смартфона до широкого монитора.
  • Быструю загрузку (оптимизация изображений, минификация CSS/JS).
  • Работающие формы обратной связи с валидацией и отправкой данных в Telegram или на почту.
  • Чётко выделенные кнопки целевого действия (CTA).
• Что добавить в описание: «Верстка лендинга для магазина кроссовок. Время загрузки — 0.8 сек. Адаптив под все устройства. Форма заявки отправляет данные в Telegram».
• Ссылка на работающий сайт обязательна — никаких скриншотов.

Чек-лист для проверки:

• Сайт корректно открывается на iPhone и Android.
• Формы реально отправляют данные.
• Кнопки «Купить» и «Заказать» заметны и удобны для нажатия.
• При загрузке страницы элементы не прыгают и не сдвигаются.

2. Многостраничный сайт (Блог или Компания) с CMS

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

• Что показать:
  • Верстку шаблонов под WordPress, Tilda или ручную интеграцию.
  • Продуманную структуру меню и навигации.
  • Адаптивные таблицы, списки, карточки товаров/услуг.
  • SEO-оптимизацию: заголовки H1-H6, мета-теги, атрибуты alt у изображений.
• Что добавить в описание: «Верстка сайта компании с интеграцией в WordPress. 5 страниц, каталог услуг, блог. Установлены SEO-плагины, прописаны мета-теги».
• Ссылка на сайт плюс (опционально) скриншот панели администратора CMS.

Чек-лист для проверки:

• Меню работает на мобильных устройствах — выпадающее или адаптивное.
• Каждая страница имеет уникальный заголовок H1.
• Все изображения содержат осмысленный alt.
• При быстром скролле страницы не ломаются.

3. Адаптивный интернет-магазин (Каталог товаров)

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

• Что показать:
  • Карточки товаров с фото, ценами и кнопками «Купить».
  • Визуальную часть фильтров и сортировки.
  • Корзину с динамическим пересчётом суммы.
  • Адаптивность всех элементов: таблиц, карточек, фильтров.
• Что добавить в описание: «Верстка каталога для интернет-магазина электроники. 20+ карточек товаров, фильтры, корзина. Адаптив под все устройства. Оптимизация под SEO».
• Ссылка на сайт.

Чек-лист для проверки:

• Карточки товаров не разваливаются на мобильных экранах.
• Фильтры работают и обновляют список товаров визуально.
• Цена в корзине пересчитывается при изменении количества.
• Отсутствует горизонтальная прокрутка на смартфонах.

4. Сайт-портфолио для другого специалиста (Дизайнер, Фотограф)

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

• Что показать:
  • Галереи изображений (слайдеры, сетки) с ленивой загрузкой (lazy loading).
  • Секции «Обо мне», «Отзывы», «Контакты».
  • Лёгкий, не перегруженный дизайн.
  • Корректное отображение на всех устройствах.
• Что добавить в описание: «Верстка портфолио для фотографа. Слайдер с 50 фото, секция отзывов, форма заказа. Lazy loading для галерей. Дизайн в стиле минимализм».
• Ссылка на сайт.

Чек-лист для проверки:

• Галереи загружаются быстро, без заметных задержек.
• Слайдер работает на тач-экранах.
• Отзывы читаемы и не сливаются с фоном.
• Форма заказа отправляет данные клиенту.

5. Технический кейс: Оптимизация и исправление «битого» сайта

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

• Что показать:
  • Сравнение «было» и «стало» — скриншоты или метрики.
  • Улучшение скорости загрузки (желательно до 1 сек).
  • Исправление ошибок валидации HTML/CSS, устранение SEO-проблем.
  • Адаптация под мобильные устройства, если её не было.
• Что добавить в описание: «Оптимизация сайта магазина: время загрузки снижено с 4 сек до 0.7 сек. Исправлены 15 SEO-ошибок, прописаны мета-теги, добавлена адаптивность».
• Ссылка на сайт + метрики (например, скриншот Google PageSpeed Insights).

Чек-лист для проверки:

• Показатели скорости объективно улучшены.
• Ошибки валидации устранены.
• Сайт корректно отображается на мобильных.
• SEO-проблемы (дубли заголовков, отсутствие alt) решены.

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

Как оформить резюме верстальщика: структура, которая продаёт

Резюме на фрилансе — это не анкета для HR. Это ваше коммерческое предложение. Заказчик сканирует его за 20–30 секунд. Если за это время он не видит, какую именно задачу вы решите, отклик летит в корзину. Я перепробовал разные форматы, и вот структура, которая стабильно приносит заказы на российских биржах.

1. Главный заголовок (H1)

Не пишите абстрактное «Верстальщик». Сформулируйте сразу, что вы делаете и для кого.

• Плохо: «Верстальщик, ищу работу».
• Хорошо: «Верстаю быстрые и адаптивные сайты для лендингов, магазинов и компаний. Интеграция в WordPress/Tilda».
• Идеально (с цифрами): «Верстаю сайты, которые загружаются за 0.8 сек. Адаптив под все устройства. Интеграция в CMS. Опыт 2 года».

Цифры и конкретика добавляют вес даже начинающему специалисту.

2. Введение (Лид-абзац)

Здесь вы отвечаете на вопрос заказчика «Что я получу?».

Пример из практики:
«Я верстаю сайты, которые работают быстро и красиво на любых устройствах. Моя задача — не просто написать код, а сделать сайт, который будет продавать ваши товары или собирать заявки. Я знаю, как оптимизировать код под SEO, как адаптировать макет под мобильные телефоны и как интегрировать вёрстку в CMS. Если вам нужен сайт, который не «ломается» и загружается мгновенно — я готов помочь».

3. Список навыков (Skills)

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

• Верстка: HTML5, CSS3 (Flexbox, Grid), JavaScript (ES6), адаптивность.
• Оптимизация: SEO-подготовка (мета-теги, alt, заголовки), PageSpeed, lazy loading.
• CMS: WordPress, Tilda, ручная интеграция.
• Дополнительно: Figma (работа с макетами), Git, PageSpeed Insights.

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

4. Опыт работы (без «воды»)

Пишите не «учился», а «сделал». Покажите результат в формате мини-кейсов.

• Плохо: «Работал в студии, верстал сайты».
• Хорошо: «Верстал 15 лендингов для малого бизнеса. Оптимизировал сайты под SEO, снизил время загрузки до 1 сек. Интегрировал вёрстку в WordPress».
• Идеально (с кейсами):
  

  Кейс 1: Лендинг для магазина кроссовок
  Задача: Быстрый запуск рекламы.
  Решение: Верстка адаптивного лендинга, интеграция формы в Telegram.
  Результат: Загрузка 0.8 сек, 15 заявок в неделю.

  Кейс 2: Сайт компании с каталогом
  Задача: Каталог товаров и блог.
  Решение: Верстка под WordPress, SEO-оптимизация.
  Результат: 5 страниц, каталог, блог, 0 ошибок валидации.

Подобная структура сразу формирует у клиента доверие — он видит, что вы не просто «можете», а уже делали похожие задачи.

5. Портфолио (ссылки)

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

Мои проекты:
1. Лендинг для магазина кроссовок — адаптив, форма в Telegram.
2. Сайт компании с каталогом — WordPress, SEO.
3. Портфолио фотографа — галерея, слайдер.

Убедитесь, что все ссылки кликабельны и ведут на реально существующие страницы.

6. Призыв к действию (CTA)

Не обрывайте резюме на списке проектов. Добавьте призыв: что клиент должен сделать дальше.

«Если у вас есть макет и нужно быстро запустить сайт — напишите мне в чат. Обсудим задачу, оценю сроки и стоимость. Первый шаг — бесплатный разбор вашего макета».

Фраза «бесплатный разбор макета» снижает порог входа и показывает уверенность в своих силах.

Чек-лист: что проверить перед отправкой отклика на заказ

Перед тем как нажать «отправить», пройдитесь по этому чек-листу. Пропуск даже одного пункта может стоить вам заказа. Я пользуюсь им до сих пор, когда откликаюсь на новые проекты.

Из практики: Однажды я отправил отклик, не проверив форму на лендинге из портфолио — там была ошибка валидации. Клиент это заметил, и диалог закончился. С тех пор я всегда проверяю всё по чек-листу, прежде чем откликнуться.

Как выбрать первый заказ: стратегия входа на фриланс

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

Какие заказы подходят новичку

1. Верстка по макету (простой лендинг). Базовая задача, где не нужно решать сложные бизнес-проблемы. Ищите запросы вроде «верстка лендинга по макету из Figma». Это идеальный старт.
2. Адаптация существующего сайта. Вы не делаете работу с нуля, а только адаптируете чужой код под мобильные устройства. Хороший способ показать экспертность без титанических усилий.
3. Оптимизация скорости. Узкая задача с измеримым результатом. Вы можете гарантировать клиенту конкретные цифры в PageSpeed — это сильно повышает доверие.
4. Маленькие правки. Быстрый способ получить первый отзыв. Исправление кнопки, формы, отступа — работы на час, а положительный отклик останется в профиле.

Какие заказы НЕ подходят новичку

• Сложные интернет-магазины с интеграцией. Требуют глубоких знаний backend, работы с API, платёжными системами. Риск завалить сроки и получить негативный отзыв очень высок.
• Сайты с уникальным дизайном и анимацией. Предполагают продвинутый JavaScript, CSS-анимации, возможно, WebGL. Если у вас такого опыта нет, не беритесь — потеряете время и репутацию.
• Заказы «с нуля» без макета. Когда клиент не может внятно объяснить, что хочет, вы становитесь и дизайнером, и аналитиком. Для новичка это прямой путь к перепискам на недели и размытым ожиданиям.

Как писать отклик: формула успеха

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

Пример отклика:
«Здравствуйте! Вижу, что вам нужно сверстать лендинг для магазина кроссовок по макету из Figma.

Я верстаю адаптивные сайты, которые загружаются за 0.8 сек. Делаю полную адаптацию под мобильные устройства, прописываю SEO-теги и интегрирую формы обратной связи.

Вот пример похожего проекта: [ссылка на лендинг].

Если нужно быстро запустить сайт, напишите — обсудим сроки и стоимость. Первый шаг — бесплатный разбор макета».

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

Типовые ошибки верстальщиков на фрилансе и как их избежать

Даже с хорошим портфолио можно провалить первые заказы, если не учесть несколько рабочих нюансов. Вот ошибки, которые я регулярно вижу у новичков, и простые способы их обойти.

1. Ошибка: «Я сделаю всё, но не знаю сроков»

Новички часто соглашаются на проект, не оценив реальные временные затраты. В итоге дедлайны срываются, клиент недоволен.

Как избежать: Всегда раскладывай задачу на этапы: верстка десктопа, адаптив, тестирование, правки. К каждому этапу прибавляй 20% времени на форс-мажоры. В отклике сразу указывай: «Срок выполнения — 3 рабочих дня при условии готового макета».

2. Ошибка: «Я не знаю, как работать с клиентом»

Неопытные верстальщики либо задают слишком мало вопросов, либо, наоборот, боятся уточнять детали. Это приводит к недопониманию и переделкам.

Как избежать: В начале работы всегда фиксируй: что нужно сделать, по какому макету, какие дедлайны, формат сдачи. Периодически отправляй промежуточные отчёты: «Сделал десктопную версию, вот скриншот», «Адаптив готов, вот ссылка на тестовый домен». Так клиент чувствует контроль.

3. Ошибка: «Я не умею решать проблемы»

Когда в процессе вёрстки что-то идёт не так (неожиданное поведение браузера, конфликт скриптов), новичок может запаниковать и бросить задачу.

Как избежать: Научитесь гуглить проблему на английском, заглядывать на Stack Overflow, читать документацию. Если решение требует дополнительного времени, предупредите клиента: «Нашёл способ исправить баг, это займёт 2 часа, будет стоить X рублей». Клиенты ценят честность и проактивность.

4. Ошибка: «Я не знаю, как оценивать работу»

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

Как избежать: Прежде чем назначать цену, посмотрите, сколько стоят похожие проекты на бирже. Определите свою минимальную стоимость часа и умножайте на реальное время. Лендинг с адаптивом и формой обратной связи не может стоить 1000 рублей, если рынок оценивает его в 5000–7000. Уважайте свой труд — это сразу считывается заказчиком.

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

1. Сколько нужно проектов в портфолио, чтобы начать работать?
   Достаточно 5 качественных и разнотипных работ, которые закрывают основные запросы клиентов: лендинг, сайт компании, интернет-магазин, портфолио, оптимизация. Гнаться за количеством не нужно — лучше довести до идеала пять кейсов.
2. Нужно ли иметь диплом, чтобы работать на фрилансе?
   Нет. На российских биржах дипломы практически не спрашивают. Решающее значение имеют портфолио, резюме и отзывы. Если у вас есть сильные проекты, вы конкурентоспособны без всяких корочек.
3. Где искать заказы на фриланс для верстальщика?
   Основные площадки: Kwork (удобна для новичков, формат кворков), FL.ru (классическая биржа с большим потоком), Habr Freelance (более технические и дорогие заказы). Также не стоит игнорировать Telegram-каналы с вакансиями для верстальщиков.
4. Сколько стоит верстка лендинга для новичка?
   Диапазон для первого опыта — от 3000 до 7000 рублей за простой лендинг. Если проект сложнее (интеграция в CMS, дополнительные страницы), цена может достигать 10 000–20 000 рублей. Главное — не демпинговать до уровня, когда работа становится убыточной по времени.
5. Как получить первый отзыв на фрилансе?
   Начните с небольшого заказа за адекватную цену. Сделайте работу качественно и вовремя, а после завершения вежливо попросите клиента оставить отзыв на бирже. Первый положительный отзыв открывает путь к дальнейшим заказам.
6. Нужно ли знать JavaScript, чтобы работать верстальщиком?
   Для простой вёрстки HTML/CSS JS не критичен. Но для интерактивных элементов, анимаций и сложной логики JavaScript необходим. Я рекомендую стартовать с чистым HTML/CSS, а затем постепенно осваивать JS — это расширит круг доступных проектов и повысит чек.
7. Что делать, если клиент не даёт макет?
   Не начинайте работу. Твёрдо запросите макет или чёткое техническое задание. Если макета нет, предложите услугу его создания за отдельную плату. Работа без макета для новичка — верный путь к конфликтам и переделкам.
8. Как избежать пересмотра (переделки) работы?
   Сразу в отклике или при обсуждении пропишите границы: «Я делаю X, Y, Z. Дополнительные правки, выходящие за рамки первоначального ТЗ, оплачиваются отдельно». Не делайте «лишнюю» работу без согласования.
9. Нужно ли платить за членство в биржах?
   На Kwork и FL.ru базовые функции бесплатны. На некоторых, например Habr Freelance, есть платные подписки для доступа к заказам. Новичку лучше начинать с бесплатных площадок, чтобы не нести расходы до первого заработка.
10. Как защитить свои права, если клиент не платит?
    Всегда работайте через гарантийные счета биржи (безопасная сделка). Не соглашайтесь на полную предоплату мимо биржи без договора. Если клиент отказывается платить, обращайтесь в поддержку платформы — это работает.

Заключение: ваш путь от любителя к профессионалу

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

В этой статье мы разобрали конкретную дорожную карту, которая прошла проверку на реальных проектах:

1. Собрать портфолио из 5 разных по типу проектов с живыми ссылками.
2. Оформить резюме как коммерческое предложение с цифрами, кейсами и призывом к действию.
3. Начинать с посильных заказов, не пытаясь сразу взять сложный магазин.
4. Писать отклики по формуле «приветствие — понимание — решение — пример — CTA».
5. Проверять каждый отклик по чек-листу перед отправкой.

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

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

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