верстальщик сайтов это кто и чем занимается
Кто такой верстальщик сайтов и как верстке научиться с нуля?
Давно я не писал об актуальных профессиях в сфере удаленной работы. После того, как приехал в Гоа, писать о чем-то прагматичном, оказывается непросто. Но я справился. Нашел жилье, обзавелся хорошим интернетом и начал вести рабочие проекты. На этой волне расскажу о том, кто такой верстальщик сайтов, чем он занимается, сколько зарабатывает и где этому можно научиться.
Кто такой верстальщик и что он делает?
Верстальщик (он же «верстак») — это специалист, делающий верстку сайтов. Он переводит сделанный веб-дизайнером макет из PSD (или другого графического формата) в язык разметки html. Если проще: внешний вид любого сайта, который отображает браузер, разрабатывает верстальщик.
Это технический специалист, для которого важны:
В процессе создания сайтов верстальщик играет одну из главенствующих ролей. ИБо благодаря его труду сайт должен открываться и выглядеть красиво на любом устройстве: от утюга до широкоформатного retina-дисплея. И если Вы на каком-то сайте видите перекошенные блоки, это на 95% вина криворукого верстальщика.
идеальное рабочее пространство
Что должен уметь верстальщик?
Помимо обладания типично программерскими качествами, ему необходимо владеть следующими технологиями:
Огромным плюсом будет умение вести разработку на jquery или другом популярном javascript-фреймворке. Это приближает нашего верстака к ложе «фронт-энд программистов» и делает его труд более высокооплачиваемым.
В современных условиях верстку с нуля заказывают самые олд-скульные заказчики. Это долго, дорого и нервно. Поэтому, чаще специалисты по верстке используют какие-нибудь популярные фреймворки типа Bootstrap. Грубо говоря: это когда вместо одной ручной отвертки Вам дают набор электроинструментов, которые можно подключать к сети. С такими наборами вести проекты намного проще и надежней.
Поэтому, если Вы сталкиваетесь с заказчиком, которому нужна верстка с нуля — можете смело удваивать свои ценники.
Как стать верстальщиком с нуля?
Научиться этому не сложно.
Я, как специалист в разработке сайтов, сделал бы такую пошаговую систему:
Каждый следующий уровень подразумевает владение предыдущим. «Перепрыгнуть» здесь не удасться. И стать фронт-энд-программистом без знания html — невозможно.
Ясно, что «уровней посвящения» у верстальщиков может быть много. Нередко дизайнер и верстальщик — один и тот же человек. И это большое преимущество! Как для специалиста, ибо приносит больше денег и меньше разочарования в результате просмотра своего сайта; так и для заказчика, ибо не нужно искать дополнительных людей и перетирать с ними массу технических деталей.
Мы в zenconvert делаем все сами: и дизайн, и верстку и перенос сайта на CMS WordPress. Используем для верстки полуавтоматизированные сервисы, поэтому результаты можем предоставлять достаточно быстро. Да и я сам не очень люблю в кодах и кишках сайтов. Мне больше нравится проектировать. А всю техническую работу я либо автоматизирую, либо делегирую.
И скажу, что хорошие верстальщики, как и любые другие специалисты ценятся на вес золота!
Где пройти обучение на верстальщика?
Вариантов в XXI веке масса. И лучшие из них — в интернете. Поэтому, неважно где Вы живете: в Гоа, Кустанае или Нижнем Тагиле. Был бы интернет.
Рекомендую начать с отличного бесплатного курса, который хорошо подойдет новичкам для освоения с нуля.
Курс дает хорошую базу, если Вы хотите обучаться с нуля.
Если они Вам придутся по душе, смело берите у Михаила платные продукты. В них темы верстки сайтов раскрываются значительно глубже.
Сколько зарабатывают верстальщики?
Само собой, многое зависит от уровня специалиста, его умения себя продать и сложности заказа. На начальном этапе в небольшой студии это может быть около 25 тыс руб. Вообще, веб-студии любят экономить, поэтому нередко урезают оклады специалистов до минимума. А вот работой заваливают по самые уши. Например, требуют делать верстку pixel-perfect. То есть, чтобы макет html совпадал с дизайном до пикселя (в пределах 5%). А меж тем, уже само наличие такого требования влечет увеличение бюджета на 20-30%.
Если проект срочный, тоже можно просить прибавку от 30%.
Хорошее подспорье для путешествий нон-стопом, не так ли?
Платежеспособных заказчиков Вам и интересных заказов!
Верстальщик — кто он и чем занимается?
Верстальщик – это специалист, который кодит страницы web-сайтов, разбивает текст на отдельные страницы, компонует его с иллюстрациями. Он умеет создавать HTML-шаблоны для веб-сайтов и писать HTML-код, знает, как графически оформить страницу и правильно расположить на ней элемент, и знаком со стилями
Люди, которые делают вид, что что-то да понимают
Суть его деятельности
Верстка – это описание программным кодом визуальной части веб-сайта. Процесс происходит на основании разработанного макета.
Верстку сайтов можно разбить на следующие этапы:
Изучение и ознакомление с ТЗ
Разработка дизайна (при условии, что работает дизайнер-верстальщик)
Тщательный подбор графических объектов
Курирование проекта до его согласования с заказчиком
Специалисту дается шаблон сайта, и он анализирует расположение графических элементов на нем. Затем он подбирает подходящий шаблон для реализации идеи, нарезает графические спрайты и в результате собирает HTML-шаблон.
Обязанности верстальщика
В круг его обязанностей входят такие задачи как:
Верстка шаблонов под стационарные мониторы и мобильные устройства (на основе готовых psd-макетов).
Верстка е-мейл рассылок и промо-страниц.
Интеграция шаблонов в CMS.
Программирование на JavaScript и AJAX.
В некоторых компаниях верстальщику приходится отвечать на вопросы клиентов и заниматься поисковым продвижением, что довольно редкое явление. Нередко специалисты для повышения заработной платы выполняют множество задач, одновременно занимаясь версткой, веб-дизайном и фронтенд-программированием.
Необходимые навыки и качества
Чтобы стать верстальщиком, вам потребуются следующие знания и навыки
язык разметки. HTML, HTML5, дополнительно желательно знать HTML-фреймворки: Twitter Bootstrap или Semantic UI;
CSS (каскадную таблицу стилей). При помощи нее задается стилистика страниц;
основы JavaScript, jQuery. При помощи них задается динамика;
принципы работы визуальных редакторов;
инструменты проверки правильности, валидности кода.
Часто в вакансиях на должность верстальщика «светятся» требования, которые нельзя относить к этой должности. Пример: доскональное знание JavaScript. Верстальщик должен знать, как это работает, но максимум его компетенции распространяется на знание типовых решений, которые позволят решить простые задачи, заложенные в макете. Тогда как Frontend-разработчик должен глубоко знать JavaScript, включая фреймворки, а также ему присущи навыки, которые позволяют расширять их возможности.
Завышенные требования к верстальщикам обусловлены тем, что работодатель хочет получить максимум за минимальные деньги. Поэтому он ищет именно верстальщика, который будет выполнять работу Frontend-а разработчика.
Сколько зарабатывает верстальщик
Средний месячный заработок HTML-верстальщика в России составляет 40-80 тысяч рублей. В Москве и Санкт-Петербурге специалист по верстке может рассчитывать на 100-150 тысяч рублей. Заработок верстальщика зависит от его опыта. Час работы может оплачиваться от 10$ до 40$, за проект легко можно получить от 70$ до 150$. Конечно, профессионалы получают намного больше за почасовую и проектную работу.
hh.ru по России
Фрилансеры работают по оплате за каждый проект: средняя цена на не сложный заказ составляет примерно пять-семь тысяч рублей. В месяц можно спокойно зарабатывать до 50-60 тыс. рублей.
Как же стать верстальщиком
Верстальщик – не самая сложная профессия в IT-сфере, поэтому ее легко можно освоить и самостоятельно. Такая специальность идеально подойдет для тех, кто хочет работать удаленно, однако при официальном трудоустройстве работодатель может потребовать соответствующий диплом.
Чтобы стать верстальщиком, можно закончить такие онлайн-курсы:
“Профессия Frontend-разработчик PRO” от Skillbox. Длительность обучения – 2 года. Формат: вебинары, видеоуроки с домашними заданиями. По окончании курса гарантировано трудоустройство. Стоимость обучения ежемесячно составляет 2925 рублей (первые полгода бесплатно).
“Веб-разработчик” от ЯндексПрактикум. Обучение рассчитано на 10 месяцев. За 10 месяцев обучения в среднем по 15 часов в неделю вы освоите востребованные навыки веб-разработчика и соберёте портфолио проектов. Ежемесячно за обучение необходимо платить 12000 рублей или 100000 рублей разовым платежом.
“Веб-верстальщик: начало” от WayUP. Обучение рассчитано на 2 недели. В курс входит 7 занятий по основам профессии, которые будут проверять проверенные наставники. В конце обучения вы получите сертификат, который может положительно сказаться при приеме на работу. Обучение на данном портале совершенно бесплатно, за исключением нескольких курсов.Многие верстальщики начинают с малого, а потом дорастают до уровня веб-мастеров, когда они сочетают в себе трех технических специалистов (дизайнер, верстальщик и программист). В общем, работа верстальщиком – это ступень, с которой вы можете стартовать в различные направления Digital. Главное начать, дорога строится под ногами идущего, так что вперед. Я уверен, что у вас получится!
Многие верстальщики начинают с малого, а потом дорастают до уровня веб-мастеров, когда они сочетают в себе трех технических специалистов (дизайнер, верстальщик и программист). В общем, работа верстальщиком – это ступень, с которой вы можете стартовать в различные направления Digital. Главное начать, дорога строится под ногами идущего, так что вперед. Я уверен, что у вас получится!
Верстальщик: Кто это, чем занимается и сколько зарабатывает (Обзор профессии)
Верстальщик – это специалист, который отвечает за корректное и единообразное отображение веб-сайта во всех популярных веб-браузерах и корректную работу всех его интерактивных и динамических элементов.
Базовая обязанность специалиста – верстка шаблонов по макету, который ему предоставляет веб-дизайнер (как правило в PSD-формате). По факту это картинка с различными слоями, которая является результатом предварительной работы менеджера проектов и веб-дизайнера.
Специфика профессии
С помощью кода верстальщик конвертирует полученные данные в Html-формат, грамотно размещает основной текст, заголовки и графику, занимается подбором уместных шрифтов и их сочетания.
По факту на нем лежит программная реализация заложенной в страницу идеи, поданной ему веб-дизайнером. Процесс создания сайта можно представить как алгоритм действий, состоящих из:
Кроме того, специалист обеспечивает единое отображение страницы в таких браузерах как Internet Explorer (Microsoft Edge), Chrome, Opera, Firefox и т.п. Очень часть приходится прибегать к тестированию с учетом разного разрешения, особенностям цветопередачи и моделям устройств отображения.
Где учиться на верстальщика
Эта профессия не является самой сложной в освоении, а значит ее можно освоить самостоятельно, и это вполне подойдет для работы во фрилансе. Между тем, для трудойстройства в корпорацию могут потребовать диплом о профильном образовании.
Если Вы хотите освоить эту профессию быстро, то можно пройти обучающие онлайн-курсы у специалистов своего дела.
Онлайн-курс №1 – “Веб-вёрстка”. На курсе Вы научитесь:
Должностные обязанности
Кроме того, часто верстальщик консультирует клиентов по работе сайта, занимается улучшением визуала и даже оптимизацией поискового продвижения. Ряд таких специалистов занимаются всем подряд, т.е. сразу и фронт-эндом, версткой и веб-дизайном.
Кому подходит профессия верстальщик
В принципе верстать может любой человек, который хорошо понимает в компьютерах и владеет навыками работы с соответствующим ПО. Итак, современный специалист знает:
Soft skills верстальщика
Преимущества и недостатки профессии
Из плюсов можно назвать серьезную востребованность на рынке труда, возможность ее самостоятельного усвоения и удаленной работы (также и фриланса).
Из минусов профессии можно отметить необходимость постоянно сидеть за компьютером и выполнять множество рутинных операций.
Зарплата верстальщика
Верстальщик html в нашей стране получает от тридцати до сорока тысяч рублей в месяц. В столицах можно рассчитывать на ЗП до восьмидесяти тысяч рублей в месяц.
Фрилансеры работают по оплате за каждый проект: средняя цена на не самый сложный заказ составляет примерно пять-семь тысяч рублей. В месяц можно зарабатывать до 50-60 тыс. рублей.
Карьера верстальщика
Многие работники IT рассматривает верстку в качестве начала карьерного развития, чтобы потом перейти к более сложным и ресурсным сферам деятельности – html-программированию, работе фронт-энд девелопером или дизайну в «чистом» виде.
Верстальщик кто это, чем занимается, сколько зарабатывает и как им стать?
Традиционно профессия верстальщика относится к печатному делу. Хотя занятие это одно из важнейших, многие, что удивительно, не слышали о нем совсем. Верстальщик кто это и чем он занимается? Как освоить эту профессию? На эти вопросы я отвечу максимально доступно и понятно. Сразу стоит сказать, что разговор пойдет о верстальщике сайтов, хотя занятия любых верстальщиков схожи.
Версткой веб-сайтов заниматься не так сложно. Научиться этому делу можно за 2 месяца, а затем начать брать в работу мелкие проекты. Созданием сайта занимаются дизайнер, верстальщик и программист. Это 3 основных специалиста, задействованных в разработке отдельно взятого ресурса в интернете. Работа верстальщика начинается после того, как веб-дизайнер разрабатывает и предоставляет макет.
Содержание статьи:
Верстальщик кто это – верстка сайтов
Газеты сегодня заменились интернетом, даже существующие до сих пор печатные издания выкладывают в электронном виде. Верстальщик в печати соединял картинки и текст так, чтобы страницы смотрелись органично. Подбор шрифтов, общий вид газеты – эти обязанности лежали на плечах людей, занимавшихся версткой. Со временем профессия приобрела более современную форму. Теперь верстальщик работает не только с газетами и журналами, но и в веб-сайтами.
Верстальщик – человек, который делает HTML-шаблон веб-сайта, опираясь на подготовленный дизайнерский макет. Дизайнер может нарисовать только изображение того, как должны выглядеть страницы. Но сайт работает не на картинках, а на специальном коде. Благодаря ему картинки или фотографии появляются в одном месте при загрузке, текст – в другом, интерактивные элементы – в третьем и т.п. Можно сказать, что верстальщик материализует идею дизайнера, воплощает ее в жизнь.
Создать полноценный веб-сайт – поэтапная работа:
Кажется сложным, как и любое новое занятие, но погружение в нюансы работы избавят от этого чувства. От верстальщика, кроме уже названных обязанностей, ожидают в результате такой ресурс, который бы отображался в самых распространенных браузерах одинаково. Когда работа верстальщика выполнена, в дело вступает программист, который переводит данные в CMS систему – своеобразное «сердце» сайта, через которое им управляют.
Что делает верстальщик сайтов
Привет. Я тут записал небольшой курс про то, как я создаю свои проекты с нуля, продвигаю их и зарабатываю. Будешь участвовать?
А теперь коснемся того, что делает верстальщик, более подробно. Этот человек работает главным образом с HTML и CSS кодом. На HTML построены все сайты. К нему приложены CSS-файлы, в которых есть описание определенных деталей внешнего вида сайта. Дизайн нужен для перемещения разнообразных изображений, лого, фонов, сохраненных на компьютере верстальщика, в конечный результат.
Верстальщик сайтов может выполнять разнообразные обязательства:
Эта работа хорошо подходит людям, ранее не работавшим в сфере АйТи – работать можно как в компании, так и дома, удаленно. Глубоко погружаться в программирование нет нужды. Курсов и интернет-статей достаточно, чтобы овладеть этой профессией. Один из нюансов работы, который можно считать минусом, – это быстро развивающиеся технологии. В процессе работы придется регулярно совершенствовать свои знания и навыки.
Дополнительно:
Очень многие люди хотят научиться делать сайты, но их останавливает тот факт, что нужно учить основы программирования. На самом деле это не всегда так. К примеру я создал свой блог artbashlykov.ru не написав ни одной строчки кода и сделать я это смог благодаря CMS WordPress (это бесплатная система по созданию и управлению сайтом)
Поэтому, если вы также хотите научится делать сайты без изучения программирования, очень советую использовать для этого Вордпресс, тем более, что видео уроков и курсов по этой CMS очень много. Для начала можете воспользоваться моим бесплатным курсом — он вот тут.
Сколько зарабатывает верстальщик сайтов
Зарплата зависит от умений самого верстальщика, а также от места, где он работает. На бирже фриланса поначалу стоимость за заказ может быть ниже среднего, но так любой новичок получит возможность без претензий наработать важные навыки. Среднестатистическая цена за заказ 5 тысяч российских рублей. При этом важно помнить о сложности задания, от которого зависит оплата. Каждый решает для себя, достаточно ли этой суммы, стоит ли это обучения верстке.
Но покупаться на особо дешевые заказы нельзя. Некоторые заказчики ожидают от начинающего фрилансера, занимающегося версткой, результат профессионала. При этом платить такие люди хотят в 2 раза меньше. Любят «схалявить» и посредники, заказывая работу у новичка, чтобы затем выдать ее за свою заказчику по более выгодной цене. Работник с опытом получает не менее 40-50 тысяч российских рублей в месяц – на эту сумму стоит ориентироваться. Для верстальщика 80 тысяч в месяц считается повышенной заработной платой.
Даже начинающим специалистам следует ценить знания и умения, на получение которых потрачены силы, денежные и временные ресурсы. Новичкам будет полезно посмотреть все заказы, чтобы понять ценовую политику за работу той или иной сложности. А лучше – поинтересоваться у верстальщиков, которые занимаются версткой не первый год.
Какие навыки нужно освоить для профессии верстальщик сайтов
Верстальщик кто это в плане необходимых навыков, какие умения должен иметь такой работник? Профессионалу нужно овладеть так называемыми «софт скиллз», а не только знаниями для выполнения качественной верстки. Надпрофессиональные навыки не менее важны в этом деле.
К необходимым дополнительным умениям можно отнести следующие:
Список можно пополнить очевидными умениями: способность работать на результат в команде. Без таких личностных качеств, как терпеливость и аккуратность, верстальщику тоже будет трудно. Нужно учитывать однообразность работы – людям, которые любят постоянно находиться в движении, такой вариант не подойдет. Зато профессия широко востребована сегодня, и спрос на специалистов в этой сфере растет.
Обратите внимание:
Крупные компании делят верстальщиков, как иллюстраторов или дизайнеров, на три уровня: Junior, Middle, Senior. В зависимости от глубины знаний и количества навыков специалист может претендовать на место младшего, среднего или старшего работника.
Для освоения профессии верстальщика понадобится узнать:
Веб-сайт проходит долгий путь от обыкновенного изображения к полноценному организму. В этом процессе верстальщик выступает посредником. Работа со специальными программами – основа верстки, поэтому освоение профессии нужно начинать с них. Преимуществом будет, если работник владеет PHP и XHTML.
Также отличной возможностью зарекомендовать себя как знающего и опытного специалиста будет знание MySQL, Firefox-плагинов и CSS-препроцессоров. К тому же у верстальщика должны быть хорошие отношения с текстом в принципе, с его форматированием. Верстальщики в большинстве случаев умеют писать СЕО-тексты.
Дополнительно:
Есть предпочтительное образование, с которым легче осваивать профессию. Необязательно поступать в вузы – среднего специального образования достаточно с лихвой. Специальности, связанные с информационными технологиями, дизайном и медиа будут идеальными. Но даже специалист с другим образованием может наверстать знания на курсах.
Рекомендации для новичков – как начать зарабатывать на создании сайтов
Сложнее всего начинающему верстальщику составить план действий для освоения новой профессии. Начинать стоит с малого. Предрассудок, что любой человек в АйТи сразу выйдет на доход в 100 тысяч российских рублей или больше, всего лишь предрассудок. Стоит упомянуть и о том, что верстальщик получает не так много, как фронтэнд-программист с более углубленными навыками в создании сайтов.
Вот шаги, помогающие будущему верстальщику приблизиться к желаемой профессии:
Дополнительно:
Начинающие специалисты также интересуются, где можно искать работу. Поиск бывает активным и пассивным. Первый вариант – просматривать предложения самостоятельно на Workspace.ru, FL.ru, Яндекс.Работе. Второй вариант – разместить свою кандидатуру в каталог. Подойдет для этого отдельный раздел биржи Kadrof.ru, где при желании можно найти и постоянную работу.
Заключение и итоги
Минусов у такой работы достаточно. К сложностям относятся однообразная работа, многочасовое сидение за компьютером, необходимость постоянно увеличивать список умений, адаптироваться к нововведениям в АйТи. Но главное преимущество профессии – перспективность. Если максимальная заработная плата верстальщика составляет 80 тысяч российских рублей, то фронтэнд-программист способен заработать больше. Углубляя свои знания, можно постепенно увеличивать и свой доход.
Итак, сделаю выводы по тому, что уже было сказано. Верстальщик кто это? Это перспективный специалист, неглубоко вовлеченный в область АйТи. Для создания макета веб-сайта понадобятся в первую очередь знания HTML и CSS, владение английским языком на базовом уровне и умение работать с текстом. Но ограничиться базовыми навыками не получится. Настоящий профессионал осваивает дополнительный софт: умеет работать с Adobe PageMaker, Photoshop, JavaScript.
Путь верстальщика: с нуля до сеньора
Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих 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. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.