Профессия Верстальщик

Верстальщик - это человек, который превращает нарисованный дизайнером макет в настоящую веб-страницу. Он пишет код на HTML и CSS, чтобы все элементы (текст, картинки, кнопки, таблицы) отображались в браузере так, как задумал дизайнер. По сути, верстальщик создаёт «скелет» и «внешность» сайта, но пока без сложной логики и анимаций.

Инструменты

• Языки HTML, CSS
• Препроцессоры: LESS, SASS
• Фреймворки: Bootstrap, Tailwind, Materialize
• Методология: БЭМ
• Git
• Сборщики: Gulp, Webpack, Vite
• Графические редакторы: Figma, Photoshop
• Редактор кода: VSCode, Sublime, Notepad++

Роадмэп

Чтобы стать верстальщиком, нужно пройти такой путь:

1. Выучить HTML - освоить все основные теги, семантику, структуру страницы.
2. Выучить CSS - работа с цветами, шрифтами, блочной моделью, позиционированием, флексами и гридами.
3. Освоить адаптивную вёрстку - медиазапросы, мобильные версии, резиновая вёрстка.
4. Изучить препроцессоры - LESS или SASS (ускоряют написание кода).
5. Освоить CSS-фреймворки - Bootstrap или Tailwind (чтобы верстать быстрее).
6. Изучить методологию БЭМ - чтобы код был чистым и понятным.
7. Научиться работать с Figma - открывать макеты, выгружать картинки, смотреть размеры и отступы.
8. Освоить Git - чтобы сохранять версии кода и работать в команде.
9. Собрать портфолио - 3-5 свёрстанных макетов.
10. Начать искать работу или заказы на фрилансе.

Типичный день

Утро начинается с проверки почты и задач в Trello или Jira. Дизайнер скинул в Figma новый макет - нужно сверстать главную страницу для интернет-магазина. Верстальщик открывает макет, смотрит, какие там блоки, и начинает писать HTML-структуру. Затем добавляет CSS, чтобы всё было красиво: цвета, отступы, шрифты. Проверяет, как выглядит страница на телефоне - адаптирует под мобилки. После обеда правит баги, которые нашёл тестировщик: где-то съехала кнопка, где-то текст не помещается. К вечеру отправляет готовую страницу на проверку тимлиду.

Сложности

• Приходится добиваться пиксель-перфект - чтобы в браузере было точь-в-точь как в макете.
• Нужно проверять отображение во всех браузерах (Chrome, Firefox, Safari, Edge) - они могут по-разному показывать один и тот же код.
• Постоянно следить за тем, чтобы сайт корректно отображался на всех устройствах: от больших мониторов до маленьких телефонов.
• Дизайнеры могут менять макеты по 10 раз, и всё приходится переделывать.
• Иногда задачи приходят с горящими сроками - нужно верстать быстро и качественно одновременно.
• Заказчики или менеджеры могут не понимать, почему нельзя просто «передвинуть блок чуть-чуть» - это может сломать всю вёрстку.

Вход

Минимальный порог входа - знание основ HTML и CSS. Достаточно понимать теги, уметь работать с блоками, флексами, делать простые макеты. Остальному учат на практике.

Рост

Из верстальщика можно расти в такие профессии:

• Frontend-разработчик - если освоить JavaScript и фреймворки.
• Fullstack-разработчик - если добавить к фронтенду бэкенд-язык.
• UI/UX-дизайнер - если уйти в сторону дизайна интерфейсов.
• Тимлид верстальщиков - если прокачать управленческие навыки.
• Специалист по доступности - если углубиться в семантическую вёрстку и WCAG-стандарты.