Основы HTML-верстки. Инструменты верстальщика

Приветствую вас! Давайте поговорим сегодня о том, без чего работа HTML-верстальщика невозможна. А именно об инструментах верстальщика. Инструменты — это программы, которыми верстальщик пользуется при работе каждый день. Давайте разберем их поподробнее.

Браузеры

У хорошего верстальщика должно быть установлено много браузеров. Конечно, не нужно бежать и устанавливать все существующие браузеры. Достаточно установить по одному представителю основных браузерных движков. Браузерный движок — это специальная библиотека, которая отвечает за три составляющих: загрузка сайта (обмен сообщениями), отрисовка (HTML, CSS) и работа JavaScript. У меня установлены FireFox (пользуюсь как браузером по умолчанию), Google Chrome, Edge и Safari на виртуальной MacOs. Для меня этого хватает для работы и проверки кроссбраузерности верстки. Больше всех проблем, как ни странно, в свое время доставил мне браузер Safari. Как оказалось, что он очень капризен к коду и нужно очень внимательно смотреть на то, как он отрисовывает адаптивные версии.

Встроенные инструменты разработчика

Их можно посмотреть в любом браузере. В большинстве они открываются по нажатию на клавишу F12. Это очень классный инструмент, позволяющий смотреть структуру документа, исследовать элементы, видеть, где они находятся на странице, смотреть, какие стили применялись к этим элементам, менять прямо в браузере эти стили. В общем — очень удобная вещь, пользуйтесь обязательно.

FireFox

Google Chrome

Microsoft Edge

Графический редактор

Большинство макетов рисуется дизайнерами в PhotoShop в формате PSD. Поэтому, как вы можете догадаться, умение работать в нем — это критический навык. Следующий урок будет как раз посвящен основам работы в PhotoShop для верстальщиков. Конечно, требования по его знанию не так высоки, как для дизайнеров, но разбираться в его инструментах надо.

Для MacOs есть очень хороший графический редактор — Sketch. Если PhotoShop в первую очередь разрабатывался для работы с изображениями, то Sketch изначально был придуман для веб-разработки. Он намного упрощает жизнь как дизайнерам, так и верстальщикам. Это одна из причин, почему я хочу в скором времени “пересесть” на Mac.

Если вы работаете с дизайнером, который делает макеты в Sketch, а у вас его нет, то можно пользоваться либо редактором Avacode, либо приложением Zeplin. Они могут читать как формат PSD, так и формат Sketch. Для этого просто надо дизайнеру установить расширение на свой графический редактор. Avоcode и Zeplin значительно упрощают HTML-верстальщику. Они показывают размер элемента, расстояния между элементами, цвета и простой CSS код. Это позволяет сэкономить некоторое время. Я знаю много разработчиков, которые с радостью “пересели” на эти инструменты и возвращаться не собираются. Но надо понимать, что Avоcode и Zeplin никогда не напишут нормальный валидный код. Поэтому в них можно только посмотреть некоторые значения.

Редакторы кода

Для HTML-верстки подойдет любой текстовый редактор с подсветкой кода. Примеры текстовых редакторов:

Atom
Sublime Text
Brackets
Notepad++
Vim

В интернете много сравнительных статей по редакторам (например этот), в которых указаны их плюсы и минусы. Попробуйте разные и выберете тот, который вам понравится больше всего. Мне больше всего приглянулся Atom.

FTP-клиенты

Файловые менеджеры нужны при работе с хостингом. Примеры файловых менеджеров:

WinScp
CyberDuck
FileZilla

Клиенты систем контроля версий

Про систему контроля версий поговорим отдельно в одном из следующих уроков. Тема очень обширная и в чем то сложная. Я постараюсь как можно более понятно рассказать вам что такое GIT, как он работает и для чего нужны клиенты.

Вот такой краткий обзор получился получился по инструментам верстальщика. Задавайте вопросы в комментарии, с радостью отвечу.