10 инструментов HTML-верстки

ПОДГОТОВЛЕНО:

«Нетология» подобрала 10 полезных инструментов, которые пригодятся при верстке HTML: от текстовых редакторов до генераторов CSS.

ОТ СОСТАВИТЕЛЕЙ

11 книг-бестселлеров по маркетингу и менеджеру в 2014 году Нетология

NOTEPAD ++

Бесплатный текстовый редактор по лицензии GNU для Windows, который подсвечивает синтаксис множества языков программирования, а также HTML-разметки. Умеет сворачивать блоки кода, сравнивать файлы, выделять текст блоками. Работает с большим количество форматов файлов, поддерживает внешние плагины.

NOTEPAD ++ notepad-plus-plus.org

SUBLIME TEXT

Кроссплатформенный редактор, схожий с Notepad++, но обладающий множеством дополнительных функций. Подсвечивает синтаксис, автоматически сохраняет изменения в файлах, поддерживает 27 языков программирования, плагины и макросы на Python. Программа умеет запускать код без переключения в командную строку. Приложение доступно в версиях для Windows, OS X и Linux, лицензия стоит 70 долларов.

SUBLIME TEXT sublimetext.com

FIREBUG

Расширение для браузера Mozilla Firefox. Консоль и отладчик JavaScript, CSS и HTML, определяет часть кода, которая вызвала ошибку. Умеет редактировать код на стороне клиента в браузере.

FIREBUG getfirebug.com

PERFECT PIXEL

Расширение для Google Chrome, которое накладывает на верстаемый сайт полупрозрачный макет. Оба изображения можно попиксельно сравнить и на ходу внести результат изменений кода. Поддерживает несколько слоев и их гибкую настройку, а также функцию блокировки, при которой все элементы на странице становятся кликабельными.

PERFECTPIXEL chrome.google.com/webstore

WINMERGE

Удобный бесплатный инструмент под Windows для сравнения разных версий файлов, в том числе макетов верстки. Различия отображаются в визуальной текстовой форме, из которой видно, что изменилось в проекте в новой версии.

WINMERGE winmerge.org

WINLESS

Бесплатная Windows-программа для работы с препроцессором LESS. Он представляет из себя надстройку над CSS с дополнительными динамическими свойствами. WinLess поможет конвертировать LESS в CSS. Программа автоматически сканирует выбранную папку и выбирает файлы, которые содержат нужный код.

WINLESS winless.org

CSS3 GENERATOR

Минималистичный инструмент для генерации CSS-кода под множество предустановленных задач.

CSS3 GENERATOR css3generator.com

ULTIMATE CSS

Сервис для генерации градиентов. Результат сразу отображается в боковой панели в виде кода.

Ultimate CSS Gradient Generator colorzilla.com/gradient-editor

UI PARADE

Подборка из четырех бесплатных генераторов элементов для макета: кнопок, форм, иконок и ленточек. Результат можно выгрузить в виде кода HTML или CSS.

Livetools Ui Parade livetools.uiparade.com

Виртуальная линейка. Подскажет размеры любого элемента на сайте.

Page Ruler chrome.google.com

БОЛЬШЕ ЦЕННЫХ ПОДБОРОК В НАШЕМ БЛОГЕ

15 неочевидных инструментов для дизайнеров

Фестиваль 404: лучшие лекции о маркетинге, менеджменте и дизайне

7 сервисов, расширяющих возможности Instagram

СПАСИБО ЗА ВНИМАНИЕ «Нетология» — маркетинг и менеджмент от практиков Рунета

УЗНАТЬ БОЛЬШЕ

ПОНРАВИЛАСЬ ПРЕЗЕНТАЦИЯ? ПОДЕЛИТЕСЬ!