Сколько можно заработать на верстке сайтов? Знания, поиск заказов и примерная прибыль.

Верстка макетов сайтов – это один из самых простых способов присоединиться к IT сообществу. Данное ремесло изучает любой программист, который планирует стартовать в веб разработке. Если изучить вакансии на того же Javascript или Php разработчика, то в основные требования входят также и навыки по верстке страниц сайтов.

Что представляет собой верстка веб страницы?

Если говорить простыми словами, то верстка веб страниц – это создание html каркаса (семантической разметки) и css стилей (отвечают за внешнее оформление блоков). Семантическая разметка включает теги, которые помогают поисковому роботу разобрать структуру страницы, например теги: header, nav, body, footer, article и другие. Стили же, за счет привязки к классам и id указанным в html разметке позволяют задать оформление для блоков: отступы, цветовую гамму, размеры блока и текста, фон, вид ссылок и прочее.

Для создания интерактивных элементов на сайте: плавная прокрутки, меню бургер для мобильных устройств, слайдера, всплывающих форм связи и другого вам нужно будет освоить азы javascript.

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

Как начать?

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

• html;
• css;
• javascript.

По срокам изучения html – около месяца, css – 1 – 1,5 месяца, основы javascript 2,5 – 4 месяца. Основное правило – это закреплять изученный материал с помощью выполнения практических задач.

Что еще вам нужно будет знать, чтобы заниматься версткой?

• Кроме базы вам нужны будут фреймворки, например bootstrap, а также различные подходы к верстке flex, grid и другие.
• Препроцессоры html, шаблонизаторы по типу pug.
• Уметь пользоваться редакторами кода (IDE), по типу Visual Studio Code, Sublime Text и прочее.
• Навыки работы с фотошоп, так как зачастую макеты присылают в .psd формате. Потребуется умение выбрать и вырезать нужный слой, определить цвет, шрифт, тени, пользоваться линейками и объединением слоев. Также, часто дизайнеры работают в Figma, суть там похожа все те же слои и прочее.
• Навыки установки, настройки и использования сборщиков по типу gulp, webpack.
• Система контроля версий Git.
• Умение подключать типографику (шрифты), оптимизировать картинки для веб приложений и прочее.
• Изучить технологию адаптивной верстки сайта, а также подходов по созданию отдельных мобильных версий макета. Мобильная верстка сайтов сейчас очень актуальна, поскольку рост мобильной аудитории в интернете увеличивается с каждым годом, и на этом делают акцент и сами поисковые системы.

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

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

Чтобы выделиться среди конкурентов вам стоит изучить оптимизацию верстки, чтобы ваши работы получали высокие оценки в том же google page speed, что сейчас очень цениться многими заказчиками.

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

Как происходит процесс верстки при работе на фрилансе?

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

• Получение заказа.
• Обсуждение ТЗ, уточнения всех деталей.
• Получение предоплаты (обычно 15% – 25%).
• Макет вы получаете в формате psd (Photoshop), либо же в фигма (Figma). Поэтому навык работы с этими инструментами обязателен.
• Приступаете к верстке. Создание html макета, css стилей и написание скриптов на javascript.
• Создание адаптивной (мобильной) версии верстки страницы.
• Тестирование в различных браузерах: Chrome, Mozilla, Safari, Opera и других. Вопрос касательно совместимости нужно решать еще на этапе согласования, уточняя у клиента, какие версии браузеров должны поддерживаться. Для многих крупных компаний – это критически важный вопрос, и при указании в перечне старых браузеров вам нужно будет либо подключать отдельные стили под них, либо не использовать много современных технологий, которые предоставляет нам css.
• Сборка проекта.
• Передача проекта для клиента.

Уделите этапу тестирования особое внимание, это поможет избежать многих вопросов от клиента в будущем и сократит время на сдачу проекта, а для фрилансера время – это деньги.

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

Портфолио – как путь к успеху

Чтобы продать свои услуги на фрилансе или же устроиться на работу, на должность верстальщика, вам понадобиться портфолио. Сделать это начинающему верстальщику достаточно просто. Можно найти в интернете бесплатные макеты сайтов (проверив их лицензию) и сверстать их, после чего выложить на своем хостинге. Работы стоит сразу делать адаптивными и стараться использовать различные скрипты, css эффекты, чтобы разнообразить портфолио.

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

В портфолио можно включить: лендинги, страницы интернет магазинов, сайтов-визиток, e-mail писем и прочее.

Где искать заказы?

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

• Биржи фриланса. Вполне вариант для новичка, но нужно пробовать покупать платные аккаунты, чтобы иметь возможность брать те самые заказы.
• Собственный сайт или социальные сети.
• Канал на YouTube.
• Сайты по поиску работы.
• Сотрудничество с дизайнерами.
• Телеграм каналы по поиску специалистов.

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

Сколько можно заработать на верстке?

Заработок на верстке зависит от многих параметров, например сложности макета и отдельных блоков, объема работы, требуемых показателей по качеству (Pixel Perfect), сроков выполнения работы, уровня исполнителя и прочих. Можно привести средний показатель по рынку, чтобы вы могли сориентироваться по стоимости верстки.

• Верстка страницы сайта (1 шт.) – $15 — $45.
• Верстка сайта визитки (бизнес сайта) на 3 – 7 страниц – $70 — $150.
• Ленинга (3 – 6 блоков) – $15 — $45.
• Ленинга (10 – 15 блоков) – $45 — $100.
• Внедрения адаптивного дизайна для уже сверстанного макета – $20 — $80.
• Мелкие правки по верстке – $4 – $8.

 Дополнительно вы можете предлагать услуги по верстке контента на страницах, например для СМИ или информационных сайтов.

Если устроиться в студию на работу, то уровень заработной платы составит $260 – $500, в зависимости от загруженности и вашей специализации.

Выводы. Заработать на верстке реально, к тому же многие верстальщики через 1 – 1,5 года переходят в программирование (Front end), и спрос на таких специалистов остается стабильно высоким. Работа на самом деле интересная, но в то же время сложная, требует концентрации внимания и режима по выполнению задач на потоке, поэтому не все могут с ней справиться.