HTML-верстальщик – это человек, который создает разметку веб-страницы с помощью кода и оформляет ее графически, используя таблицу стилей CSS. В своей работе он применяет много инструментов и сервисов. Предлагаем рассмотреть наиболее полезные из них.
Браузеры
Для кросс-браузерной верстки необходимо, чтобы у HTML-верстальщика было большое количество различных браузеров. Конечно, все устанавливать не надо, достаточно иметь по одному из представителей самых популярных движков.
Примеры движков и соответствующих браузеров:
- Blink – Chrome, Opera, Yandex Browser;
- Gecko – Mozilla Firefox;
- Trident – Internet Explorer;
- Webkit – Safari;
- EdgeHTML – Edge.
ПО для автоматизации
При разработке сайта приходится выполнять много однотипных и рутинных задач, отнимающих немало времени. Но существуют инструменты, ускоряющие и оптимизирующие процесс.
Самыми известными сборщиками front-end проекта являются Grunt и Gulp. Они различаются настройкой задач и их выполнением. В Grunt нужно задавать конфигурацию для каждой задачи, в результате чего получается громоздкий и трудно читаемый код. В Gulp же пишется код JavaScript, который в итоге намного меньше и понятнее. В Gulp задачи запускаются параллельно, в Grunt – последовательно.
Для чего они нужны:
- минимизация JavaScript и стилей CSS;
- оптимизация и сжатие изображений;
- добавление вендорных (браузерных) префиксов;
- автоматическая перезагрузка страницы браузера и т.д.
Текстовые редакторы
Это основной инструмент, с которым работает верстальщик. При выборе редактора стоит обращать внимание на наличие в нем возможностей для автоматизации и ускорения написания кода. Основные требования: удобство в работе, функциональность, скорость взаимодействия. Ниже приведена таблица с наиболее популярными текстовыми редакторами.
CSS-препроцессоры
Это надстройки для добавления возможностей, которые ранее не были доступными. Препроцессоры расширяют базовый функционал CSS, упрощают написание кода. Позволяют использовать переменные, примеси, вкладывать селекторы друг в друга. С ними можно писать структурированный и логичный код, ускорить разработку стилей для сайта.
Самыми популярными и известными препроцессорами CSS сегодня являются Sass и Less. Оба имеют примерно равные возможности и функционал, отличаются в основном синтаксисом.
GIT
Это система контроля версий. В ней хранится большое количество вариантов одного и того же файла. То есть можно писать новый код, не меняя предыдущий, что позволяет в нужный момент откатиться на более раннюю версию файла.
Проще говоря, GIT облегчает жизнь разработчикам, дает возможность проанализировать изменения и вклады в общий код.
Pixel Perfect
Плагин для Google Chrome, также существует альтернатива для Firefox.
Суть работы заключается в том, что он накладывает на сверстанный HTML-шаблон полупрозрачную картинку оригинального макета. Таким образом, можно попиксельно сравнить верстку с оригинальным макетом и при необходимости внести правки в код.
FTP-клиенты
Это специальный файловый менеджер для передачи и работы с файлами на хостинге.
Популярные FTP-клиенты:
- FileZilla;
- Cyberduck;
- Transmit.
Это лишь небольшой перечень инструментов для верстальщика. Советуем выбирать конкретные в зависимости от потребностей, удобства и необходимого функционала.