Курсы вёрстки и дизайна полиграфических изданий

Оглавление

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

  1. Больше практики. Изучили новые теги – сразу попробуйте сверстать текст с ними. Это поможет вам освоить материал быстрее. Для верстки страниц не нужно скачивать специальные программы или редакторы. Достаточно сохранить страницу из браузера на компьютере и менять у нее код, просматривая, что вы получили после добавления новых тегов.
  2. Быстро выучить язык HTML и CSS самостоятельно помогают бесплатные онлайн-задачники. В них собраны различные задачи по верстке разного уровня сложности. Выполняйте практику и быстрее осваивайте новые теги. Примеры задачников: Практика на WebReference (позволяет решать задачи онлайн и сразу проверять результаты), Практикум на Htmlbook.
  3. Пройдите курсы. Под руководством опытных наставников быстрее и легче учиться. Есть, кому задать вопросы и получить помощь. Например, на курсе по веб-верстке в Skillbox вы освоите HTML, CSS, Flexbox, фреймворк Bootstrap, научитесь работать с Git и выполните дипломный проект.
  4. Не сдавайтесь, если что-то кажется вам сложным. Ищите информацию в разных источниках. Бывает, что на одном сайте что-то написано непонятно, а на другом – все ясно и просто.
  5. Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.

Что Вы готовы отдать за то, чтобы научитьсяверстать сайты и начать зарабатывать на этом деньги?

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

Естественно, Вы всегда можете попробовать разработать своё собственное решение, но зачем Вам тратить на это столько времени, денег и энергии, если Я могу сделать это за Вас?

Ведь, если бы Вы задумались, сколько я вложил в Видеокурс «Вёрстка сайта с нуля» Вы согласились бы заплатить более 10 000 рублей. Поэтому реальная цена в 2490 рублей делает покупку поистине выгодной!

Всего 2490 рублей за то, чтобы в течение нескольких недель научиться ПРОФЕССИОНАЛЬНО верстать сайты, и окупить эту цену, сверстав 1-2 страницы для заказчика, буквально, за 6-8 часов (а с опытом, Вы будете верстать даже сложные страницы за 1.5-2 часа).

Для разработчиков

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

1. Факультет веб-разработки – GeekBrains

Факультет веб-разработки – образовательная программа от выпускников МГТУ имени Баумана и GeekBrains (Mail.ru). Курс представлен в виде универсальной программы, которая включает в себя лекции, вебинары, домашние задания и консультации от экспертов или же преподавателей.

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

2. Веб-разработчик с нуля – Нетология

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

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

4. Профессия Веб-разработчик – SkillFactory

Профессия Веб-разработчик – обучающая программ по разработке и верстке сайтов с нуля, рассчитанная на 12 месяцев. Здесь вы получите навыки программирования на PHP и Javascript. Станете уверенным junior-специалистом.

5. Веб-Разработчик 2.0 – Udemy

Веб-Разработчик 2.0 – полный курс разработке сайтов с помощью HTML, CSS, Javascript, PHP, Python, MySQL. 307 лекций общей продолжительностью более 30 часов.

По окончанию обучения вы получите сертификат.

6. Профессиональная вёрстка сайтов – HTML Academy

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

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

Часть с базовыми знаниями – бесплатна. За расширенную информацию придется приобрести премиум-подписку.

В HTML Academy есть и интенсивы. В них обучение происходит в более продвинутом стиле: живое общение с преподавателями и лекции по интернету. Вместе с этим вы получаете еще и личного куратора. Он будет контролировать вас на протяжении всего обучения. Естественно, интенсивы – удовольствие не бесплатное. На момент написания статьи интенсив по HTML и CSS стоит 14 500 рублей.

7. Веб-Старт – Glo Академия

Веб-Старт – практический курс от Артема Исламова сейчас набирает все большую популярность. Вся движуха проходит в группе ВКонтакте, Дискорде и Телеграме.

Из названия вы могли понять, о чем именно этот курс. Да, верстка: HTML, CSS, JavaScript и немного PHP (в программе, где рассказывается про натяжку шаблонов на WordPress).

Команда Glo Академии состоит из большого числа разноплановых специалистов. Каждый из них хорош в своей области. Кто-то круто верстает на HTML/CSS, кто-то разбирается в WordPress и умеет рисовать и натягивать шаблоны. Всеми этими знаниями ребята с удовольствием делятся. Причем часть своих материалов они выкладывают прямо в группу – абсолютно бесплатно.

8. Онлайн-курс веб-программирования – Hedu

Онлайн-курс веб-программирования – за 4 месяца на простом языке вас научат создавать сайты самостоятельно. Курс состоит из 15 уроков длительностью более 32 часов.

9. Как создать сайт самостоятельно – TexTerra

Как создать сайт самостоятельно – простое обучение для начинающих. Расскажут про основы юзабилити, виды сайтов и особенности разработки. Научат HTML, CSS, Bootstrap и JQuery. Есть блок по работе с CMS WordPress и SEO. Состоит из 13 лекций.

11. Front-End – Академия IMT

Front-End – базовый курс по разработке сайтов и интерфейсов. Здесь авторы собрали всё: верстку, SEO, рекламу, семантическое ядро, технический аудит. Больше подходит для предпринимателей, которые самостоятельно хотят разобраться в создании и продвижении сайта для бизнеса.

Что делать дальше, освоив HTML и CSS?

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

Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.

Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.

  • Как и сколько можно заработать на верстке сайтов?
  • Как зарабатывают на создании сайтов в интернете?
  • Как стать JavaScript программистом?

Рекомендуем

Издательства для начинающих авторов

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

27 каналов в Телеграм с вакансиями фриланса и удаленной работы

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

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

Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 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 — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Требования к Слушателям:

Обратите внимание! Для поступления достаточно прислать скан-копии или фотографии документов, а также осуществить удаленное заключение договора. Копии документов должны быть чёткими, разборчивыми, легко читаемыми.Обучающимся от юридического лица необходимо отправить бумажные документы почтой до окончания обучения.. Граждане Российской Федерации предоставляют заявление о приёме на обучение и копии следующих документов:

Граждане Российской Федерации предоставляют заявление о приёме на обучение и копии следующих документов:

  • Паспорта.
  • Страхового номера индивидуального лицевого счёта (СНИЛС).
  • Диплома о высшем или среднем профессиональном образовании*.
  • При поступлении на основе неоконченного образования – справки об обучении из организации высшего или среднего профессионального образования, в которой обучается студент.
  • Документа, подтверждающего факт изменения фамилии, имени или отчества (если необходимо).

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

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

Подробнее о процессе поступления можно узнать здесь.

Я с лёгкостью положил КОНЕЦ своим мучениям с вёрсткойтеперь просто наслаждаюсь от того, насколько мне легковерстать даже самые сложные сайты. И я хочу показать Вам,что Вы тоже так можете!

Вам уже надоело то, что Вы знаете HTML и CSS (если даже не знаете, то читайте дальше и поймёте, как узнать), выучили уже множество тегов, но не знаете, как применить их для вёрстки даже простого сайта? Допустим, у Вас есть такой дизайн:

Вы представляете, как эту картинку перевести в код HTML+CSS? То есть, чтобы это было не картинкой, а чтобы был текст, ссылки, выпадающие меню и всё остальное. Если Вы прекрасно знаете, как и что Вы будете делать, чтобы превратить эту картинку в HTML-страницу, которая при этом будет кроссбраузерная и адаптированная под разные разрешения, а код при этом будет чистым, читабельным и валидным, то можете дальше не читать… Только думаю, что 99% из Вас не могут похвастаться такими знаниями.

Замучились справляться с тем, что Вы не знаете, как разбить страницу на блоки, какие свойства надо применить к нему, как сделать закруглённые углы, красивые текстовые поля, кнопки и прочее. Вы отчаялись добиваться того, чтобы картинка в Photoshop совпадала с тем, что Вы видите в браузере, отчаялись пытаться добиться одинаково хорошего отображения в разных браузерах (то есть кроссбраузерности), устали от того, что при разных разрешениях ломается вся вёрстка? В конце концов, Вы утомились от того, что даже, порой, не знаете, как приступить и с чего начать?

Ну тогда, то, что я сейчас Вам скажу, станет для Вас бальзамом на душу…

Я собираюсь показать Вам, как НАУЧИТЬСЯ верстать сайты любой сложности, при этом делать это с валидным и чистым кодом, кроссбраузерно и с адаптированием под разные разрешения экрана.

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

Меня зовут Михаил Русаков, и я Вам немного расскажу о своей бывшей проблеме.

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

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

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

Портал «beonmax.com»

Сайт: https://beonmax.comСтоимость: по запросу
«Курс HTML / CSS»

Интерактивный онлайн курс HTML и CSS программирования и верстки сайтов для начинающих. Обучение HTML с нуля.

В процессе обучения слушатель получит знания и навыки:

  • Основы HTML и CSS
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Работа в редакторе кода SublimeText
  • Практическое применение основных тегов HTML
  • CSS-верстка текста: цвет и размер шрифта
  • Позиционирование блоков на сайте
  • Работа с изображениями
  • Правильная HTML-разметка для SEO
  • Адаптивная верстка под мобильные устройства
  • Специальные классы для адаптивности
  • Полезные инструменты для frontend-разработчика

План курса:

  • Введение
  • Подготовка к работе. Установка редактора кода
  • Основы HTML и CSS. Базовая разметка, HTML-теги, CSS-стили
  • Создание сайта на практике. Главная страница – верхняя часть и меню
  • Создание сайта на практике. Главная страница – правый блок
  • Создание сайта на практике. Главная страница – нижняя часть
  • Создание сайта на практике. Главная страница – фильмы, сериалы, блог
  • Создание сайта на практике. Страница просмотра фильмов
  • Создание сайта. Страницы фильмов и рейтинг фильмов
  • Создание сайта. Адаптивная верстка

По завершении курса выдается сертификат.

SkillFactory

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

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

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

GeekBrains

Сайт:  https://geekbrains.ruСтоимость: от 7 490 р. в месяц
Факультет Веб-разработки

Программа обучения

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

  • 261 час обучающего контента
  • 525 часов практики
  • 2–3 вебинара в неделю

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

IV четверть.Разработка Highload-приложения
В четвертой четверти вы познакомитесь с высоконагруженными системами и сервис-ориентированной архитектурой. Узнаете, что такое денормализация данных и когда она нужна. Также изучите, как взаимодействуют компоненты веб-серверов. Получите навыки командной разработки совместного проекта и на практике познакомитесь с гибкими методологиями (Agile, Scrum, Kanban).

II годI четверть.MVP бизнес-проекта
В пятой четверти вы получите навыки работы с React — популярной JavaScript-библиотекой для создания пользовательских интерфейсов. Познакомитесь с различными уязвимостями и научитесь создавать безопасные приложения. В процессе работы над проектом в кросс-функциональной команде научитесь оценивать риски и сроки разработки.

II четверть.Выпускной проект
В шестой четверти вы продолжите разработку бизнес-проекта под руководством Product Manager’a, создадите веб-приложение и презентуете его команде экспертов. Также вы познакомитесь с серверными уязвимостями для создания надежных и высокопроизводительных решений. Подготовитесь к собеседованию и посетите День карьеры в Mail.ru Group.

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

Код HTML

Чтобы стать верстальщиком, вам потребуются следующие знания и навыки

  • язык разметки. HTML, HTML5, дополнительно желательно знать HTML-фреймворки: Twitter Bootstrap или Semantic UI;

  • CSS (каскадную таблицу стилей). При помощи нее задается стилистика страниц;

  • основы JavaScript, jQuery. При помощи них задается динамика;

  • основы PHP;

  • принципы работы визуальных редакторов;

  • инструменты проверки правильности, валидности кода.

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

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

Чеклист

Заскриньте, поделитесь в сториз, пусть все знают. Отмечайте @htmlacademy, нам будет приятно.

Как получать 100 тысяч за код

  1. Познакомиться с веб-разработкой и определиться с направлением.
  2. Постепенно доучивать более сложные вещи (здесь нужно завести Гитхаб).
  3. Пройти курсы по вёрстке и/или фронтенд-разработке
    (начиная с этого пункта можно искать работу).
  4. Найти наставника.
  5. Выучить популярный фреймворк и регулярно на нём писать.
  6. Пройти стажировку и научиться работать в команде.
  7. Уже точно найти работу и проработать там год.
  8. Разбираться в новом, писать об этом и выступать на митапах.
  9. Постоянно учиться.

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

На каких сайтах можно освоить HTML и CSS?

Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.

Адрес сайта

Описание сайта

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

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

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

На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.

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

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

Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.

Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.

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

Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.

Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.

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

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

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

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

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

Senior

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

Заключение

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

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

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

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