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

Сколько зарабатывают верстальщики в Интернете

Сумма дохода зависит от квалификации, возможностей заказчика и сложности задачи. Далее рассмотрим, сколько можно заработать на верстке сайтов представителям разного уровня: (в месяц):

• Начальный со знанием HTML: 20-30 тысяч рублей;
• Средний с владением CSS: 30-40 тысяч рублей;
• Высокий (почти frontend-разработчик): 100 тысяч рублей.

Часто IT-специалисты рассматривают верстку как первый этап обучения Веб-программированию и поначалу не придают особого значения доходам. Далее они глубоко изучают JavaScript, PHP и SVG, чтобы расширять границы компетенций и получать больше денег.

Для общего понимания приведем примерные расценки за отдельные услуги верстки:

• Одна страница сайта или лендинг: от 1 000 до 3 000 руб.;
• Небольшой сайт (3-5 страниц) или сложный лендинг: 5-15 000 руб.;
• Создание адаптивного дизайна: 3-15 000 руб.;
• Корректировка верстки: до 1 000 руб.

Верстка на фрилансе: лучше или нет

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

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

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

9

3

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

Вёрстка сайтов является одним из наиболее прибыльных видев заработка через интернет. Этому есть несколько причин. Первая — для вёрстки навыком необходимо обладать множеством специфичных знаний, в владеть языком разметки HTML, таблицами стилей CSS, а в некоторых случаях потребуется и язык программирования JavaScript (на особенно сложных и прибыльных заказах). Помимо этого нелишним будет умение работать в популярных конструкторах сайтов, ведь далеко не всегда вёрстку нужно производить с нуля, если можно воспользоваться готовым решением.

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

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

Фриланс: верстка сайтов через биржу или самостоятельный поиск заказчиков?

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

Работа на фриланс биржах, в том числе и вёрстка, для новичков является наиболее простым способом заработка через интернет. Лишь набрав достаточное количество опыта и «набив шишки» можно попробовать работать с заказчиками напрямую.

Как устроен процесс верстки и что в нее входит?

• Вы получаете макет от дизайнера или заказчика. Открываете его в программе Photoshop. Условно макет можно назвать картинкой. Но на самом деле там множество слоев, в которых нужно разобраться.
• Достаете из макета логотипы, фотографии, иконки и прочие элементы, которые потребуется загружать на страницы будущего сайта.
• Создаете код, который содержит специальные команды для браузера, где разместить логотип, меню, текст, формы, слайдеры и другие элементы на странице.
• Отдельно создаются файлы CSS, в которых содержатся команды, описывающие оформление элементов на странице. Например, какого цвета и размера будут заголовки, подзаголовки и основной текст на странице.
• Об особенностях и тонкостях поиска работы

  Готовые файлы с версткой отправляете заказчику на проверку.

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

Как стать профи?

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

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

1. Прекрасно развитая зрительная память.
2. Грамотность в технических программах и аккуратность в написании кода;
3. Усидчивость и организованность.

Не менее важно знание специальных программ CSS, HTML и JavaScript и так далее. Дополнительно может потребоваться знание фотошопа и иных графических редакторов

Где искать работу в интернете верстальщику?

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

Размер комиссии напрямую зависит от выбранной биржи, но обычно он составляет не менее 5-10% от стоимости заказа.

Биржи для заработка на вёрстке сайтов:

1. Weblancer – популярная русскоязычная биржа, позволяющая зарабатывать не только на вёрстке, но и на иной деятельности.
2. Free-Lance.ru – один из крупнейших сайтов, отличается огромным количеством заказов и достаточно низкой оплатой, из-за чего опытные верстальщики обходят его стороной.
3. Воркзилла — популярный сервис удаленной работы с адекватными расценками.
4. Кворк – интересная площадка, на которой размещают заказы любой сложности и стоимости.
5. Upwork – англоязычная биржа, работая на которой можно получать очень солидный доход. Требует хорошего знания английского языка. О других 107 биржах удаленной работы читайте здесь.

Интересные статьи:

• M1shop ru товарная партнерка: обзор офферов и перспектив заработка
• Работа верстальщиком удаленно без опыта: 10 фриланс-бирж в сфере IT
• Как заработать на ставках на спорт с минимальным риском: 6 инструментов
• Можно ли заработать в тик ток: секреты раскрутки и монетизации аккаунта
• Интернет маркетолог вакансии удаленно: 13 сайтов, которые помогут найти работу

Статья подготовлена редакцией сайта. Познакомьтесь с авторами блога

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

100% полезный контент и никакого спама!

Где искать работу?

На просторах Интернета существует не одна фриланс биржа для верстальщиков – их и стоит посетить прежде всего

Потому отдельным вниманием стоит выделить такие биржи:

• freelance.youdo.com;
• freelancehunt.com;
• freelance.ru;
• fl.ru;
• Кворк;
• Воркзилла;
• pchel.net
• попытать удачи можно и на 24freelance.net;
• freelansim.ru.
• Положительно зарекомендовали себя Allfreelancers.su;
• Weblancer.com.

Еще 107 бирж фрилансеров.

Все они помогут найти работу по душе.

Рекомендую посмотреть видео по теме:

Рекомендуемые статьи:

• Как заработать на ставках на спорт с минимальным риском: 6 инструментов
• Можно ли заработать в тик ток: секреты раскрутки и монетизации аккаунта
• Интернет маркетолог: 13 сайтов, которые помогут найти вакансии
• Лучшие конструкторы сайтов бесплатно: 13 сервисов
• Франшиза для маленького города с минимальным вложением: 10 прибыльных идей

Статья подготовлена редакцией сайта. Познакомьтесь с авторами блога

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

100% полезный контент и никакого спама!

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

В настоящее время существует большое количество компьютерных программ, которые упрощают труд верстальщика: различные текстовые редакторы и IDE с подсветкой кода и автодополнением (Visual Studio Code, WebStorm), CSS фреймворки (наборы фрагментов верстки и кода для ускоренной разработки макета сайта — Bootstrap, Foundation и т. п.).

Также существуют визуальные редакторы, например, Adobe Dreamweaver. С их помощью можно делать веб-сайты без написания кода, в графическом режиме, то есть пользователь располагает визуальные блоки, а код генерируется автоматически. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать языки HTML и CSS без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.

HTML-верстальщик должен знать каскадные таблицы стилей – CSS, владеть на базовом уровне JavaScript, а также основными графическими редакторами: Photoshop, Sketch, InVIsion, Figma, на уровне, достаточном для нарезки макета. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Notepad c минимальным количеством средств и инструментов.

Успешная работа HTML-верстальщика строится на трех китах:

• качественный код;
• принцип юзабилити;
• адаптивный дизайн.

Качественный код должен быть хорошо структурирован и иметь правильное семантическое оформление в соответствии с правилами SEO-оптимизации.

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

Адаптивный дизайн сделает сайт дружелюбным к мобильным устройствам.

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

Какими программами должен владеть удаленный верстальщик?

Главные требования со стороны работодателя к специалисту следующие:

• • • Знание базовой, а также табличной верстки текста с программами HTML, CSS.
    • Обязательная работа на уровне уверенного пользователя с JavaScript, jQuery, использование AJAX, как и знание азов фотошопа в разделе резки макета.
    • Уметь уверенно верстать веб-страницы как валидно, так и кроссбраузерно.
    • Знать хорошо технический английский.
    • Также неплохо иметь опыт взаимодействия с проверочными плагинами для всестороннего тестирования проделанной работы верстки и создание шаблона с последующим применением для CMS (например, Joomla, 1С-Битрикс, или же UMI).

Где учиться и какие знания потребуются для работы?

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

Посмотрите видео в тему:

Необходимые навыки и качества

Специалист по верстке должен обладать следующими навыками:

• язык разметки HTML;
• знание PHP, MySQL;
• знание Adobe Illustrator, CorelDraw;
• оптимизация под поисковые системы;
• умение работать с CMS и ее API;
• знание основы AJAX, jQuery, JavaScript;
• семантическая верстка, умение располагать фрагменты кода на странице, правильное заполнение  SEO-тегов title, description,
• знание Firefox-плагинов CSS-процессоров.

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

• высокая концентрация внимания;
• пунктуальность;
• целеустремленность;
• ответственность;
• инициативность;
• умение работать в команде;
• терпение (нередко приходится править проект до 10 раз);
• усидчивость;
• умение строго выполнять поставленную задачу;
• заинтересованность в конечном результате;
• стремление к саморазвитию;
• исполнительность;
• оперативность в работе;
• коммуникабельность.

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

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

ТОП-10 курсов по продвижению в Инстаграм – самая лучшая подборка для начинающих и продвинутых

Сейчас социальная сеть Instagram – не просто платформа для выставления…

Кроме того, верстальщику важно уметь правильно вести переговоры с клиентами. Не все наниматели знают язык программирования или даже основы сайтостроения

Поэтому нужно уметь объяснить заказчику понятным языком, что в итоге получится у вас с проектом, и понять всего его требования.

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

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

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

Где искать работу и заказчиков

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

Разовых заказчиков можно искать на биржах фриланса и удаленной работы:

• weblancer.net (раздел верстки — weblancer.net/jobs/html-verstka-32). Здесь можно подавать заявки к имеющимся заказам.
• kwork.ru. Это магазин услуг, где вы можете создать свое предложение, описав подробно, что входит в вашу услугу и сколько она стоит.
• upwork.com. Что-то вроде зарубежного аналога предыдущего ресурса.
• fl.ru. В разделе «Работа» можно настроить фильтр под заказы с версткой и выбирать понравившиеся предложения.

Устроиться в компанию можно через любой сайт с вакансиями:

• superjob.ru.
• hh.ru.
• avito.ru.
• rabota.yandex.ru.
• trud.com.
• zarplata.ru.
• rabota.ru.

Вакансии

Стипендия12 000 рублей.

Обучение по плану. Учебные задачи по поддержке и развитию сайтов.

Практикант

Производственная практика или написание диплома.

Без оплаты, но с последующей продажей результатов вашей практики клиентам Cetera.

Контент-менеджеры

Оклад12 000 рублей

Публикация материалов на сайты.

Оклад17 000 рублей

Публикация материалов на сайты. Работа с любыми внешними сервисами.

Веб-программисты

Cetera предлагает лучшую в отрасли систему обучения, стажерскую программу и самый стремительный рост окладов для начинающих программистов. Переаттестация между грейдами возможна с любой скоростью, а рост зарплаты не зависит от субъективных факторов. Для программистов с опытом Cetera предлагает участие в разработке Cetera CMS и заработок на продаже готовых модулей клиентам компании.

Стажерская программа

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

Верстальщики

Ставка верстальщика приравнивается к окладу младшего программиста. Для получения ставки верстальщика достаточно дважды сдать компетенцию «Адаптивная верстка сайта. Больше 2 страниц.» Однако, из грейда верстальщика нельзя получить грейд младшего программиста без сдачи всех остальных компетенций на грейд младшего программиста.

Специалисты по продвижению

• Стандартная стажировка
• Ассистент специалиста по продвижению (без специалиализации SEO/PPC)
• Младший специалист по продвижению (без специализации)
• Специалист по продвижению (со специализацией)
• Старший специалист по продвижению (руководитель отдела)

Менеджеры по продажам

Стипендия12 000 рублей

Обучение продажам на быстро-растущем рынке IT-услуг и интернет-продвижения.

Менеджер по продажам

Доход60 000 рублей

Самостоятельные продажи (работа с заявками, предложения, презентации, согласование договоров).
 

Доход100 000 рублей

Самостоятельные продажи. Обучение ассистентов и менеджеров.
 

Менеджеры проектов

Ассистент менеджера

Оклад35 000 рублей

Техническая помощь менеджерам проектов и менеджерам по продажам. Составление отчётов, предложений.

Доход60 000 рублей

Обслуживание клиентов. Поддержание и развитие отношений с клиентами.
 

Менеджеры по маркетингу

Менеджер по маркетингу

Оклад30 000 рублей

Работа с партнерами.
Разработка рекламных компаний, PR-акций, и мероприятий, направленных на формирование и поддержание имиджа фирмы. 

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

Часто у экспертов информационного ресурса «СтопРазвод» спрашивают, с чего начать верстку сайта. На первом этапе изучите язык HTML для построения структуры сайта. Для этого достаточно выучить тэги.

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

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

Прохождение курсов

Для углубления знаний пройдите онлайн-обучение на образовательном портале «Нетология» или посмотрите бесплатные уроки на Youtube.

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

Отработка практических навыков

Перед тем как заработать на HTML и CSS, поверстайте одностраничные страницы сайтов на базе бесплатных шаблонов в Интернете. Постоянно ищите разные макеты, чтобы лучше подготовиться к реальным условиям. Не стесняйтесь предлагать свои услуги товарищам или начинающим энтузиастам. Так Вы «набьете руку» и получите навыки работы с разными тематиками.

Как найти работу верстальщиком

Лучший вариант для начинающих — фриланс верстка. Для поиска заказов информационный ресурс СтопРазвод советует следующие площадки:

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

Тип ресурса

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

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

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

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

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

Лендинг создается в первую очередь для продажи какого-то одного товара. Чаще всего это какая-то новинка или редкое изобретение.
Лендинг представляет собой ресурс, состоящий из одной страницы, на котором изложена вся информация о продающемся товаре и есть форма заказа. Такая функциональность достаточна для одностраничника.
Заказать верстку будет не очень сложно, так как главной его особенностью являются изображения и грамотно составленные тексты, чем обычно занимаются профессионалы этой области.

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

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

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

Кто такой верстальщик и чем он отличается от программиста

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

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

Если бы не было верстки, все сайты были бы кривыми и одинаковыми.

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

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

Тем не менее спрос на чистых верстальщиков по-прежнему есть.

Рассмотрим, какими навыками должен обладать верстальщик:

• HTML.
• CSS.
• Основы языка программирования JavaScript.
• Adobe Photoshop, Figma.

Это база, без которой войти в профессию нельзя. Остальное будет зависеть от работодателей и проектов, в которых придется участвовать. Среди прочих обязанностей иногда указывают:

• Понимание принципов UI/UX.
• Опыт работы с GIT.
• Знание Adobe Illustrator.
• Опыт кроссбраузерной верстки, адаптивности под мобильные устройства.
• Понимание основных трендов в веб-дизайне и др.

Senior

Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.Адаптивная / Отзывчивая вёрстка — разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).Постепенная деградация / Прогрессивное улучшение — понять, что это и зачем. Использовать.Gitflow — уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).БЭМ — опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.100 работ — иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.

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

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует 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 (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

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

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