Работа верстальщиком

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

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

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

Как научиться верстать сайты с нуля и быстро?

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

Есть два сайта, где можно пройти подобные курсы. Это Skillbox и курс по фронтенд-разработке в Нетологии (включает обучение верстке и еще кое-чему полезному). Курсы ускорят освоение профессии и помогут приобрести не только знания и опыт, но и первых заказчиков (из числа преподавателей курса, одногруппников или компаний, сотрудничающих с университетами).

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

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

Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

• SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
• Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
• БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
• Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
• PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
• Git — система контроля версий, чтобы не делать . Мы в Академии любим Git и написали про него много статей.
• Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
• Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
• jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
• Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Что такое верстка сайта и для чего она нужна?

Верстка – это создание разметки страниц сайта на основе макета дизайнера.

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

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

Чем отличается программирование от верстки сайта?

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

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

Как же стать верстальщиком

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

Чтобы стать верстальщиком, можно закончить такие онлайн-курсы:

1. “Профессия Frontend-разработчик PRO” от Skillbox. Длительность обучения – 2 года. Формат: вебинары, видеоуроки с домашними заданиями. По окончании курса гарантировано трудоустройство. Стоимость обучения ежемесячно составляет 2925 рублей (первые полгода бесплатно).

2. “Веб-разработчик” от ЯндексПрактикум. Обучение рассчитано на 10 месяцев. За 10 месяцев обучения в среднем по 15 часов в неделю вы освоите востребованные навыки веб-разработчика и соберёте портфолио проектов. Ежемесячно за обучение необходимо платить 12000 рублей или 100000 рублей разовым платежом.

3. “Веб-верстальщик: начало” от WayUP. Обучение рассчитано на 2 недели. В курс входит 7 занятий по основам профессии, которые будут проверять проверенные наставники. В конце обучения вы получите сертификат, который может положительно сказаться при приеме на работу. Обучение на данном портале совершенно бесплатно, за исключением нескольких курсов.Многие верстальщики начинают с малого, а потом дорастают до уровня веб-мастеров, когда они сочетают в себе трех технических специалистов (дизайнер, верстальщик и программист). В общем, работа верстальщиком – это ступень, с которой вы можете стартовать в различные направления Digital. Главное начать, дорога строится под ногами идущего, так что вперед. Я уверен, что у вас получится!

Многие верстальщики начинают с малого, а потом дорастают до уровня веб-мастеров, когда они сочетают в себе трех технических специалистов (дизайнер, верстальщик и программист). В общем, работа верстальщиком – это ступень, с которой вы можете стартовать в различные направления Digital. Главное начать, дорога строится под ногами идущего, так что вперед. Я уверен, что у вас получится!

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

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

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

Сколько зарабатывают специалисты

Судя по статистике зарплат на russia.trud.com, средний заработок верстальщика сайтов по России составляет 32 726 рублей.

Пройдемся по доске объявлений hh.ru:

• На момент написания статьи на сайте было 715 доступных вакансий по заданной профессии.
• На удаленную работу в новосибирское агентство требуется верстальщик с окладом 20-25 тысяч рублей в месяц.
• В питерской компании обещают платить 40-60 тысяч.
• Должность Junior верстальщик в Краснодар — от 30 тысяч рублей.
• Средняя зарплата по Москве — 50-100 тысяч рублей. Встречаются оклады до 120 тысяч.

Посмотрим, как обстоят дела с фриланс-услугами.

Заходим на биржу Kwork в раздел «Верстка по макету» и видим, что цены за один проект стартуют от 500 рублей (за самую простую базовую верстку) и доходят до 20 тысяч рублей за верстку сложного сайта с адаптивностью под мобильные телефоны.

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

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

В среднем опытный специалист может зарабатывать от 40-50 тыс. рублей до 60-80 тыс. рублей в месяц. Зарплата на уровне 80 тыс. руб. и выше считается в этой профессии высокой, хотя например, frontend и backend-программисты могут зарабатывать намного больше.

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

Также зарплата зависит от опыта. Если он небольшой, в региональной веб-студии верстальщику могут предложить и 20, и 25 тыс. рублей на старте. Однако плюс ИТ в том, что по мере накопления опыта зарплата быстро растет. Например, верстальщик с опытом от 1 года уже не пойдет на зарплату ниже 40-50 тыс. руб.

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

Существует множество правил, которых следует придерживаться во время верстки. Нарушение некоторых из них может привести к плохой оптимизации сайта.

Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
Весь написанный код должен быть чистым и легко читаемым.
Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
Сайт должен работать одинаково во всех браузерах.
Используйте заголовки H1-H6, а также знайте, что H1 – единственный заголовок на одной странице

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

Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.

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

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

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

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

Этапы верстки

Сверстка состоит из следующих главных этапов:

Оценка.

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

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

Нарезка изображений.

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

Создание каркаса сайта в виде блоков.

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

1. Наполнение контейнеров изображениями.
2. Наделение веб-ресурса кроссбраузерными функциями.

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

Исправление ошибок и отладка.

Самый важный, ответственный этап. Если в конечном итоге получится сильно «забагованный» продукт – вся работа может пойти насмарку. Лучший сервис по проверке валидации разметки html – https://validator.w3.org/.

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

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

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

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

Виды верстки

На сегодняшний день существуют два основных вида сверстки:

Блочная.

Блочная верстка является более современным способом, чем табличная, так как при создании одностраничника не надо применять лишнюю поддержку в виде дополнительных столбцов, строк. Главный тег для образования содержания сайта — <div>.

Он помогает задать точное расположение и размер всех элементов.

Наряду с блочной версткой идет CSS. Благодаря CSS верстальщики меняют границы элементов, размеры, цвет, расположение, разные свойства блоков <div>.

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

Поисковые браузерные системы лучше узнают блочную сверстку. Ранжирование веб-ресурса из-за этого идет гораздо лучше.

Табличная.

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

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

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

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

Плюсы табличного способа:

1. Простота создания веб-ресурса. Даже самый начинающий программист справится с задачей создания интернет-страницы при помощи табличной верстки.
2. Этот способ идеально подходит для резиновой верстки. То есть, при растягивании окна веб-браузера таблица меняет свое положение в пространстве вместе с ним. Элементы, которые содержатся в ней, меняют свою позицию автоматически.

Как зарабатывать на верстке сайтов больше денег?

Есть несколько советов, которые помогут вам поднять уровень заработка на верстке сайтов:

1. Старайтесь всех клиентов превращать в постоянных заказчиков. Работать со знакомыми проектами быстрее и проще. Вы сможете закрывать больше задач в единицу времени и зарабатывать больше.
2. Дружите с веб-дизайнерами и веб-программистами. Создавайте вокруг себя команду специалистов. Например, к вам обратился заказчик, которому нужен редизайн. Если вы занимаетесь только версткой, то будете вынуждены отказать, ведь нарисовать дизайн сайта вы не можете. Но если у вас есть знакомый дизайнер, то вы возьметесь за работу. Коллега нарисует дизайн, а вы его сверстаете, и оба заработаете.
3. Не изобретайте велосипед. Есть множество готовых скриптов и библиотек, которые могут ускорить процесс верстки. Иногда более опытный верстальщик просит за работу меньше новичка, т.к. он знает, как сделать такую верстку быстрее. Естественно, он побеждает в конкурентной борьбе.
4. Автоматизируйте все, что можно, если это не снижает качество работы.

5. Используйте фреймворки и CSS-препроцессоры.

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

Рекомендуем

Удаленная работа в Тинькофф: какие вакансии предлагает компания?

О работе в Тинькофф есть разная информация в интернете. Кому-то она нравится, кому-то нет. Мы постарались собрать объективные данные о …

Как устроиться на работу в Яндекс и успешно пройти собеседования?

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

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

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует 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.

Как проверить верстку

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

Более обширную информацию можно получить на сервисах Jigsaw.W3 и Validator.W3.

Если требуется узнать, соответствует ли верстка макету пиксель в пиксель, то для этого подойдет сервис WellDoneCode.

Сервис Page Ruler нужен как линейка, чтобы в пикселях измерить сверстанные блоки и прочие элементы страниц.

Window Resizer – расширение для Google Chrome, позволяющее узнать, насколько хорошо страница адаптирована под разные устройства.

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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