За сколько можно научиться верстать сайты

20 лучших курсов Верстки на HTML/CSS 2023 года

В данной статье мы сравниваем 25 лучших онлайн-курсов по обучению верстке сайтов на HTML и CSS с нуля.

Верстка на HTML/CSS используется для создания и оформления веб-страниц. HTML (HyperText Markup Language) используется для структурирования содержимого страницы, определения заголовков, абзацев, списков, ссылок и других элементов. CSS (Cascading Style Sheets) позволяет задавать внешний вид элементов HTML, включая цвета, шрифты, размеры, расположение и различные стилизационные свойства.

Нетология Frontend-разработчик с нуля до middle — 130 отзывов (Лучший по отзывам)

Skillbox Веб-вёрстка — 108 отзывов (Самый популярный курс)

SkillFactory Специализация Frontend-разработчик — 108 отзывов

Специалист.ру HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3 — 35 отзывов

Irs.academy Онлайн-курс по frontend — 16 отзывов

LoftSchool Верстка — быстрый старт — 35 отзывов

GeekBrains Профессиональная верстка Создание адаптивной верстки на HTML 5 и CSS 3 — 271 отзывов

GeekBrains Факультет Frontend-разработчик — 271 отзывов

LoftSchool Основы вёрстки сайтов — 35 отзывов

Skillbox Профессия Frontend-разработчик — 108 отзывов

WayUp Веб-разработчик: код фрилансера — 26 отзывов

Irs.academy Онлайн-курс по HTML — 16 отзывов

Learn.JavaScript Курс по современной вёрстке — 9 отзывов

Хекслет Профессия Верстальщик — 16 отзывов

Eduson Academy Веб-разработчик — 106 отзывов

Хекслет Основы верстки контента— 16 отзывов

Бруноям Онлайн-курс Веб-разработчик с нуля — 30 отзывов

Skillbox Веб-разработчик с нуля до PRO — 108 отзывов

Хекслет Профессия Верстальщик — 16 отзывов

Stepik Веб-разработка для начинающих: HTML и CSS

Каталог-курсов.ру Онлайн-курс по HTML/CSS

Курсера Введение в HTML5

itProger Уроки HTML5

SkillFactory Карьерный гид Как стать frontend-разработчиком с нуля?

Образовательная платформа «Нетология» предоставляет обучение современным и востребованным профессиям в IT и digital-направлениях, таких как маркетинг, программирование, аналитика, бизнес и управление, дизайн и UX.

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

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

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

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

Верстка на HTML/CSS является неотъемлемой частью веб-разработки и имеет несколько важных целей:

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

Популярность верстки на HTML/CSS обусловлена несколькими факторами:

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

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

В целом, верстка на HTML/CSS является основой для создания красивых, функциональных и адаптивных веб-страниц, и её популярность обусловлена её доступностью, стандартизацией и гибкостью.

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

Начните с основ: Ознакомьтесь с основными понятиями HTML и CSS, такими как теги, элементы, селекторы, свойства и значения. Понимание основных концепций поможет вам строить более сложные структуры и стили.
Практика на примерах: Создавайте простые веб-страницы и экспериментируйте с различными тегами, свойствами и стилями. Практическое применение позволит вам лучше запомнить и понять принципы верстки.
Изучайте пошагово: Разделите изучение на этапы и изучайте их поочередно. Например, начните с изучения основ HTML (структура, теги, атрибуты) и затем перейдите к CSS (стилизация, селекторы, классы). Постепенное углубление поможет вам освоить каждую тему более тщательно.
Используйте онлайн-ресурсы: Существует множество бесплатных онлайн-ресурсов, таких как учебники, видеокурсы, интерактивные тренажеры и форумы, которые предлагают изучение HTML/CSS. Некоторые популярные платформы включают Codecademy, MDN Web Docs, W3Schools, FreeCodeCamp и CSS-Tricks.
Работайте с реальными проектами: Попробуйте создать свои собственные веб-страницы или участвуйте в открытых проектах, чтобы применить свои навыки и улучшить их. Решение реальных задач поможет вам лучше понять практическое применение верстки.

Изучение верстки на HTML/CSS — это непрерывный процесс, который требует практики и экспериментов. Не бойтесь задавать вопросы, и помните, что навыки верстки будут развиваться со временем и практикой.

Как начать зарабатывать на верстке сайтов? Сколько за это платят?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблица 1. Сколько платят за верстку на фрилансе

Примерная цена, руб.

Верстка страницы сайта (за 1 шт.)

От 1000 до 3000 руб.

Верстка сайта (небольшой типовой сайт содержит 3-5 типов страниц, которые нужно верстать)

От 5000 до 15000 руб.

Верстка простого лендинга (3-5 блоков на странице, невысокие требования заказчика)

От 1000 до 3000 руб.

Верстка сложного лендинга (10-15 блоков разной сложности)

От 3000 до 15000 руб.

Внедрить адаптивный дизайн (если текущий дизайн сайта не адаптивен)

От 3000 до 15000 руб.

Поправить верстку или исправить ошибку в верстке сайта (пример проблемы: убрать горизонтальную полосу прокрутки при открытии сайта на ПК)

От 300-500 руб. до 1000 руб.

Верстка одного блока на странице

От 300 до 500 руб.

Поправить или изменить шапку сайта (цена именно за верстку, услуги дизайна сюда не входят)

от 500 до 1500 руб.

Различные мелкие правки

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

Сколько зарабатывают на верстке сайтов в месяц? Многое зависит от опыта, портфолио и отзывов клиентов:

Верстальщик начального уровня может зарабатывать от 20-30 тыс. руб. в месяц.
Доходы специалистов среднего уровня – от 30-40 тыс. руб. в месяц.

Доходы серьезных специалистов могут превышать 100 тыс. руб. в месяц.

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

Ниже я расскажу, как добиться быстрых результатов и хороших заработков.

Как начать зарабатывать на верстке сайтов?

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

1. Освойте азы верстки

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

HTML.
CSS.
Java Script.

jQuery – это библиотека готовых скриптов, которая значительно ускорит вашу работу.

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

2. Углубите знания, полученные на бесплатных курсах, и получите опыт

Когда пройдете курс, постарайтесь углубить свои знания при помощи бесплатных уроков на YouTube. Хорошие подборки уроков также можно найти в Клубе фрилансеров (посмотрите подборки видео в группе – там есть уроки по верстке). Старайтесь смотреть не одиночные видео, а именно курсы и серии уроков – они дадут больше пользы.

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

3. Начните зарабатывать на верстке

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

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

Пример такого кворка. Формально в нем предлагают сверстать лендинг за 500 руб., но по факту в услугу входит очень небольшой объем работы. Если же клиент захочет заказать верстку лендинга с формами (а какие лендинги их не содержат?) и разными эффектами, то цена вырастет до 3500 руб.

4. Станьте подмастерьем

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

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

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

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

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

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

Где искать заказы на верстку?

Даю подборку полезных сайтов, где можно найти работу с разным уровнем бюджетов (от задач на 300-500 руб. до серьезных проектов):

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

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

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

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

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

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

Сколько займет времени обучение верстке

Обучение вёрстке
Всем привет! Примерно месяц назад решил заняться вэб программированием. Начал учить как положено.

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

Сколько zbrush займет времени?
Народ всем привет хочу узнать за какое время можно научиться создавать таких персов? И что еше.

Сколько веб займет времени?
Народ всем привет у меня вопрос сколько времени займет изучение html,css,js,php,mysql чтобы.

Думаю большой отрезок времени уйдёт на изучение javascript jqueru
html+css 2-3 недели упорных занятий.

Вот за 2-3 нед. что у меня получилось. Не обошлось и без помощи форумчан. Очень многим помогли.
Конечно не идеал сайта. Но содержит разные элементы скриптинга др. Так что практика желание и ещё раз практика

Сообщение от eiwiking

Думаю большой отрезок времени уйдёт на изучение javascript jqueru
html+css 2-3 недели упорных занятий.

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

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.

В данной статье представляю схему развития верстальщика

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

Хочу сразу добавить, что конкретных ссылок на учебные материалы в статье не будет. Буду рад дополнениям в комментариях.

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

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

Junior

HTML — знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика — умение отформатировать текст. Текст — основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика — понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа — какие виды медиа можно встраивать в страницу.
Iframe — встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео — можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки — какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр — jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG — можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты — можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка — опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1 — шрифты, цвета, выравнивание, размеры.
CSS 2.1 — управление поведением блоков, позиционирование, полноценное оформление.
Селекторы — простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа :hover.
Именование — как называть классы, чтобы не было мучительно больно.
Блочная вёрстка — разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры — можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика — можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы — какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий — я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git — понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket — уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull — базовые операции для личного использования.
Stash — для временного сохранения ненужных в данный момент данных.
10 работ — сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.

Middle

CSS 3 — градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы — элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации — опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки — зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS) — зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры — можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries — можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода — понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID — можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS — опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация — понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование — научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция — можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется 🙂
Постановка задач — можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox — понимание модели, умение применять полноценно.
Вёрстка писем — опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы — разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка — понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка — понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка — можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация — можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю.
Загрузка — можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка — можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO — можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы — разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP — можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS — можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую WordPress).
Javascript — можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery — можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS — можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка — опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE — опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching — научиться управлять ветками в git.
Merge — научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase — разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы — разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ — к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.

Senior

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

Заключение

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

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

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

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