Верстальщик html: Что должен уметь верстальщик в 2020 году — Блог HTML Academy

Что должен уметь верстальщик в 2020 году — Блог HTML Academy

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

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

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

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

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

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

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

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

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

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и Wordpress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрас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 — все постепенно пересядут на нормальную технологию, никуда не денешься.

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

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

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

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

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

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

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

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

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

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

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

Что ещё?

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

Новая профессия не за горами

Мы перезвоним и расскажем всё о том, как стать верстальщиком.

Хочу консультацию

Нажатие на кнопку — согласие на обработку персональных данных

с нуля до сеньора / Хабр

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.

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

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

В иерархии фронтенд-разработки верстальщики располагаются где-то здесь: 
Фронтенд-разработка в 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, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер 😀

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

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

Что ещё?

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

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

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

Видеокурсы по специальности: Верстальщик сайтов

Верстальщик сайтов – это специалист, который занимается созданием веб-страниц.

Верстальщик работает в команде с веб-дизайнером и программистом. Сначала дизайнер “рисует” сайт — придумывает тему, располагает необходимые элементы на нужных местах. После утверждения макета сайта за работу берётся верстальщик. Он при помощи различных элементов языка разметки web-страницы переводит графические элементы дизайна (рисунки, шрифты, таблицы и т.д.) в понятный для браузера формат. Можно сказать, что он создаёт текстовый макет того, что придумал дизайнер. После того, как страница свёрстана и проверена в различных браузерах на правильность отображения, она передаётся в работу программисту, который подключает необходимый функционал.

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

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

• языки разметки HTML, XHTML, XML;
• каскадные таблицы стилей CSS.

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

Работа верстальщика не очень сложная, но требует определенного уровня подготовки и большого внимания к деталям. На хороших специалистов практически постоянно существует большой спрос.

Основные требования работодателя к верстальщику сайтов:

• Отличное знание HTML, CSS, Bootstrap
• Умение работать с макетами (Photoshop, Illustrator, Sketch)
• Навыки кроссбраузерной верстки, адаптивной верстки
• Хорошее знание JavaScript, HTML5, CSS3/SASS
• Знание Git
• Умение писать прозрачный и легко поддерживаемый код, а также работать с чужим кодом, его оптимизацией
• Английский на хорошем разговорном и письменном уровне (Intermediate)
• Знание ES5/ES6 и TypeScript будет плюсом

Верстальщик веб-страниц может занимать такие должности:

HTML-верстальщик/HTML-coder

HTML/JS Developer

Web Developer

Frontend Developer

JavaScript Developer

Junior/Middle JavaScript Engineer

Типичный верстальщик

ПОЛЕЗНЫЙ ПРОЕКТ ДЛЯ ВЕРСТАЛЬЩИКОВ И ФРОНТЕНД-РАЗРАБОТЧИКОВ

Вконтакте

Место зарождения Типичного Верстальщика. Идеальный ресурс для новичков и профессионалов в сфере it.

• видео-уроки по темам
• ссылки на полезные сервисы
• советы по созданию сайтов
• вдохновляющие примеры
• немного юмора

Подписаться

Телеграм

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

• Книги для чтения
• Советы верстальщикам
• Описание годных сервисов
• Небольшие истории из жизни автора

Подписаться

YOUTUBE

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

• полезное о веб-разработке
• техники вёрстки сайтов
• розыгрыши книг
• видео об удаленной работе и фрилансе

Подписаться

Блог

Если смотреть видео — это не твоё, то почитать все самое свежее можно и в текстовом варианте.Достаточно лишь кликнуть на вкладку «блог» в шапке сайта или на кнопку ниже.

• макеты для вёрстки
• перевод статей
• транскрибация видеороликов
• информация о графических редакторах

Перейти в блог

PDF ежедневник для фронтендеров

Раньше мы продавали печатную версию, но после полной распродажи решили перейти на электронную версию. Используй странички так, как тебе нужно!

Frontend Help — онлайн платформа для вопросов

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

Frontend Blok — учебная платформа

Это наша авторская учебная платформа, которая предлагает курсы по верстке сайтов без воды.

HTML элементов компьютерного кода

HTML содержит несколько элементов для определения пользовательского ввода и
компьютерный код.

HTML для ввода с клавиатуры

Используется элемент HTML
для определения ввода с клавиатуры. Содержимое внутри отображается в браузере
моноширинный шрифт по умолчанию.

Пример

Определить текст как ввод с клавиатуры в документе:

Сохраните документ, нажав Ctrl + S

результат:

Сохраните документ, нажав Ctrl + S

Попробуй сам "

HTML для вывода программы

Элемент HTML используется для
определить образец вывода из компьютерной программы.Содержимое внутри отображается в
моноширинный шрифт браузера по умолчанию.

Пример

Определите текст как образец вывода компьютерной программы в документе:

Сообщение с моего компьютера:

Файл не найден.
Нажмите F1, чтобы
продолжить

результат:

Сообщение с моего компьютера:

Файл не найден.
Нажмите F1, чтобы продолжить

Попробуй сам "

HTML для компьютера Код

Используется элемент HTML
для определения фрагмента компьютерного кода.Содержимое внутри отображается в
моноширинный шрифт браузера по умолчанию.

Пример

Определите текст как компьютерный код в документе:


x = 5;
у = 6;
г = х + у;


результат:


х = 5;
у = 6;
г = х + у;


Попробуй сам "

Обратите внимание, что элемент не сохраняет лишние пробелы и разрывы строк.

Чтобы исправить это, вы можете поместить элемент внутри элемента

 : 




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

 
 Пример 
   
 Определить текст как переменные в документе: 
 

  
 Площадь треугольника: 1/2 x  b  x  h , где  b 
  - основание, а  h  - высота по вертикали.
 

 
 результат: 
 

Площадь треугольника: 1/2 x  b  x  h , где  b  - основание, а  h  - вертикальная высота.
 
Попробуй сам "

 
 
 Краткое содержание главы 
 
 
 Элемент    используется для определения
ввод с клавиатуры 
   
 Элемент    используется для определения
  пример вывода компьютерной программы 
   
 Элемент    используется для
  определить часть компьютерного кода 

   
 Элемент    используется для
  определяет переменную в программировании или в математическом выражении 
   
 Элемент  
  используется для определения
  предварительно отформатированный текст 
 
 
 
 Упражнения HTML 

 
 
 Элементы компьютерного кода HTML 
 
 
 
 Тег 
 
 Описание 
 
 
 
 <код> 
 
 Определяет программный код 
 
 
 
  
 
 Определяет ввод с клавиатуры 
 
 
 
  
 
 Определяет вывод компьютера 
 
 
 
  
 
 Определяет переменную 
 
 
 
 
 
 
 Определяет предварительно отформатированный текст 
 
 

 


 
.
 HTML-код тега 
      


 

 
 Пример 
 
 Определите текст как компьютерный код в документе: 

  Тег кнопки HTML определяет кнопку, на которую можно нажать. 
 
 Свойство CSS  background-color  определяет цвет фона.
  элемента. 
 

Попробуй сам "

 
 Дополнительные примеры "Попробуйте сами" ниже. 
 
 
 Определение и использование 
 
 Тег    используется для определения фрагмента компьютерного кода.Содержимое внутри отображается моноширинным шрифтом браузера по умолчанию. 

 
  Совет:  Этот тег не является устаревшим. Однако,
можно добиться более богатого эффекта с помощью CSS (см. пример ниже). 
 
 Смотрите также: 
 
 
 
 Тег 
     
 Описание 
   
 
 
  
     
 Определяет пример вывода компьютерной программы 
   
 
 
 <КБД> 
     
 Определяет ввод с клавиатуры 
   
 
 
  
     
 Определяет переменную 
   
 
 
 
 
     
 Определяет предварительно отформатированный текст 
   
 
 
 
 Поддержка браузера 
 
 
 
 Элемент 
     

     

     

     

     

   
 
 
 <код> 
     
 Есть 
     
 Есть 
     
 Есть 
     
 Есть 
     
 Есть 
   
 
 
 
 Глобальные атрибуты 
 
 Тег    также поддерживает глобальные атрибуты в HTML.

 
 
 Атрибуты событий 
 
 Тег    также поддерживает атрибуты событий в HTML. 

 
 
 Другие примеры 

 
 Пример 
 
 Используйте CSS для стилизации элемента : 

 
 
 
 код {
 семейство шрифтов:
    Consolas, "новый курьер"; 
 цвет: малиновый; 

    цвет фона: # f1f1f1; 
 отступ: 2 пикселя; 
 размер шрифта:
    105%; 
} 
 
 
 
 HTML
    Тег  button  определяет кнопку, на которую можно нажать.
 
 
 CSS
     background-color  определяет цвет фона
    элемент. 
 
 
  
  
Попробуй сам "

 
 
 Связанные страницы 
 
 Учебное пособие по HTML: Форматирование текста HTML 
 
 Ссылка на HTML DOM: объект кода 
 
 
 Настройки CSS по умолчанию 
 
 Большинство браузеров будут отображать элемент    со следующими значениями по умолчанию: 




 
.
 Кодировка HTML | Коды символов и символы HTML 
 Все коды символов HTML текстовых шрифтов и символов из & # 0; на & # 65535; . 
 * Проверьте, поддерживается ли символ в браузере Android. 
    
 
 
 Символ 
 Цифровой 
 код 
 Именованный 
 код 
 Описание 
 
 
 
 
 & # 160; 
 & nbsp; 
 неразрывное пространство 
 
 
 ¡
 & # 161; 
 & iexcl; 
 перевернутый восклицательный знак 
 
 
 ¢ 
 & # 162; 
 & cent; 
 центов знак 
 
 
 £ 
 & # 163; 
 & фунт; 
 знак фунта 
 
 
 ¤ 
 & # 164; 
 & curren; 
 знак валюты 
 
 
 ¥ 
 & # 165; 
 иена; 
 йен знак 
 
 
 ¦ 
 & # 166; 
 & brvbar; 
 сломанный стержень 
 
 
 § 
 & # 167; 
 & sect; 
 знак раздела 
 
 
 ¨ 
 & # 168; 
 & uml; 
 диэрезис 
 
 
 © 
 & # 169; 
 & копия; 
 знак авторского права 
 
 
 ª 
 & # 170; 
 & ordf; 
 женский порядковый указатель 
 
 
 «
 & # 171; 
 & laquo; 
 Гильмет с направлением влево 
 
 
 ¬ 
 & # 172; 
 и нет; 
 не подписывать 
 
 
 
 & # 173; 
 & застенчивый; 
 мягкий перенос 
 
 
 ® 
 & # 174; 
 и рег; 
 зарегистрированный знак 
 
 
 ¯ 
 & # 175; 
 & macr; 
 макрон 
 
 
 ° 
 & # 176; 
 & deg; 
 знак градуса 
 
 
 ± 
 & # 177; 
 & plusmn; 
 знак плюс-минус 
 
 
 ² 
 & # 178; 
 & sup2; 
 надстрочный два 
 
 
 ³ 
 & # 179; 
 & sup3; 
 тройной надстрочный 
 
 
 ´ 
 & # 180; 
 и острый; 
 острый акцент 
 
 
 мкм 
 & # 181; 
 и микро; 
 микроподпись 
 
 
 ¶ 
 & # 182; 
 и пункт; 
 знак абзаца 
 
 
 · 
 & # 183; 
 и миддот; 
 средняя точка 
 
 
 ¸ 
 & # 184; 
 & cedil; 
 шаг седиль 
 
 
 ¹ 
 & # 185; 
 & sup1; 
 надстрочный один 
 
 
 º 
 & # 186; 
 & ordm; 
 мужской порядковый номер 
 
 
 »
 & # 187; 
 & raquo; 
 Гильмета с правым наведением 
 
 
 ¼ 
 & # 188; 
 и frac14; 
 дробь одна четверть 
 
 
 ½ 
 & # 189; 
 и frac12; 
 дробь половина 
 
 
 ¾ 
 & # 190; 
 и frac34; 
 дробь три четверти 
 
 
 ¿
 & # 191; 
 & iquest; 
 перевернутый вопросительный знак 
 
 
 À 
 & # 192; 
 и Agrave; 
 заглавная А с могилой 
 
 
 Á 
 & # 193; 
 & Aacute; 
 заглавная A с острым углом 
 
 
 Â 
 & # 194; 
 и Acirc; 
 заглавная A с циркумфлексом 
 
 
 Ã 
 & # 195; 
 и Atilde; 
 заглавная А с тильдой 
 
 
 Ä 
 & # 196; 
 и Auml; 
 заглавная A с тремой 
 
 
 Å 
 & # 197; 
 & Aring; 
 заглавная A с кольцом 
 
 
 Æ 
 & # 198; 
 и AElig; 
 заглавная AE 
 
 
 Ç 
 & # 199; 
 и Ccedil; 
 заглавная C с седилем 
 
 
 È 
 & # 200; 
 и Эгрейв; 
 заглавная Е с могилой 
 
 
 É 
 & # 201; 
 & Eacute; 
 заглавная E с острым углом 
 
 
 Ê 
 & # 202; 
 и Ecirc; 
 заглавная E с циркумфлексом 
 
 
 Ë 
 & # 203; 
 и Euml; 
 заглавная E с диэрезисом 
 
 
 Ì 
 & # 204; 
 и Игрейв; 
 заглавная I с могилой 
 
 
 Í 
 & # 205; 
 & Iacute; 
 заглавная I с острым углом 
 
 
 Î 
 & # 206; 
 и Icirc; 
 заглавная I с циркумфлексом 
 
 
 Ï 
 & # 207; 
 и Iuml; 
 заглавная I с тремой 
 
 
 ì 
 & # 208; 
 & ETH; 
 капитал ETH 
 
 
 Ñ 
 & # 209; 
 и Ntilde; 
 заглавная N с тильдой 
 
 
 Ò 
 & # 210; 
 и Огрейв; 
 заглавная О с могилой 
 
 
 Ó 
 & # 211; 
 & Oacute; 
 заглавная O с острым углом 
 
 
 Ô 
 & # 212; 
 и Ocirc; 
 заглавная O с циркумфлексом 
 
 
 Õ 
 & # 213; 
 и Otilde; 
 заглавная O с тильдой 
 
 
 Ö 
 & # 214; 
 и Ouml; 
 заглавная O с диэрезисом 
 
 
 × 
 & # 215; 
 & раз; 
 знак умножения 
 
 
 Ø 
 & # 216; 
 и Ослаш; 
 заглавная O с ходом 
 
 
 Ù 
 & # 217; 
 и Юграва; 
 заглавная U с могилой 
 
 
 Ú 
 & # 218; 
 и Uacute; 
 заглавная U с острым углом 
 
 
 Û 
 & # 219; 
 и Ucirc; 
 заглавная U с циркумфлексом 
 
 
 Ü 
 & # 220; 
 и Uuml; 
 заглавная буква U с диэрезисом 
 
 
 Ý 
 & # 221; 
 & Yacute; 
 заглавная Y с острым углом 
 
 
 Þ 
 & # 222; 
 & THORN; 
 заглавная ШИНА 
 
 
 ß 
 & # 223; 
 & szlig; 
 малый острый с 
 
 
 по 
 & # 224; 
 & agrave; 
 малая а с могилой 
 
 
 á 
 & # 225; 
 & aacute; 
 малая с острым 
 
 
 â 
 & # 226; 
 &; 
 small a с циркумфлексом 
 
 
 ã 
 & # 227; 
 & atilde; 
 маленький a с тильдой 
 
 
 ä 
 & # 228; 
 & auml; 
 малый А с диэрезисом 
 
 
 å 
 & # 229; 
 & aring; 
 малый а с кольцом сверху 
 
 
 æ 
 & # 230; 
 & aelig; 
 малый ae 
 
 
 ç 
 & # 231; 
 & ccedil; 
 малый c с седилем 
 
 
 и 
 & # 232; 
 & egrave; 
 малая е с могилой 
 
 
 é 
 & # 233; 
 & eacute; 
 малая е с острым углом 
 
 
 ê 
 & # 234; 
 и ecirc; 
 строчная e с циркумфлексом 
 
 
 ë 
 & # 235; 
 & euml; 
 малая е с диэрезисом 
 
 
 м 
 & # 236; 
 & igrave; 
 малый я с могилой 
 
 
 до 
 & # 237; 
 & iacute; 
 малая i с острым углом 
 
 
 до 
 & # 238; 
 и icirc; 
 small i с циркумфлексом 
 
 
 • 
 & # 239; 
 и iuml; 
 малый i с диэрезисом 
 
 
 ð 
 & # 240; 
 & eth; 
 малый eth 
 
 
 - 
 & # 241; 
 & ntilde; 
 строчная буква n с тильдой 
 
 
 шт 
 & # 242; 
 & ograve; 
 малая о с могилой 
 
 
 ó 
 & # 243; 
 & oacute; 
 малая o с острым углом 
 
 
 ô 
 & # 244; 
 & ocirc; 
 строчная o с циркумфлексом 
 
 
 х 
 & # 245; 
 & otilde; 
 строчная o с тильдой 
 
 
 ö 
 & # 246; 
 & ouml; 
 малый o с диэрезисом 
 
 
 ÷ 
 & # 247; 
 & разделить; 
 разделительный знак 
 
 
 ø 
 & # 248; 
 & oslash; 
 o с ходом 
 
 
 ù 
 & # 249; 
 & ugrave; 
 П с могилой 
 
 
 ú 
 & # 250; 
 & uacute; 
 маленькая буква U с острым углом 
 
 
 û 
 & # 251; 
 & ucirc; 
 строчная буква U с циркумфлексом 
 
 
 ü 
 & # 252; 
 & uuml; 
 маленькая буква U с диэрезисом 
 
 
 ý 
 & # 253; 
 & yacute; 
 маленький y с острым 
 
 
 þ 
 & # 254; 
 & шип; 
 шип 
 
 
 ÿ 
 & # 255; 
 & yuml; 
 малый y с диэрезисом 
 
.
: элемент Inline Code - веб-технология для разработчиков 

 
 Элемент  HTML     отображает свое содержимое в стиле, предназначенном для обозначения того, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием моноширинного шрифта пользовательского агента по умолчанию. 




 
 Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос. 

 
 Атрибуты 

 
 Этот элемент включает только глобальные атрибуты. 

 
 Пример 

 
 Абзац текста, который включает  <код> : 

 
 
 Функция  selectAll ()  выделяет весь текст в
поле ввода, чтобы пользователь мог, например, скопировать или удалить текст. 
 
 Вывод, сгенерированный этим HTML, выглядит так:
 Банкноты 
 Чтобы представить несколько строк кода, оберните элемент    внутри элемента 
 
 .Элемент    сам по себе представляет только одну фразу кода или строку кода.
 Для селектора  code  можно определить правило CSS, чтобы переопределить начертание шрифта браузера по умолчанию. Установленные пользователем предпочтения могут иметь приоритет над указанным CSS.
 Технические характеристики 
 Совместимость с браузером 
Обновление данных о совместимости на GitHub
 Desktop
 Mobile
 Chrome
 Edge
 Firefox
 Internet Explorer
 Opera
 Safari
 Android webview
 Chrome для Android
 Firefox для Android
 Opera для Android
 Safari на iOS
 Samsung Internet
  код 
 Chrome 
 Полная поддержка
 
 1
 Край 
 Полная поддержка
 
 12
 Firefox 
 Полная поддержка
 
 1
 IE 
 Полная поддержка
 
 Да
 Opera 
 Полная поддержка
 
 Да
 Safari 
 Полная поддержка
 
 Да
 WebView Android 
 Полная поддержка
 
 Да
 Chrome Android 
 Полная поддержка
 
 Да
 Firefox Android 
 Полная поддержка
 
 4
 Опера Android 
 Полная поддержка
 
 Да
 Safari iOS 
 Полная поддержка
 
 Да
 Samsung Интернет Android 
 Полная поддержка
 
 Да
 Условные обозначения 
 
 Полная поддержка
 
 Полная поддержка
 См. Также 
 .