Путь верстальщика: с нуля до сеньора

Признаки и симптомы ↑

Востребованность профессии верстальщика сайтов

Растет зарплата, а значит растет и спрос (взято с сайта proprof.ru)

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

В интернете ежедневно появляются тысячи сайтов, их разработчики преследуют разные цели, но все они нуждаются в квалифицированных специалистах, способных создавать уникальные продукты. WEB-верстальщик – один из таких специалистов. Его услуги нужны на уникальных проектах, сайтах сервисов, при разработке лендингов под продажу товаров и услуг. Так что без работы вы точно не останетесь.

Кроме того, расширяя свои навыки вы сможете быстро перейти в высшую лигу Frontend-разработки, но это уже совсем другая история.

Главный редактор сайта (IT)

договорная

• Первый Бит

• Москва

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

Руководитель it-проектов (интерфейсы, мобильные приложения, сайты)

договорная

• CreativePeople

• Москва

Курская

… и прогнозировать эффективность проекта. Будет зачислено как плюс: опыт работы в качестве руководителя проектов по разработке сайтов, мобильных приложений, онлайн-сервисов; опыт ведения проектов по agile/ kanban/ xp; опыт удаленного взаимодействия с …

Средний чек за работу

Зарплата офисного работника в Москве колеблется от 30 до 100 тысяч рублей в месяц. Она зависит от вашего опыта и квалификации, а также специфики и масштабности нанимателя. В регионах зарплата чуть ниже: 20-90 тысяч рублей по состоянию на весну 2018 года.

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

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

Типичное задание с типичной ценой для верстальщика уровня Middle на fl.ru

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

Минимальная стоимость работы уровня Senior на fl.ru

На фрилансе вы столкнетесь с еще одним неприятным типом людей – клиентами, которые стремятся навесить на новичка дорогостоящие задачи за малые деньги. Мне не раз приходилось вести переговоры о работе уровня Middle за 3 тысячи.

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

Как проверить? Вы можете создать подобный проект на fl.ru и посмотреть, какие цены предлагают, составьте вилку цен и определите среднюю стоимость.

Карьерные перспективы

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

Middle самостоятельно работает над проектами средней сложности. Он может собственноручно, без указок со стороны, сверстать сайт так, чтобы тот корректно отображался в большинстве браузеров. Middle умеет использовать шаблонизаторы, документировать свою работу, может взаимодействовать с командой. Но плох тот «миддл», который не мечтает стать «сеньором».

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

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

Процесс написания кода для сайта в CSS: базовый код, задающий расположение блоков на странице

Плюсы и минусы профессии верстальщика: почему стоит осваивать верстку

• быстрое освоение: при должном рвении, верстальщиком можно стать через 2 месяца, а через полгода занять должность Junior-Frontend-разработчика;
• возможность самостоятельного обучения;
• необходимость постоянного развития. Разработка – сфера изменений, она всегда динамична, чтобы оставаться в тренде, нужно будет развиваться на постоянной основе;
• нечеткие границы между профессиями верстальщика, веб-дизайнера, Frontend-разработчика. Это одновременно и минус, но если смотреть с положительной точки зрения, то для вас открываются возможность занять смежную дисциплину, например, дизайнера-верстальщика или Frontend-разработчика с более широкими возможностями для карьерного роста;
• возможность удаленной занятости.

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

Карьерные перспективы: куда расти

Взято с сайта geniusmarketing

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

Итак, пути развития:

1. Сначала по классике: из верстальщика во Frontend-разработчики

Здесь распространены два пути:

Но еще есть не очень заметная третья тропинка по центру – начать с программирования, а потом перейти во фреймворки. Незаметная она, потому что она длинная, но от этого не самая плохая, а наоборот очень крутая. Если пойдете по ней, будете точно знать, как все работает. Подобным путем выстраивается обучение на курсах по верстке. Лучше идти именно таким путем, потому что в этом случае вы сможете доказать работодателю свою компетентность в любом вопросе: будь они связаны с фреймворком или Frontend-разработкой в целом.

2. Дизайнер-верстальщик

Это специалист, который совмещает верстку и дизайн, этакий многорукий Шива. Идти в это направление актуально, если вы планируете работать на себя. Если вы освоите две дисциплины, вам не придется искать дополнительного специалиста, который будет делать дизайн или верстать сайт.

Такая практика распространена на западе, в частности в США. А на просторах СНГ в вакансиях дизайнера часто пишут «со знанием верстки», снова дань тому самому – «всего да побольше, да подешевле».

3. Баннермейкер

Это тоже своего рода дизайнер, но он владеет дополнительными навыками, например, JS. Главный плюс – широкий простор для реализации творческого потенциала

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

Актуальность верстальщиков на рынке фриланса

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

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

Пришлось много учиться, я освоила и Photoshop, и копирайтинг, и верстку, и seo-продвижение. Постепенно стало понятно, что в копирайтинге у меня получается продуктивнее всего. Но все остальные умения дают мне преимущества, когда заказчику нужно сделать проект “под ключ”.

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки

Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки

Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

История профессии

По большому счету профессия верстальщика в современном понимании появилась с развитием книгопечатания в XV–XVI веках, когда для создания книги нужно было выполнить большой объем утомительной ручной работы, чтобы скомпоновать издание, расположив на его страницах текст и картинки. Верстальщик (тогда это был наборщик) работал в типографиях, он изготовлял макет, сводил текст в страницы, сочетал его с иллюстрациями, добавлял колонтитулы.

С развитием компьютерной техники и Интернета издательское дело претерпело революционные изменения. Многие полиграфические мощности уже закрылись, газеты и журналы массово перебираются во Всемирную сеть или как минимум имеют параллельную онлайн-версию. По этой причине профессия трансформировалась, и сейчас в основном работодателям нужен HTML-верстальщик. Современная информационная индустрия требует создания огромного количества многостраничных сайтов, поэтому спрос на таких IT-сотрудников очень велик.

Верстальщик DOC, PDF

договорная

• TR Publish

• Москва

В бюро переводов на крупный и срочный проект (около 1000стр верстки) требуются верстальщики для верстки переводов. Обязанности: разверстка под перевод и верстка (подготовка макетов) готовых переводов инструкций к бытовой технике. Требования: корректно …

Дизайнер-верстальщик (полиграфия)

договорная

• АС КАМИ

• Москва

Электрозаводская

… , CorelDraw, PhotoShop, Illustrator; Грамотный письменный русский, внимательность к деталям; Опыт создания web-дизайна сайтов, лендингов, интерфейсов, мобильных приложений, html 5 как преимущество. Ссылка на портфолио (наличие ОБЯЗАТЕЛЬНО) Обязанности …

Обязанности

Общепринятой должностной инструкции для дизайнера верстальщика нет. Перечень обязанностей определяется руководством при принятии на работу. Для каждой задачи требования к функциям специалиста корректируются.

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

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

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

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

Что должен знать и уметь верстальщик

• язык разметки. HTML, HTML5, дополнительно желательно знать HTML-фреймворки: Twitter Bootstrap или Semantic UI;
• CSS (каскадную таблицу стилей). При помощи нее задается стилистика страниц;
• основы JavaScript, jQuery. При помощи них задается динамика;
• основы PHP;
• принципы работы визуальных редакторов;
• инструменты проверки правильности, валидности кода.

Важно: нельзя путать понятие верстальщика и Frontend-разработчика. Часто в вакансиях на должность верстальщика «светятся» требования, которые нельзя относить к этой должности

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

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

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

Что еще нужно для работы веб-верстальщиком

Вам нужно знать некоторые из них, но в перспективе – это все ваше.

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

Писать код можно и в Notepad, но это неудобно. Для верстальщиков и программистов придуманы специальные программы: редакторы кода. Вот некоторые из них: Visual Studio Code, Sublime Text, Atom, Vim и другие. Установите что-то из перечисленного, это упростит и ускорит вашу работу.

Также must have для начинающего верстальщика – Photoshop, Figma или Avacode – для разбора дизайн-макета на части.

Идеальная вакансия

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует canvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и WordPress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скипты, Autoprefixer, Gulp или Webpaсk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Верстальщический вундерлист

Кроссбраузерная оптимизированная вёрсткаSVGSass CanvasPUGGitНатянуть вёрстку на CMSBootstrapjQueryнечто, npm-скрипты, Autoprefixer, Gulp, Webpack

А портфолио откуда брать?

• Найти бесплатных макетов и наверстать.
• Придумать самому, если есть Дизайнерская Жилка.
• Пройти полноценную подготовку к работе и получить пару проектов в портфолио. 

Что об этом всём думают ребята из индустрии?

Катя Иванова, перевела бабушку на ReactПо опыту: нужно точно, быстро и адаптивно. 
Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах. 
Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер 😀
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

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

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

upd
Много сообщений о том, что верстальщик без знания фреймворка не нужен. В основном это пишут разработчики в крупных проектах. И, для них, это вполне так. Но есть ещё много студий делающих лендинги, различные шаблоны для вордпресов и других CMS. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.