Верстальщик — это разработчик, который превращает макет, созданный дизайнером, в работающую веб-страницу или приложение. Обычно такие специалисты пишут код на HTML и CSS, но для создания интерактивных элементов могут также использовать JavaScript.
Профессия специалиста по вёрстке появилась задолго до появления компьютеров. В печатном деле так называли работников, которые компоновали страницы газет, журналов и книг и передавали их в типографию. В начале XX века для этого использовали наборные кассы — металлические буквы, которые вручную складывали в абзацы и оттискивали на бумаге. В конце XX века появились компьютерные программы для вёрстки книг, например PageMaker.
С течением времени понятие вёрстки из области печатного дела перешло в цифровой мир. В 1991 году, когда британский учёный Тим Бернерс-Ли опубликовал первую веб-страницу, написанную на языке разметки HTML, началась история развития профессии веб-верстальщика.
Изначально HTML использовался только в научной среде для обмена документами внутри ЦЕРНа. Однако с появлением на веб-страницах большего количества элементов, таких как шрифты, изображения и схемы, стало очевидно, что одного HTML недостаточно. В 1994 году Хокон Виум Ли, коллега Тима Бернерса-Ли, предложил использовать CSS — язык стилей веб-страниц. Это позволило отделить структуру страницы от описания её внешнего вида.
Благодаря CSS стало проще стилизовать документы, и веб-технологии привлекли внимание за пределами ЦЕРНа. В 1995 году появился JavaScript, а стандарты HTML и CSS начали регулярно обновляться. Вёрстка веб-страниц стала отдельной профессией. В 2000-х годах она переживала период активного развития, и на рынке было особенно много вакансий для веб-верстальщиков.
С каждым годом задачи становились всё сложнее, и для создания сайтов уже было недостаточно знать HTML и CSS. К навыкам веб-разработчика добавились JavaScript, умение работать с фреймворками и API-запросами. Сложные задачи были переложены на плечи фронтенд-разработчиков, которые стали настоящими звёздами веб-разработки, а верстальщики постепенно отошли на второй план.
Сейчас верстальщиками называют специалистов, которые:
- работают в издательствах и типографиях, подготавливая продукцию к печати;
- разрабатывают веб-сайты;
- собирают статьи или письма для email-рассылок в панели администратора сайта.
Приёмник Frsky XM+.
Разработка макета. Специалист по вёрстке получает от дизайнера макет, как правило, в Figma, и проверяет, соответствует ли дизайн техническому заданию. Если всё в порядке, он экспортирует из макета иллюстрации, фотографии, иконки и шрифты. После экспорта эти элементы можно будет использовать на веб-странице.
Специалист по вёрстке создаёт структуру веб-страницы, используя HTML, и применяет стили с помощью CSS. Он также адаптирует страницы для мобильных устройств, чтобы они были удобны для просмотра на экранах смартфонов. Кроме того, он следит за тем, чтобы сайты корректно отображались во всех популярных браузерах.
Оптимизация
Веб-страница должна загружаться быстро, даже если у пользователя медленный интернет. Для этого специалисты по вёрстке проводят оптимизацию: сжимают изображения, упрощают сложный код и используют «ленивую» загрузку — метод, при котором загружаются только те элементы страницы, которые видны пользователю.
Тестирование
Обычно полноценное тестирование проводят специалисты по контролю качества (QA). Однако веб-вёрстка также должен убедиться, что веб-страница выглядит и работает так, как задумано.
HTML-вёрстка
Специалист по вёрстке должен в полной мере владеть языком разметки HTML. Необходимо не только понимать структуру страниц, но и уметь работать с их смыслом. Это позволит создавать сайты, которые будут лучше индексироваться поисковыми системами.
Для работы с семантикой в HTML есть специальные теги: <header>, <article>, <section>, <footer>.
Также важно уметь работать с адаптивностью и кроссбраузерностью. Это позволит создавать сайты, которые будут корректно отображаться в любых браузерах и на любых устройствах.
CSS
CSS позволяет стилизовать сайты: настраивать цвета, применять шрифты и создавать простые анимации. Верстальщику необходимо уметь:
- работать с селекторами;
- применять стили к тексту, изображениям и другим элементам;
- использовать Flexbox и Grid для выравнивания контента.
От верстальщика не требуется углублённых знаний JavaScript, но иногда приходится использовать его для создания интерактивных элементов. Необходимо уметь создавать выпадающие списки, переключатели, модальные окна и всплывающие уведомления. Для этого достаточно базовых знаний JavaScript: событий, условий и работы с элементами DOM.
Препроцессоры
Препроцессоры — это инструменты, которые расширяют возможности CSS. Они позволяют использовать переменные, функции и вложенные объекты. Наиболее популярные препроцессоры — Sass, Less и Stylus.
Системы контроля версий
Верстальщики обычно работают в команде и делятся кодом с разработчиками. Для этого используются системы контроля версий, например Git. Необходимо уметь синхронизировать изменения с общим хранилищем, управлять ветками и разрешать конфликты слияния.
Инструменты для сборки и автоматизации
Верстальщики часто используют инструменты для сборки и автоматизации, такие как Gulp или Grunt. Они помогают автоматизировать процессы сборки и тестирования, что экономит время и упрощает работу.
Инструменты для веб-разработки, которые собирают файлы HTML, CSS и JavaScript, объединяют их, оптимизируют и создают файлы для загрузки на сервер, называются веб-сборщиками. Они ускоряют процесс разработки и позволяют оптимизировать сложные сайты.
Среди наиболее популярных веб-сборщиков можно выделить Webpack, Gulp и Parcel.
Работа с графикой
Верстальщик должен уметь экспортировать необходимые элементы из макетов в Figma, Photoshop, Sketch и других программах. Для начала можно освоить Figma, который является одним из самых популярных инструментов среди веб-дизайнеров.