Блог Нетологии

Советы и обзоры для новых высот в карьере, бизнесе и жизни

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

Notepad++

notepad-plus-plus.org

Notepad++

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

Sublime Text

sublimetext.com

Sublime Text

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

Firebug

getfirebug.com

Firebug

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

PerfectPixel

chrome.google.com/webstore

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

WinMerge

winmerge.org

WinMerge

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

WinLess

winless.org

WinLess

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

CSS3 Generator

css3generator.com

CSS3 Generator

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

Ultimate CSS Gradient Generator

colorzilla.com/gradient-editor

Ultimate CSS Gradient Generator

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

Livetools Ui Parade

livetools.uiparade.com

Livetools Ui Parade

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

Page Ruler

chrome.google.com

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

Об авторе

Павел Федоров,
редактор блога «Нетологии»

comments powered by Disqus

Онлайн-университет

Получите 9 профессий, востребованных рынком. От мечты до диплома за 2 месяца.

Присоединяйтесь к нам в соцсетях!

Сообщите о предложении или проблеме