Документ представляет собой список из 10 полезных инструментов для HTML-верстки, включая текстовые редакторы, генераторы CSS и инструменты для отладки. В числе упомянутых инструментов находятся Notepad++, Sublime Text, Firebug и Perfect Pixel, которые облегчают процесс разработки и редактирования HTML-кода. Также описываются функции каждого инструмента и ссылки на их ресурсы.

1. 10 инструментов HTML-верстки
ПОДГОТОВЛЕНО:

2. «Нетология» подобрала 10 полезных инструментов,
которые пригодятся при верстке HTML: от
текстовых редакторов до генераторов CSS.
ОТ СОСТАВИТЕЛЕЙ

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

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

5. SUBLIME
TEXT

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

7. FIREBUG

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

9. PERFECT
PIXEL

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

11. WINMERGE

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

13. WINLESS

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

15. CSS3
GENERATOR

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

17. ULTIMATE
CSS

18. Сервис для генерации градиентов. Результат сразу
отображается в боковой панели в виде кода.
Ultimate CSS Gradient
Generator
colorzilla.com/gradient-editor

19. UI
PARADE

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

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

22. БОЛЬШЕ ЦЕННЫХ ПОДБОРОК
В НАШЕМ БЛОГЕ
15 неочевидных
инструментов для
дизайнеров
Фестиваль 404: лучшие
лекции о маркетинге,
менеджменте и дизайне
7 сервисов, расширяющих
возможности Instagram

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

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