Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>31 окт 2022</li>

3 <li>0</li>

4 </ul><h2>Что должен уметь верстальщик и как прокачать скиллы: инструкция для новичков</h2>

5 Каким должен быть идеальный верстальщик в неидеальном мире? Преподаватель из Hexlet Никита Михайлов рассказал, что учить и к чему стремиться.

6 Иллюстрация: Colowgee для Skillbox Media

7 Журналист, коммерческий автор и редактор. Пишет про IT, цифровой маркетинг и бизнес. Сайт:<a>darovska.com</a>.

8 Стать верстальщиком можно меньше чем за год - но для этого придётся регулярно учиться, хотя бы полчаса в день. Расскажу, какие hard и soft skills нужно развивать и где брать информацию.

9 Верстальщик - это человек, который по дизайнерским макетам собирает веб-страницы. Он использует HTML-код, чтобы всё правильно отображалось в каждом браузере и на каждом устройстве - телефоне, планшете и ноутбуке.

10 Язык HTML позволяет из базовых элементов создать структуру сайта - разделять контент на блоки и добавлять туда такие элементы, как картинки, видео- или аудиофайлы. Ещё HTML помогает создавать интерактивные элементы - например, изменять цвет фона у кнопок при наведении.

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

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

13 Расстрою ленивых - одними HTML и CSS вы не обойдётесь. Полезных технологий и инструментов много, однако есть must have для любого верстальщика. Перечислю всё необходимое.

14 Основы дизайна.Верстальщик должен владеть базовыми концепциями UX/UI. Например, понимать, почему 12-й размер шрифта слишком маленький, а светло-серый цвет на белом фоне смотрится так себе. Для начала можно прочитать книгу Стива Круга про веб-юзабилити "Не заставляйте меня думать". Это бессмертная классика для всех, кто работает с вебом.

15 Кадр: фильм "Волк с Уолл-стрит"Препроцессоры.С препроцессорами вёрстка идёт удобнее и быстрее. Например, c <a>Sass</a>можно использовать переменные и функции в CSS, а с <a>Pug</a> - то же самое, только в HTML. Кроме того, с Pug можно создавать вложенные конструкции без скобок и даже взаимодействовать с JavaScript-кодом.

16 Пример кода на PugСкриншот: предоставлен авторомPug не расширяет язык, но позволяет использовать фишки, которых нет в HTML, например циклы. Представим, что нужно вывести пять карточек товаров на статичном сайте. Способ в лоб: сверстать на HTML одну карточку, скопировать её пять раз и в каждой копии изменить данные. А если карточек не пять, а 100? В Pug можно создать шаблон карточки, чтобы не пришлось выполнять одну и ту же работу много раз.

17 <a>Sass</a>решает аналогичные задачи. Например, у нас есть шаблон кнопки - он представляет собой набор стилей, который наследуют другие элементы button на странице. Без препроцессора нам пришлось бы копировать все стили и создавать отдельный класс для каждой кнопки. А с Sass мы лишь переопределим некоторые свойства класса. Можно даже сделать миксин - такой шаблон, который мы назовём button и будем вызывать каждый раз, когда понадобится очередная кнопка.

18 Пример миксина в SassСкриншот: предоставлен авторомЕщё один пример. Допустим, дизайнер создал 50 иконок с пятью размерами - и для каждой нужно создать отдельный класс. Можно действовать прямолинейно: 50 раз скопировать селектор и во всех копиях поменять название. А можно создать массив в Sass и в нём сделать 50 иконок. В общем, гораздо проще запрограммировать препроцессор, чем писать всё вручную.

19 Bootstrap и другие фреймворки.В <a>Bootstrap</a>все настройки находятся в одном файле _variables.scss, что значительно упрощает код и его понимание. В этом же файле указаны все цвета, параметры закругления кнопок и элементов, шрифты и отступы - их легко установить с помощью одной переменной.

20 Пример кода BootstrapСкриншот: предоставлен авторомРекомендую изучить хотя бы один популярный фреймворк - ведь в коммерческой разработке вы неизбежно с ними столкнётесь. А зная один фреймворк, вы уже относительно быстро разберётесь с другими - как с документацией, так и с кодом. Учтите, что в документации Bootstrap описаны только основные моменты, освоить его по-настоящему можно только в процессе разработки.

21 JavaScript.Как минимум нужно умение подключать сторонние библиотеки или настраивать слайдер. Верстальщик не только работает со стилем, но и создаёт базовые функциональные элементы, проверяет, как ведут себя кнопки и отправляются данные. В проектах я часто пишу что-то несложное на JavaScript: слайдеры, переключатели и простенькую анимацию. Всё это собирается на ванильном JS - и это must have. А если в команде пишут на React, то и его придётся освоить на базовом уровне.

22 Сборщики (например, Webpack).Если научитесь запускать их по инструкции, этого будет достаточно. Начинающему верстальщику не нужно глубоко понимать сборщики, потому что на проекте с ними, как правило, работают фронтендеры.

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

24 Кроме того, вам наверняка пригодятся и дополнительные инструменты:

25 <ul><li>Git - чтобы хранить проекты и управлять ими.</li>

26 <li>Docker - чтобы упаковывать проекты со всеми окружениями и зависимостями (если Docker используют в компании).</li>

27 <li>Командная строка Linux или macOS - чтобы автоматизировать работу.</li>

28 <li>Node.js - чтобы устанавливать, обновлять и удалять npm-пакеты.</li>

29 </ul>Остальное зависит от того, какие технологии используют в конкретной компании. Где-то пишут на PHP, а где-то на Ruby или Python. Например, у нас в Hexlet верстальщики даже иногда копаются в Ruby и строят бизнес-логику под компоненты, которые верстают. Но это скорее исключение, чем правило.

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

31 Верстальщик должен быть эмпатичным. Что бы ни говорили дизайнеры и разработчики, важнее всего то, что увидит пользователь, - именно эту мысль нужно доносить до руководства.

32 Ещё важнее понимать, что такое доступность. Удобно ли пользоваться сайтом слабовидящему или человеку с нарушениями опорно-двигательного аппарата, который работает только с клавиатурой? Нужно упростить взаимодействие с сайтом для пользователей из этого сегмента - продумать, каким будет input и максимально описать label. Бывает, визуально сайт хорош, а скринридер не может объяснить, для чего нужно текстовое поле.

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

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

35 Всё сильно зависит от умений специалиста. Так, начинающий специалист, который знает основы HTML, CSS и JavaScript, может получать от 25 до 60 тысяч рублей в зависимости от региона.

36 Например, вот чего ожидают от верстальщика без опыта работы:

37 Вакансия, где ищут верстальщика без опыта работыСкриншот: HeadHunter / Skillbox MediaСпециалисты с опытом работы от года, уже могут претендовать на зарплату от 70 до 130 тысяч рублей. Такой широкий диапазон объясняется разницей в квалификации и наборе технологий, которыми должны обладать кандидаты. Как правило, от мидл-специалиста ждут, что он разбирается в JavaScript-фреймворках, умеет работать с препроцессором, сборщиками и знает стандарты веб-вёрстки:

38 Платят от 70 до 130 тысяч рублей и требуют соответствующеСкриншот: HeadHunter / Skillbox MediaSenior-специалисты получают гораздо больше - от 100 до 200 тысяч рублей. От таких верстальщиков работодатели ожидают, что они умеют писать хороший код на JavaScript и отлично знают Vue, React или Angular. Поэтому часто опытные верстальщики переходят во Frontend- или Fullstack-разработку.

39 Вот чем занимаются и что знают Senior-разработчики:

40 Вакансия Senior-frontend-разработчика на ReactСкриншот: HeadHunter / Skillbox MediaУчебных материалов и ресурсов по вёрстке сейчас море. У меня есть несколько любимчиков, которых я рекомендую всем начинающим.

41 Книги.Тут советую быть осторожнее, потому что значительная часть книг про HTML и CSS - на английском языке. И пока их переведут, стандарты уже поменяются. Но есть хорошие книги - сборники рецептов. Например, "CSS для профи" Кита Гранта или "Секреты CSS. Идеальные решения ежедневных задач" Лии Веру. Лучше проверять примеры, потому что стандарты меняются часто и некоторые рецепты уже могут устареть.

42 Сайты.Есть прекрасный портал<a>CSS-Tricks</a>, на котором выкладывают сборники рецептов и примеры кода. Также можно посмотреть авторов на <a>CodePen</a> - там публикуют код и примеры вёрстки, решения задач, организовывают конкурсы по вёрстке.

43 На YouTube есть классный канал<a>keyframers</a>со стримами по анимации. Мы тоже проводим вебинары и публикуем видеоуроки<a>у себя на канале</a>. Некоторые из них веду я. Ещё советую<a>сайт и подкаст Вадима Макеева</a>и <a>CSS-live</a>с переводами актуальных статей.

44 Курсы.Основная ошибка новичков при самостоятельном обучении - идти за новым, пропуская базу. В результате они знают, что такое гриды, но не понимают, что такое потоки документов, как они друг на друга накладываются и как этот порядок изменить. Особенно сильно это мешает на практике, в коммерческой разработке.

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

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

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

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

49 Кадр: фильм "История игрушек"Учебный материал лучше разбивать на небольшие темы, а сразу же после изучения каждой темы надо выполнять практические задания. И делать это лучше ежедневно, регулярно, а не раз в неделю по десять часов подряд.

50 И наконец, развею один большой миф. Некоторые ребята говорят, что верстать - это просто. Я соглашусь с этим утверждением, но только если речь о начальном уровне. Чем дальше, тем сложнее. Я в IT больше 10 лет и не могу сказать, что идеально знаю вёрстку. До сих пор, читая статьи и переводы, я узнаю что-то новое. Так что процесс обучения бесконечен.

51 <a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>