Что должен уметь верстальщик, чтобы его все хотели

    В иерархии фронтенд-разработки верстальщики располагаются где-то здесь: 


    Фронтенд-разработка в 2020, холст, масло

    В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

    Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

    И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно. 

    В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

    С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.

    Мы в HTML Academy работаем над тем, что верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.

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


    Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

    Требуется верстальщик, который:

    • Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
    • Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
    • Знает HTML. В своей работе использует canvas. Шаблонизирует HTML с помощью PUG.
    • Использует Git. Умеет работать в GitHub.
    • Может натянуть вёрстку на CMS: Bitrix и Wordpress.
    • JavaScript пишет с помощью jQuery, но не чурается ES6.
    • Умеет автоматизировать свою работу с Node.js, npm-скипты, Autoprefixer, Gulp или Webpaсk.
    • Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
    • Имеет своё портфолио, инициативный, готов пройти испытательный срок

    Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

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


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

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

    SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть. 

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

    БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.

    Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).

    PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.

    Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Айтишники любят Git и написали про него много статей.

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

    Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.

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

    Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

    Что там с Фотошопом и Иллюстратором


    Некоторые ребята говорят, что их всерьёз кто-то использует.

    Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Люстра, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

    Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься. 

    А портфолио откуда брать?


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

    Что об этом всём думают ребята из индустрии?


    Я спросил Катю, которая раньше верстала в Яндекс.Деньгах, о том, что должен уметь верстальщик, чтобы его все хотели. Катя отвечает:

    Катя Иванова, перевела бабушку на React

    По опыту: нужно точно, быстро и адаптивно. 

    Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах. 

    Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.

    В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер :D

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

    Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.

    Что ещё?


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

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

    Фух, вроде всё. Всех метафизически обнял.

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 27

      0

      Разве верстальщик уже давным давно не слился с фронтом?

        +4

        Как по мне, то верстальщик и фронтэндер должны быть разные люди.
        Один создаёт адаптированные макеты под весь зоопарк устройств.
        Другой пишет логику работы между макетами и беком, если говорить например о SPA.


        Это конечно если они работают в веб студии и у них есть поток работ.

          +3
          это все отмазки, чтобы верстальщику не учить js а фронту уметь верстать
            +1

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

              0

              Дизайнер должен знать верстку. Иначе он придумывает работу своему коллеге. Если не конвейер, может быть и один человек, другое дело — что таких очень мало.

                +2

                Я 15 лет в немецком и международном ИТ.
                Тут такого понятия как верстальщик нет. Дико читать про это разделение на Хабре довольно частенько.

              0
              Тут такое дело, что чтобы делать хорошую вёрстку, надо не только уметь делать «адаптированные макеты под весь зоопарк устройств», но и хорошо понимать специфику движка, на которую эта вёрстка будет натягиваться. А если знаешь специфику, то не проще сразу писать компоненты для движка?
                0
                Как по мне, то верстальщик и фронтэндер должны быть разные люди.

                Вы много в каких компаниях такое разделение в реальности видели?
                Я такое деление видел один раз в Cбертехе. И не видел в Яндексе, Mail.ru, а также судя по вопросам на собеседованиях ещё в Альфа Банке.

                Один создаёт адаптированные макеты под весь зоопарк устройств.

                Я не уверен что сложные макеты под весь зоопарк устройств можно создать без не самого тривиально JS. А заодно сделать элементы этих макетов переиспользуемыми.
                0
                Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

                Что там в 2020 году есть для видеовещания с низкой задержкой? ну, для вебинаров? А альтернативы флешу все еще нет, протокол rtmp до сих пор не дает спокойно похоронить flash.

                Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode.

                Как там в фигме-то пятнами градиентик то поверх фото сделать? А в офлайне поработать? Она очень хороша, компонентный подход просто сказка, переопределения своств — тоже сказка. Для интерфейсов самое оно. Двигать полотно, блоки туда сюда можно элементарно. Господи, да там же можно ссылки вешать на экраны и демонстрировать макеты до верстки. Но без связки с возможностями шопа для фотографий Фигма не самостоятельна. И ее аналогом скорее выступает adobe xd.
                  0
                  Но без связки с возможностями шопа для фотографий Фигма не самостоятельна.

                  Что? Зачем фигме фотошоп?
                    0

                    Говорят в интерфейсах используют растровую графику.

                      0
                      Говорят, что растр редактируют в растровых редакторах, а не в системах проектирования UI
                        0
                        следовательно, ваше первое утверждение некорректно)
                          0
                          У меня нет утверждения. У вас есть, и я думаю что оно странное минимум.
                    0
                    Что там в 2020 году есть для видеовещания с низкой задержкой? ну, для вебинаров? А альтернативы флешу все еще нет, протокол rtmp до сих пор не дает спокойно похоронить flash.


                    А чем WebRTC плох?
                      0
                      web-rtc с один ко многим плохо дружит. Почти все решения планые.
                    0
                    Извиняюсь, что немного не по теме. Я как-то не в курсе — БЭМ все еще используется в проектах на современных технологиях? Для чего? Или он добавлен из-за того, что нужен на jQuery проектах?
                    Проблема коллизии имен уже давно решается с помощью css модулей.
                    Для повторного использования вместо блоков уже давно есть компоненты в web components и фреймворках (вроде react, vue, angular).

                    По-моему, только модификаторы актуальны.
                    Может еще для глобальных стилей БЭМ актуален. Не все же локальными стилями делать.
                      0
                      с помощью css модулей.
                      CSS-модули это точно такой же костыль, только автоматизированный.
                        0
                        А какой шаблонизатор поддерживает css модули? Использовать фреймворк только ради того, чтобы использовать scoped стили на лендинге — выглядит еще более костыльно.
                        Есть же куча вариантов, где нужен простой сайт с минимумом js.
                          0
                          Не знаю, как обстоят дела с изоляцией стилей в шаблонизаторах.
                          Не подумал про серверный рендеринг. Ну да, в таких случаях возможно нет других вариантов, кроме как ручного именования по какой-нибудь css-методологии.
                            +1
                            Читаю ветку, слова вроде знакомые, но в общую картинку как-то не складываются) Попробую распутать.

                            Отправная точка как проблема — коллизия имен стилевых классов, так как все они находятся на глобальном уровне. Решается тремя основными подходами:
                            — уникальное именование (в том числе по БЭМ). Недостатки — длинные имена классов, ручное именование, соответственно высока возможность ошибки, нет автодополнения в IDE — в общем, пригодится только для маленьких проектов.
                            — большая специфичность (`.landing-block.list-item{}` вместо просто `.list-item{}`) — подход, гармонично воплощенный во всех препроцессорах методом вложенности классов. То есть подобная склейка происходит автоматически, что дает на выходе АНБ (абсолютно независимый блок) «из коробки». Недостатки — у родительских классов все равно приходится вручную поддерживать уникальность, нет автодополнения.
                            — добавление уникального ключа к каждому классу либо какой-либо человекопонятной переменной вроде названия папки (CSS Modules). Наиболее прогрессивный метод, когда все файлы стилей подключаются непосредственно в js-файлах компонентов и проходят через специальный обработчик (например, css-loader Webpack). Присутствуют все «бонусы» — модульность, автодополнение, уникальность, ну и если еще используется препроцессор — то и все его возможности.

                            Смутили в ветке обсуждения такие выражения, как
                            — «локальные стили» — это как? CSS классы в любом случае будут глобальными. Условно «локальными стилями» можно считать только те, которые указаны в атрибутах типа <div style=""/>, но так сейчас делают только письма ввиду отсутствия поддержки отдельных CSS-файлов, либо CSS-in-JS — ужасный паттерн, который я намеренно не стал перечислять выше, пусть он уже совсем уйдет в небытие.
                            — «А какой шаблонизатор поддерживает css модули?» — их поддерживает не шаблонизатор, а сборщик, но только при импорте в js-файлах. То есть el.innerHTML = '<div class="${styles.myClass}"/>' можно сделать на «ванильном шаблонизаторе»)
                            — «Использовать фреймворк только ради того...» — вместо БЭМ и лучше него — препроцессоры с вложенностью классов, но и css модули тоже можно использовать, как писал выше, никакие фреймворки не требуются.

                            Так что вроде понимаю слова — типа локальные стили, шаблонизатор, модули, фреймворк… Но как будто они накиданы наобум
                              0
                              Извиняюсь, если не грамотно что-то называю.
                              «Локальные стили» — встречается такое именование:
                              vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
                              github.com/css-modules/css-modules#naming

                              вместо БЭМ и лучше него — препроцессоры с вложенностью классов,
                              Во всех последних мною виденных Multi Page Application проектах, помимо препроцессоров, использовался также БЭМ. Почему-то вложенность как замену БЭМ там не использовали.
                                +1
                                Кроме подхода «использовать технологию, чтобы решить проблему» разработчики используют еще «потому что привыкли», «потому что где-то прочитали, что так хорошо», «потому что могут» — не менее распространенные подходы, чем первый) Думаю, стоит узнать у тех разработчиков — для чего вместо
                                .form { .input { & .red {} } }
                                писать
                                .form { .form__input {} .form__input_red {} }
                                так как никакого практического смысла это не несет.
                        0
                        Эм, а canvas верстальщику зачем?
                          +1
                          Больше всего смутило, что верстальщику приписали умение натянуть верстку на битрикс или вордпресс.
                          Там как бы знание PHP нужно. Если не делается совсем уж стандартный блог, где нужно будет просто файл стилей подменить, то без этого никак. А если человек PHP знает, то он, скорее всего, и на Javascript напишет всё, что необходимо для сайта, и в целом это уже Fullstack получается.
                            0
                            Согласен с Named — в статье явно верстальщику приписываются компетенции от другой профессии — «веб-мастер», а надо бы их разделять.

                            Так что я бы оставил в списке целевых технологий: адаптивная верстка, препроцессоры, Git, работа с готовыми javascript-библиотеками (уметь подключить и кое-что подправить на упрощенном js типа jQuery), несколько графических редакторов, работа с изображениями и svg-масками, шрифтами, особенности верстки писем, владение вставкой переменных в каком-либо шаблонизаторе (предпочтительно JSX+Pug), принципы SEO и оптимизации для поисковиков. Зарплата как я могу судить по мониторингу рынка с 2000-х будет в районе 1000$ за такой набор, а при отличном владении и высокой производительности — до 1500$. Обучаться ремеслу придется в районе года-полутора.

                            А вот для веб-мастера плюсом к этому нужно знание нескольких CMS-движков, уметь настраивать большое количество модулей к ним и темы, заказать хостинг и выложить это дело на сервер, базово раскрутить в поисковиках, написать кастомные js-компоненты на базовом уровне, поправить серверный код на php, написать документацию по пользованию системой и терпеливо поддерживать клиентов. Продвинутые веб-мастера могут делать сложные интернет-магазины. Зарплата тут будет зависеть от конторы, но можно рассчитывать при достаточном опыте на 2000-2500$, я вот мог в бородатое время и больше «наработать» — например, за месяц успевал сделать по 3 проекта по типу такого полностью «под ключ», с кастомной админкой под каждый проект и инлайн-редактированием. Обучаться этому ремеслу придется + 1-2 года от становления хорошим верстальщиком.

                            Ну, а Node.js и Webpack — это уже от третьей профессии, javascript-разработчик. Это альтернативный веб-мастерингу путь, который приведет к становлению frontend-разработчиком (комбо верстка+js на крутом уровне), тут и так все понятно)
                              0

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

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

                              Самое читаемое