localFont — конвертирование шрифтов в base64

Сервис, которому Вы скармливаете шрифт в формате .woff, .woff2 или .ttf, а он возвращает CSS с закодированным шрифтом и JS, который будет кешировать CSS-файл с кодированным шрифтом в localStorage браузера посетителя. Этим достигается ультрабыстрая «подгрузка» подключенного шрифта при любом посещении страницы кроме самого первого.

http://jaicab.com/localFont/
шрифт конвертер base64 localStorage подключение

JS bin — песочница HTML, CSS, JS

Песочница HTML, CSS, JS. Встроенный Emmet, возможность быстро подключить Autoprefixer, какой-либо фреймворк (уйма всяких, в т.ч. jQuery, Bootstrap).

http://jsbin.com/
autoprefixer bootstrap emmet jquery код песочница фреймворк

DPI love — справочник по свойствам экранов различных устройств

Удобный справочник по свойствам экранов (размер, плотность пикселей, множитель) различных устройств. Есть удобный поиск и калькулятор. На данный момент (ноябрь 2014) информация актуальная.

http://dpi.lv/
вьюпорт монитор пиксель планшет плотность разрешение справка справочник телефон устройство экран

ZorroSVG — преобразование PNG24 в SVG

Сервис преобразует PNG24 с прозрачностью в SVG, представляющий собой JPEG и PNG-маску прозрачности, что во многих случаях всерьез экономит размер файла. Экономия не достигается только на маленьких файлах и картинках с малым количеством деталей.

http://quasimondo.com/ZorroSVG/
jpeg png svg конвертер маска оптимизация прозрачность сервис сжатие экономия

Версии Internet Explorer (виртуальные машины)

Ссылки на легальное скачивание виртуальных машин с Internet Explorer. Виртуализация под Windows, Mac и Linux. Есть бесплатные платформы виртуализации.

Самые новые и самые старые версии ненавистного ишака.

https://www.modern.ie/ru-ru/virtualization-tools#downloads
Internet Explorer браузер виртуальная машина почти релиз

Фоновый шум дождя для работы

Простейший сервис, выдающий шум дождя и/или грозы как фоновый звук для работы. Можно поставить обратный таймер «до перерыва».

http://raining.fm
гроза дождь организация работа таймер фон шум

Gridlover — сервис для подбора размеров в типографике

Подбирает хорошие сочетания размеров нескольких уровней заголовков и параграфов: размер, отступы, интерлиньяж. Работает с px, em, rem. Генерирует CSS, SCSS, LESS, Stylus.

http://www.gridlover.net/app/
вертикальный ритм гарнитура генератор заголовок интерлиньяж отступ параграф размер типографика шрифт

Siteliner

SEO-анализ сайта: поиск битых ссылок, дублирующегося контента и т.п. Бесплатно анализирует 250 URL.

http://www.siteliner.com/
seo анализ битая ссылка

CSStriggers

Информация о CSS свойствах: что они делают, как влияют на страницу. Есть удобный поиск.

http://csstriggers.com/
css свойство справочник

Типограф Муравьёва

Инструмент для форматирования текста с использованием норм, правил и специфики русского языка и экранной типографики. Его можно подключать ко всем редакторам текста, движкам и блогам.

http://mdash.ru/
правило текст типограф форматирование

Type light — редактор шрифтов

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

http://www.cr8software.net/typelight.html
ttf редактор шрифт

Parfait project — загружаем PSD, получаем CSS слоёв прямо в браузере

Новый сервис от компании Adobe. Позволяет получить CSS-сведения о слоях из PSD-макета прямо в браузере.

Если (пока?) этот сервис не станет платным, Photoshop верстальщику может в некоторых случаях и не понадобиться.

https://projectparfait.adobe.com
css html psd верстка макет

Магия CSS

Короткий учебный курс по CSS со множеством примеров и ссылок на объясняющие и вдохновляющие статьи.

http://adamschwartz.co/magic-of-css/
css обучение стиль

AWWWards — рейтинг-галерея сайтов

Сайт с рейтингом проектов (сайтов) крупных студий. Каталогизация по типу проектов, технологиям, сферам разработки.

Рекомендован для слежения за тенденциями в веб-разработке.

http://www.awwwards.com/
дизайн конкурс лучший разработка рейтинг сайт тенденция типографика

Генератор спрайтов

Хороший генератор спрайтов. Выдает картинку-спрайт, на которой сшиваемые изображения размещены компактно (умеет и по горизонтали/вертикали). Стили умеет выдавать в CSS и в LESS.

http://draeton.github.io/stitches/
генератор спрайт

Transparenttextures — коллекция фоновых текстур

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

На странице есть примитивный генератор: задаем фоновый цвет — получаем CSS-код (адрес изображения-паттерна берется с сервиса).

http://www.transparenttextures.com/
генератор прозрачность текстура фон

Enjoy CSS — мощный визуальный генератор CSS

Мощный визуальный генератор CSS. Генерирует стили текстовых полей, блоков, кнопок. Выдает красивый оптимальный код, для которого можно выбрать кроссбраузерность (!).

http://enjoycss.com/
CSS генератор градиент кнопка позиционирование прозрачность текст тень трансформация цвет

Autoprefixer он-лайн

Демонстрация работы (и одновременно механизм для быстрого преобразования правил) Autoprefixer — инструмента автоматического добавления векторных префиксов, преобразующего CSS на основании данных с Can I Use.

http://jsfiddle.net/simevidas/udyTs/show/light/
автоподстановка вендорный префикс конвертер

Timty — простой учёт времени

Простейший он-лайн сервис для учёта времени, затрачиваемого на проект. Полезен фрилансерам.

http://timty.ru
время минута период слежение тайм-менеждмент учет

Список ссылок на фотобанки, шрифты, текстуры, кисти

Огромный список ссылок на бесплатные и платные фотобанки, видеобанки, векторные клипарты, шрифты, логотипы, кисти для Photoshop, постеры, иконки, музыку/звуки.

http://www.bluevertigo.com.ar/
бесплатно биржа вектор иконка кисть логотип ссылка фотография фотосток шрифт

Typecast — тест-драйв шрифтов

Сервис для подбора шрифтового оформления текстов. Мнодество шрифтов (с Google, Fonts.com, MyFonts.com и прочих, всего — более 28 тысяч). Есть несколько шаблонов текстовых фрагментов (заголовок, автор, лид, текст статьи с цитатами и пр.) для экспериментов.

Результат можно получить в PNG или скачать архив с html+css.

Единственный минус: при выборе шрифтов нет фильтров по диапазону символов, то есть, не получится показать только те шрифты, в которых есть кириллица.

http://typecast.com
подбор сервис типографика шрифт

Trackduck — визуальное рецензирование страниц

Сервис позволяет визуально оценивать участки страниц сайтов: выделяем участок страницы, комментируем выделенное.

Идеально подходит для получения отзывов от клиентов.

http://www.trackduck.com/
макет обмен отзыв рецензия сообщения страница

Иллюстрация разницы «адаптивности» и «отзывчивости»

Страница-демка, показывающая разницу между статичным, адаптивным, «резиновым» и отзывчивым сверстанным макетом. Отлично иллюстрирует спорность существования отдельных терминов для адаптивности и отзывчивости.

http://liquidapsive.com/
адаптивность верстка отзывчивость резина

Подборка минималистичных фреймворков для веб-разработки

Подборка минималистичных фреймворков для веб-разработки на множестве языков: CSS, C, JS, Go, Haskell, Java, JavaScript, Lua, Node.js, Perl, PHP. Python, Ruby, Scala, .NET.

https://github.com/neiesc/ListOfMinimalistFrameworks
.NET C CSS Go Haskell Java JavaScript JS Lua Node.js Perl PHP. Python Ruby Scala минимализм фреймворк

PicPick — набор экранных утилит

Определитель цвета, линейка, измеритель расстояний, углов и небольшой графический редактор в одном флаконе. Есть русскоязычный вариант интерфейса.

Пример использования: Ctrl + F1 — цветовая пипетка; Ctrl + F2 — перекрестие; Ctrl + F3 — лупа.

http://www.picpick.org/en/
colorpicker графика измерение линейка лупа пипетка угол экран

Monosnap — программа для снятия скриншотов и быстрой их загрузки в сеть

Создает скриншоты выделенной области или всего экрана, позволяет их подписывать (формы, стрелки, размытие и пр.) и загружать в интернет (на свои сервера, в Facebook, Twitter, Dropbox, по FTP и т.п. Кроссплатформенная, полностью бесплатная.

Сделанный скриншот позволяет открыть в произвольном графическом редакторе.

http://monosnap.com/welcome
аннотация картинка скриншот

KeePass — программа для хранения паролей

Кроссплатформенная утилита для хранения паролей. Портируемая. Отличный выбор для веб-разработчиков (множество паролей к хостингам, сервисам и пр.). С этой программой запомнить нужно будет только пароль к парольной базе. Сама парольная база шифруется надежно. Множество настроек (в том числе очистка буфера обмена и автонабор).

http://keepass.info/
безопасность пароль

СolourCode — быстрый подбор цвета

Сервис для подбора цветов. Первоначально во вьюпорте один цвет. Перемещая курсор по вертикали меняем яркость, по горизонтали — тон. Клик — фиксация выбранного цвета. Нажимаем на «+» — добавление цвета. Есть несколько «предустановок»: монохромные цвета и несколько вариантов сочетаний по цветовому кругу.

Получить выбранный цвет можно в любой цветовой модели. Экспортировать наборы цветов можно в SASS, LESS и PNG.

http://colourco.de/
less sass выбор цвет

Секреты браузерных инструментов разработчика (англ.)

Англоязычный материал, описывающий секреты инструментов разработчика, встроенных в браузеры. Местами — в стиле Капитана Очевидность, местами — полезно. Есть фильтрация по браузерам.

http://devtoolsecrets.com/
инструменты разработчика секрет

Похожие HTML-сущности

Сервис поиска похожих HTML_сущностей. Введите в строке поиска знак «больше» или кавычку.

Выдает список похожих символов с их подками и HTML-представлением

http://leftlogic.com/projects/entity-lookup
html символ сущность текст

CSSflow — сниппеты верстки

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

http://www.cssflow.com/snippets
css html сниппет

SVGeneration — генератор изображений (фоновых)

Генерирует (на основе большого количества заготовок) фоновые изображения в формате SVG. Каждая из заготовок имеет свои настройки (цвета, частота повтора текстуры и т.п.). Можно скачать файл или скопировать base64-представление изображения.

http://www.svgeneration.com/
svg вектор генератор изображения картинка фон

HTMLAcademy — Интерактивные онлайн-курсы по HTML и CSS

Интерактивные онлайн-курсы по HTML и CSS. Огромное количество бесплатных курсов! Регулярно проводятся «Интенсивы» — действительно интенсивные он-лайн занятия, длительностью в 1 месяц.

Автор htmllinks.ru является одним из кураторов на Интенсивах.

http://htmlacademy.ru/
css html обучение он-лайн удаленное

EpicSkills — школа интернет-технологий

Школа в Санкт-Петербурге, обучающая созданию сайтов (HTML, CSS, jQuery, PHP, Wordpress), приложений и веб-дизайну.

Автор htmllinks.ru ведет несколько занятий в группах «вёрстка» и «веб-дизайн» в этой школе.

http://epixx.ru/
CSS HTML jQuery PHP Wordpress обучение

End Page Box — показ сообщений по мере прокрутки (плагин jQuery)

Небольшой и простой в использовании плагин, показывающий сообщения по мере прокрутки страницы (отталкивается от процента высоты). Несколько способов появления сообщения, анимация.

https://github.com/peachananr/endpage-box
jquery плагин показ прокрутка скролл сообщение

DOM Monster — закладка, тестирующая оптимальность верстки

Сервис-закладка. Добавляем в панель закладок, нажимаем на исследуемой странице — получаем данные о DOM и рекомендации по его оптимизации. В консоли инспектора получаем детализированный отчет.

http://mir.aculo.us/dom-monster/
dom закладка оптимальность тестирование

SpriteCow — ручная обработка спрайта

Сервис ручной обработки картинки-спрайта: загружаем спрайт, кликаем по элементу, сервис анализирует картинку и сам задает габариты элемента, в нижней части видим CSS для указанного элемента спрайта. Работает как с прозрачным фоном спрайта, так и с любым одноцветным. Неудобно то, что стили приходится получать по одному и то, что каждый элемент обязательно должен отстоять от других, минимум, на 1 пиксель.

http://www.spritecow.com/
css генератор спрайт

Instantsprite — генератор спрайтов

Генератор спрайтов. Создает отлично оптимизированное изображение PNG или GIF (горизонтальное, вертикальное, диагональное), можно поменять элементы местами или удалить некоторые. Сразу виден CSS, который можно дополнить префиксами и суффиксами классов. Картинку спрайта генерирует на лету, можно скопировать base64-представление спрайта. Нет скачивания архива с результатом.

http://instantsprite.com/
css генератор спрайт

scrollReveal.js — анимированный показ элементов по мере прокрутки (плагин jQuery)

Показывает по мере скролла элементы на странице. Анимация средствами CSS3 (IE10+). Простой синтаксис определения анимации, направления, длительности (через data-атрибут).

https://github.com/julianlloyd/scrollReveal.js
jquery анимация плагин прокрутка скролл

Pictonic — генератор иконочных шрифтов

362 иконки бесплатно, остальные 2725 — по 0,59$ за штуку. Удобный поиск и категоризация. Выдает фийлы иконочного шрифта в форматах svg, svgz, eot, woff и ttf, стили в форматах CSS, LESS и SASS, каждую иконку в отдельном SVG и PNG-файле (размер от 16 до 512). Оплата только PayPal.

https://pictonic.co/download
генератор иконка платно шрифт

My-mind — интеллект-карта он-лайн

Интеллект-карта. Проста, бесплатна. Можно сохранить на Google Drive, в хранилище браузера или в файл (несколько файловых форматов, в т.ч. FreeMind, MindMup).

Есть настройки форм узлов, цвета связей, лэйблы «ok» и «no». Нет настроек размера текста.

http://my-mind.github.io/
mind map интеллект-карта

We Love Icon Fonts — хостинг иконочных шрифтов (только для эскизов!)

Позволяет подключить к странице иконочные шрифты, лежащие на сервисе. Шрифты подключаются целиком, не конфликтуют в стилях.

Использовать только для эскизов и примеров в HTML-песочницах, не для рабочих проектов.

http://weloveiconfonts.com/
иконка подключить хостинг шрифт

Все о вертикальном выравнивании (англ.)

Статья-исследование о вертикальном выравнивании: все возможные способы, их кроссбраузерность, возможность адаптивности, переполнения, произвольной высоты выравниваемого блока. Все — с примерами.

http://codepen.io/shshaw/full/gEiDt
вертикальное выравнивание

MarvelAPP — интерактивные прототипы из PSD

Сервис, позволяющий делать интерактивные прототипы из нескольких PSD. Только переходы между макетами (создаем интерактивную область на макете, задаем макет для перехода и тип эффекта перехода). Работает с файлами с DropBox, автоматически синхронизируется с ним.

https://marvelapp.com/
dropbox интерактивность прототип

Checkmycolours — проверка используемых на странице цветов

Сервис проверят контрастность (яркостную и цветовую) используемых на HTML-странице цветов. Анализирует все селекторы страницы, показывает значения цвета в HEX, пример, показатели контраста.

http://www.checkmycolours.com/
контраст проверка тестирование цвет

WhatFont — закладка для выяснения шрифта на странице

Сервис-закладка: добавляем в панель закладок, нажимаем на произвольной странице, по наведению на текстовые элементы видим использованный шрифт, по клику — детализацию (как прописано правило font-face, размер, интерлиньяж).

http://chengyinliu.com/whatfont.html
интерлиньяж определить шрифт размер текст шрифт

Timer Tab — вкладка-таймер

Страница, на которой можно задать временной период после которого прозвучит сигнал, поставить «будильник» или запустить секундомер. Простейший и легчайший способ учета времени. Сигнал реализован подгрузкой видео с youtube, можно задать свой.

http://www.timer-tab.com/
будильник время интервал период секундомер учет

fontstruct — генератор шрифтов он-лайн

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

Написан на flash, требует регистрации. Есь социальный компонент, можно «форкать» чужие шрифты.

http://fontstruct.com/
генератор создать шрифт

FontFriend — эксперементы со шрифтами на сверстанной странице

Сервис-закладка, позволяет вживую менять шрифты, размеры, интерлиньях, плотность и пр. для использованных на странице шрифтов.

Добавляем в панель закладок, нажимает на нужной странице, меняем параметры - видим результат. При использовании шрифтов с google fonts, для некоторых шрифтов не подгружает кириллицу.

http://somadesign.ca/projects/fontfriend/
шрифт текстирование песочница закладка

Fancy Input — анимация ввода в текст. полях (плагин jQuery)

Несколько возможных эффектов для ввода текста посетителем в текстовых полях (input, textarea)/ Анимация средствами CSS3. Приятный, хорошо комментированный код плагина.

http://dropthebit.com/demos/fancy_input/fancyInput.html
css3 input textarea анимация ввод красота текст

alertify.js — диалоги и сообщения

Минималистичный (7 Кб в минифицированном виде) javascript, организующий диалоги в модальных конах и сообщения о результатах. Прост в использовании, хорошо документирован, не требует фреймворков.

http://fabien-d.github.io/alertify.js/
javascript диалог модальное окно сообщение

UIbox — коллекция элементов интерфейса (HTML+CSS+JS)

Коллекция элементов интерфейса (вкладки, аккордеоны, лайтбоксы и пр.). Даны ссылки на страницы проектов.

http://www.uibox.in/
accordion autocomplete button calendar carousel collapsible color-picker combo-box date-picker drag-drop dropdown file-picker infinite-scroll input lightbox map menu modal-dialog pagination progress scrollbar select sidebar slider spinner stepper syntax tab toolbar tooltip tour tree typeahead

iSpeech — произнесение текста на сайте

Позволяет встроить на сайт возможность произнесения выделенного (или просто указанного) текста. Множество языков (есть русский в мужском и женском вариантах), встаивается javascript-ом, доменозависимо. Бесплатное использование требует ссылки на сайт сервиса.

http://www.ispeech.org/webapps/webreader
голос доступность произнесение текст читать

GTmetrix — анализ скорости загрузки страницы

Показывает количество запросов, детализацию по каждому запросу, скорость, рекомендации по оптимизации (и причины необходимости оптимизации).

Основан на Page Speed и YSlow. Отличный инструмент!

http://gtmetrix.com/
анализ загрузка запрос оптимизация скорость

Glide.js — адаптивный touch-friendly слайдер, плагин jQuery

Слайдер с адаптивностью, дружественный к touch-устройствам. Переходы CSS3 с фолбэками для старых браузеров и IE.

Легковестный (5 кб в минифицированном виде), отличные API и настройки, OOCSS и BEM с стилях, управление с клавиатуры, автостарт, хорошая документация.

http://jedrzejchalubek.com/glide/
jquery slider touch адаптивность плагин слайдер тач

favico.js — динамическая фавиконка

Возможность красиво менять изображение на фавиконке, использовать видео или картинку с вебкамеры как фавиконку. Не требует фреймворков, есть несколько вариантов анимации обновления.

Не работает в IE (даже в 11 версии).

http://lab.ejci.net/favico.js/
favicon фавиконка

CSS3-генератор

Визуальный генератор CSS3. Выдает CSS или SASS. Показывает кроссбраузерность выбранных свойств.

http://www.createcss3.com/
css sass генератор

TogetherJS — совместная работа над страницей

Javascript, подключаемый к странице для совместной работы над ней. Участникам не нужно ничего устанавливать, только открыть полученную ссылку. Встроенный аудио-, видео- и текстовой чат, показ курсоров участников, статусы присутствия.

Описанные пользователями проблемы (сентябрь 2013): сложности при аудио- и видеосвязи при использовании разных браузеров, проблемы с позиционированием курсоров в случае использования разных разрешений экранов на резиновых/адаптивных страницах.

https://togetherjs.com/
группа связь совместная работа чат

Stylus — пропроцессор CSS

Простой метаязык, компилируемый в CSS. Добавляет в работу с CSS переменные, вложения, примеси, математические операции, преобразования цветов, циклы, условия. Использует синтаксическую табуляцию.

http://learnboost.github.io/stylus/
CSS stylus препроцессор

Scout — ПО для работы с SASS and Compass

Слоган программы: «Compass и SASS без ненависти и склок». Создана для тех, кто хочет использовать Compass и SASS, но не хочет работать с командной строкой. Кроссплатформенная, бесплатная.

http://mhs.github.io/scout-app/
compass CSS sass scss препроцессор

RulersGuides.js — линейки и направляющие на странице как в Photoshop

Сервис-закладка: добавляете в панель закладок, нажимаете на целевой странице — появляются линейки, «схватившись» за которые можно добавлять направляющие линии. Можно включить «прилипание» направляющих к HTML-элементам или определенному шагу расстояния.

http://mark-rolich.github.io/RulersGuides.js/
закладка линейка направляющая тестирование

Regex101 — Тестирование регулярных выражений

Он-лайнт-тест регулярных выражений на PHP, Javascript, Python. Тестирование поиска и замены, подсветка частей регулярного выражения и результата его работы, шпаргалка, возможность давать ссылки на написанные регулярные выражения, сообщество разработчиков.

http://regex101.com/
regxp проверка регулярное выражение тест

Препроцессор SASS

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения структуры файлов. Добавляет в работу с CSS переменные, вложения, примеси, математические операции, преобразования цветов, циклы, условия.

Имеет два синтаксиса: SASS (старый, без фигурных скобок, с синтаксической табуляцией), SCSS (новый, с фигурными скобками).

http://sass-lang.com/documentation/
CSS sass scss препроцессор

Enigma64 — плагин Photoshop для быстрого экспорта графики

Быстро экспортирует графику (в том числе, в облако), оптимизируя графический файл. Плагин для тех, кому лень записать Actoin для экспорта в одно нажатие кнопки и потом оптимизировать графику на специальных сервисах.

http://getenigma64.com/
photoshop графика изображение оптимизация плагин сжатие фотография

CSS Hat — плагин Photoshop для верстки

Выдает CSS-стили для выбранного слоя. Умеет выдавать CSS, LESS, SASS, SCSS, Stylus. Опционально, может включить в выдаваемый CSS вендорные префиксы, указание размеров, комментарии. Платный. Есть бесплатная и очень урезанная альтернатива.

http://csshat.com/
CSS LESS photoshop SASS SCSS Stylus верстка плагин

Compass — SASS-фреймворк

Compass позиционируется как дизайнерский фреймворк, использует SASS синтаксис. Содержит большое количество примесей (mixins), CSS-ресет и нормализатор, несколько фреймворков, CSS3 PIE. Для использования требуется установленный Ruby или специальное приложение.

http://compass-style.org/
compass CSS sass scss препроцессор

XAMPP — локальный сервер

XAMPP — кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер.

http://www.apachefriends.org/en/xampp.html
apache mysql ngix perl php phpmyadmin локальный сервер

SoFresh — автообновление CSS

Сервис-закладка. Добавляем закладку в панель закладок браузера, нажимаем на целевой странице, отмечаем флажками автообновляемые CSS-файлы. Теперь если CSS-файл изменится, изменения сразу будут показаны, без перезагрузки страницы (то есть, к примеру, сохранится позиция скролла).

Работает только с HTTP-сервером, не работает с локальными файлами.

http://sofresh.redpik.net/
css автообновление

Препроцессор SASS

Препроцессор CSS. Позволяет использовать переменные, мат. операции, условия, циклы, примеси, импорт и пр. Компилируется в CSS.

Для работы с SASS (и его подвидом — SCSS) рекомендую PrePros (особенно на ОС Windows).

http://sass-lang.com/
css sass scss препроцессор

Open Server — локальный сервер

Локальный сервер и утилиты для комплексной работы с ним. Интерпретаторы, БД, GUI.

Портируемый, русскоязычный. Идеален для веб-разработки. Проект HTMLLinks.ru делался с использованием этого сервера.

При скачивании рекомендуется выбрать вариант «Mini» (содержит только серверную часть пакета), т.к. автор добавил в вариант «Full» огромную массу «полезных утилит», 90% которых — унылый ненужный хлам.

http://open-server.ru/
apache mysql ngix php phpmyadmin локальный сервер

Jump To — скользящее оглавление, плагин jQuery

Плагин jQuery. Создает скользящее при скролле оглавление на основании иерархии заголовков внутри указанного блока. Умеет сворачиваться, но не имеет учета ширины вьюпорта.

Простое и удобное использование.

https://github.com/peachananr/jumpto
jquery оглавление переход плагин прокрутка скролл текст

Interactive 3D — интерактивная псевдотрехмерность, плагин jQuery

Плагин создает псевдотрехмерный объект: позволяет перетаскиванием мыши сменять изображения предмета, сделанные с разных ракурсов.

В демонстрации использованы 38 кадров.

https://github.com/peachananr/interactive_3d
3D jquery вращение изображение плагин псевдотрехмерность товар трехмерность

Генератор плоских теней

Сервис генерирует плоскую тень блоков и текста. Выдает CSS.

Позволяет задать только длину, прозрачность и затухание (править цвет придется вручную, править направление нельзя).

http://sandbox.juan-i.com/longshadows/
генератор плоская тень

Flat Shadow — добавление плоских теней, плагин jQuery

Gлагин jQuery, добавляющий элементам плоские тени. Простые настройки, скромный размер. Лобавляет целевым элементам атрибут style с паарметрами тени. Умеренно конфигурируется data-атрибутами.

https://github.com/peachananr/flat-shadow
jquery shadow text плагин плоская тень

Dillinger — он-лайн облачный Markdown-редактор

Облачный он-лайн редактор, использующий синтаксис Markdown. Синхронизируется с Dropbox, Github, Google Drive. Много красивых вариантов оформления, экспорт в HTML и PDF, автосохранение.

http://dillinger.io
html Markdown облако редактор текст

Денвер — локальный сервер

Джентльменский набор Web-разработчика («Д.н.w.р», читается «Денвер») — проект Дмитрия Котерова, локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки сайтов на «домашней» (локальной) Windows-машине без необходимости выхода в Интернет.

http://www.denwer.ru/
apache mysql ngix perl php phpmyadmin локальный сервер

CSSMatic - Генератор CSS-градиентов

Визуальный генератор CSS-градиентов. Выдает кроссбраузерный код, имеет много предустановок. Градиенты горизонтальные, вертикальные, диагональные, радиальные. Есть импорт из CSS. Выдает CSS или SCSS.

Опционально — комментарии в коде (какой синтаксис для какого браузера предназначен).

Можно давать ссылку на созданный градиент и сохранять свои пресеты.

http://www.cssmatic.com/gradient-generator
градиент генератор css

CSS3Ps — плагин Photoshop, конвертирует слои в CSS3

Бесплатный плагин для Photoshop, позволяющий получить CSS3-стили выбранных объектов.

Имеет «облачное» базирование (для работы нужен доступ в интернет). Генерирует стили без вендорных префиксов. Рекомендуется использовать совместно с Autiprefixer.

http://css3ps.com/
css photoshop генератор макет плагин стиль

Autoprefixer — автоподстановка вендорных префиксов в CSS

Механизм автоподстановки вендорных префиксов в CSS. Пишем код без префиксов, а он обрабатывает получающийся CSS и подставляет необходимые префиксы, основываясь на данных с Can I Use.

Существуют реализации для множества технологий (Grunt, Compass, Stylus), языков программирования (Ruby on Rails, Ruby, PHP, Node.js, Javascript) и программных продуктов (PrePros, Sublime Text, Brakets).

https://github.com/ai/autoprefixer
Brakets Compass css Grunt Javascript Node.js PHP PrePros Ruby Ruby on Rails Stylus Sublime Text автоподстановка вендорный префикс

PageSpeed Insights — анализ скорости загрузки страницы и рекомендации по оптимизации

Инструмент с developers.google.com, анализирующий страницу по заданному адресу и выдающий инструкции о том, как ее оптимизировать (отдельно для мобильных, отдельно для настольных устройств).

http://developers.google.com/speed/pagespeed/insights/
загрузка оптимизация скорение скорость страница

LESS Hat — огромный набор примесей LESS

Эпический набор примесей LESS: все, что только возможно и даже больше. Результат работы примесей конфигурируется (можно отключить поддержку старых вебкитов или IE.

Есть подробная документация с примерами.

http://lesshat.com/
less препроцессор примеси

HTML5 Please — поддержка html5 и CSS3 браузерами

Красивое и наглядное описание поддержки технологий HTML5 и CSS3 браузерами, указания как лучше использовать те или иные технологии, ссылки на распространенность поддержки и на полифилы для поддержки старых браузеров.

Удобная фильтрация, подборки по браузерам и уместности использования (можно использовать / использовать с осторожностью /лучше избежать использования).

http://html5please.com/
css3 html5 polyfills поддержка полифилы справка

Font Dragr — тестирование шрифта для web

Перетаскиваем тестируемый шрифт на страницу, кликаем по нему и видим как он будет выглядеть на странице. Можно оценить контрастность (показаны несколько цветов), сравнить размеры символов с наиболее распространенными шрифтами (Arial, Times, Georgia)/

Сервис работает толкьо в вебкит-браузерах.

http://fontdragr.com/editor
font веб-шрифт тестирование типографика шрифт

Бесплатные материалы с mightydeals.com

MightyDeals — сайт, продающий графические материалы для веб-профессионалов. Ссылка ведет на страницу с материалами, распространяющимися бесплатно: мокапы, шаблоны, иконки, паттерны, текстуры, наборы для создания интерфейсов.

http://www.mightydeals.com/free_stuff
icon mock-up pattern template texture ui kit бесплатно иконка интерфейс паттерн текстура шаблон

Визуальный редактор для вставки Google Maps

Визуальный редактор, позволяющий настроить карты от Google для вставки на свою страницу^ задаем размер, суммирование, центр, показ/сокрытие элементов управления и получаем код, который нужно вставить на страницу в нужном месте.

http://googlemapbuilder.mynameisdonald.com/
google maps генератор карта разметка

Time Tracker — он-лайн учет времени

Вводим временной интервал в минутах, запускаем отсчет. По окончании — звуковой сигнал. Удобно засекать спринты при разработке.

http://unlayered.com/time/
время минута период слежение тайм-менеждмент учет

stickUp — фиксация навигации при скролле (плагин jQuery)

Небольшой плагин jQuery, прикрепляющий навигацию (любой блок) к верхней части страницы. Умеет «выделять» тот пункт меню, который показан при данной позиции скролла.

http://lirancohen.github.io/stickUp/
jquery scroll навигация плагин прокрутка скролл

Получение User Agent для использования в CSS

Описанная в статье техника позволяет добавлять строку юзерагента как атрибудт для тега html (используется javascript) и писать CSS специфичный для разных браузеров. Методика не является универсальной, т.к. тернд последнего времени — тестировать браузер на поддержку интересующих технологий, а не выяснять названия и версию браузера.

http://rog.ie/blog/html5-boilerplate-addon
css javascript user agent браузер хак

Определение мобильного браузера

Методы определания мобильного браузера для: Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, jQuery, Lasso, nginx, node.js, PHP, Perl, Python, Rails. Если браузер определяется как мобильный, происходит переадресация на прописанный в скрипте адрес.

http://detectmobilebrowsers.com/
Apache ASP ASP.NET C# ColdFusion IIS JavaScript jQuery JSP Lasso nginx node.js Perl PHP Python Rails браузер мобильный переадресация планшет

Modernizr — тестирование браузера на поддержку технологий

Modernizr — это подключаемый Вами к странице javascript, который тестирует браузер посетителя добавляет тегу html несколько сss-классов с результатами тестирования. К примеру, наличие классов boxshadow и opacity говорит о поддержке браузером css-свойств тени от блока и прозрачности, а классы no-cssanimations и no-cssgradients говорят об отсутствии поддержки css-анимаций и градиентов. Удобно писать к-л замены для старых браузеров.

Список тестируемых свойств настраивается при скачивании скрипта.

http://modernizr.com/
chrome css firefox internet explorer opera safari браузер поддержка проверка свойство тестирование

Magnifier.js — эффект лупы

Продвинутая javascript-библиотека, реализующая эффект лупы (с зуммированием колесом мыши). Не требует фреймворков.

Умеет подключаться к нескольким изображениям с одного вызова,

https://github.com/mark-rolich/Magnifier.js
javascript изображение картинка лупа увеличение фотография

iconmelon — SVG-иконки для веб

Сервис содержит множество наборов векторных иконок, позволяет выбрать нужные и выдает архив с SVG-файлом и примерами использования выбранных иконок. Умеет добавлять в иконкам SVG-фильтры (поддержка которых в браузерах хромает).

http://iconmelon.com
svg вектор иконка

Fontastic — генератор иконочного шрифта

Сервис генерирует иконочный шрифт из выбранных посетителем иконок. Напоминает Fontello, но требует регистрации, отличается по имеющимся иконочным шрифтам (есть и общие), имеет несколько платных наборов иконок, не имеет возможности загрузки предустановок, сделанных ранее.

http://fontastic.me/
генератор иконка иконочный шрифт шрифт

Фильтры изображений с WebGL

Маленькая JavaScript-библиотека, демонстрирующая наложение фильтров на изображение.

Использовать в рабочих проектах рано, т.к. поддержка WebGL в IE введена только в 11 версии (как обычно, на несколько лет позже, чем в браузерах).

http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl
JavaScript WebGL изображение картинка наложение фильтр фотография

CSS3 = Awesome — справочник по анимациям, переходам, трансформациям и фильтрам (англ.)

Англоязычный справочник по CSS3-свойствам. Акцент делается на переходах, анимации, трансформации и фильтрах (Transitions, Transforms, Animation, Filters). Указана кроссбраузерность, распространенность поддержки, приведены примеры.

http://css3.bradshawenterprises.com/
Animation css Filters Transforms Transitions анимация кроссбраузерность переход поддержка трансформация фильтр

countUp.js — счетчик

Этот javascript — счетчик (простая замена цифр). Удобно задаются начальное и конечно число (и количество знаков после запятой), длительность перехода. Скромный размер, не создает избыточной разметки, имеет несколько методов? не требует фреймворков.

https://github.com/inorganik/countUp.js
javascript счетчик цифра число

Colorpeek — способ быстро покзать цветовую гамму

Простой сервис, показывающий комбинации цветов. Удобно обмениваться комбинациями или показывать коллегам/заказчикам. Работает с HEX, PGB, HSL.

http://colorpeek.com/#f4080b,faed00,000000 — в конце адреса перечислены чвета в HEX-формате через запятую.

http://colorpeek.com/
HEX HSL PGB гамма комбинация цветов цвет

CanIUse — справочник поддержки HTML, CSS, SVG, JS

Сервис показывает кроссбраузерность и распротраненность поддержки огромного числа технологий, используемых в верстке. Авторитетнейший источник.

Для каждой технологии дает ссылку на впецификацию, примеры, статьи.

http://caniuse.com/
chrome css html internet explorer javascript firefox opera safari svg браузер поддержка свойства технология

Быстродействие CSS-анимаций (англ.)

Анлоязычная статья о быстродействии CSS-анимаций.

Вкратце, вывод: наиболее быстродействующими являются анимации следующих свойств: opacity, translate, rotate, scale. При их анимации, в подсчетах участвует видеоускоритель.

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
css opacity rotate scale translate анимация трансформация

VirusTotal - он-лайн проверка на вирусы

Сервис, примающий файл и выдающий результат его проверки множеством разных антивирусов. АПозволяет судить о реальности вирусной угрозы.

У сервиса есть ПО для Windows, встраивающее пункт «Отправить на VirusTotal» в контекстное меню проводника.

https://www.virustotal.com/ru/
антиаирус безопасность проверка файл

Веб-стандарты

Блог российского сообщества веб-разработчиков.

http://web-standards.ru/
css html javascript svg блог метод новости семантика событие сообщество стандарт статья

Stock XCHNG — бесплатный клипарт

Бесплатный клипарт, хорошая каталогизация. Требует регистрации.

Насколько удалось понять, в этот клипарт попадают снимки и изображения, не принятые на платные стоки, качество среднее и низкое.

http://www.sxc.hu/
изображение картинка клипарт фотография

Rsizr — умное изменение размеров изображения

Он-лайн-сервис, реализующий «умное изменение размера», при котором изображение не просто растягивается/сжимается при масштабировании по одной/двум сторонам, но изменяется интеллектуально, сохраняя детализацию и текстуры.

http://rsizr.com/
графика изменение размера изображение ресайз фотография

РосФото микросток

Коллекция платных изображений и фотографий. Отличная каталогизация, российская специфика.

http://www.rosfoto.ru/
вектор изображение картинка клипарт микросток Россия фотография

Red Pen — рецензирование макетов/эскизов

Сервис быстрого рецензирования: загружаем изображение, пишем комментарии к областям на картинке, отсылаем ссылку рецензенту.

Комментарии можно комментировать.

https://redpen.io/
изображение картинка макет отзыв рецензия эскиз

Photo Editor online

Фоторедактор он-лайн. Фотошопообразный интерфейс, широкие возможности обработки фото прямо в браузере.

http://pixlr.com/editor/?loc=ru
photoshop графика изображение картинка правка редактирование редактор фотография

Фотобанк Лори — микросток

Хорошо систематизированная коллекция фото и изображений. Русскоязычный сервис.

http://lori.ru/
вектор изображение картинка клипарт микросток Россия фотография

Dropbox — облачное хранение данных

Сервис позволяет хранить копии части данных с ващего компьютера на стороннем сервере (в зашифрованном виде. Скачиваете и устанавливаете их приложение, выбираете папку — все файлы и подпапки будут копироваться «в облако». Лимит бесплатного аккаунта — 2 Гб. Удобно хранить резервные копии документов, парольных баз. Можно делать ссылки публичными и делиться ими.

https://www.dropbox.com/
backup бекап облако резервирование резервное копирование файл

Host tracker — анализ доступности сайта

Анализирует доступность сайта, еженедельно присылает логи (вижно сколько процентов времени сайт был недоступен).

На бесплатном аккаунте ограничение: 2 URL-а, проверки раз в 30 минут.

http://www.host-tracker.com/
доступность мониторинг проверка сайт

Тестирование адаптивности

Сервис показывает тестируемую страницу в заданной ширине вьюпорта. Есть ряд предустановок, ширины для некоторых устройств.

Можно давать ссылку на тест произвольной страницы в произвольной ширине.

http://viewlike.us/index.php
адаптивность тестирование

Siteheart — он-лайн консультирование

Сервис для организации он-лайн общения на страницах сайта. Есть звуковые уведомления и автообветчик на наиболее частые вопросы, прием платежей в окне чата. Есть плагины для некоторых распространенных CMS (Битрикс, Drupal, Wordpress), собственные мобильные приложения для iOS и Android, плагин для Chrome.

Бесплатный тарифный план — 300 диалогов в месяц.

http://siteheart.com/ru
консультирование помощь чат

PinyPNG — оптимизация графики

Сжимает графику в форматах jpg, gif, png. При бесплатном использовании ограничение размера загружаемого файла — 500 Кб. Переодически перегоняет PNG24 в PNG8 (логика осталась неясной).

http://www.punypng.com/
графика изображение картинка оптимизация сжатие

p3chat — он-лайн консультирование

Добавляет на страницы сервис живых консультаций. Он-лайн консультирование возсожно через несколько IM_клиентов (в т.ч. через google talk), скайп, IСQ.

Оплата — за одного (каждого) оператора, несколько тарифных планов.

http://p3chat.ru
консультирование помощь чат

Оптимизация графики для Retina-экранов

Хорошая статья, объясняющая как готовить графику для retina-экранов (экраны с большой плотностью пикселей). Как и всегда на Хабре, обязательно нужно читать комментарии. Особенно — самый первый.

http://habrahabr.ru/post/150071/
retina графика изображение картинка фотография

Olark — он-лайн консультирование

Сервис позволяет встраивать на страницы систему он-лайн помощи для посетителей (в режиме чата).

Бесплатный тарифный план подразумевает одного оператора и 20 чатов в месяц.

Сам чат может происходить через веб-интерфейс или какое-либо приложение.

http://www.olark.com/
консультирование помощь чат

Kraken.io — оптимизация графики

Сжатие графических файлов. Если в веб-интерфейсе выбрать «LOSSLESS», то PNG24 не будет преобразован в PNG8.

Позволяет загрузить несколько файлов, скачать архив с обработанными файлами.

https://kraken.io/web-interface
графика изображение оптимизация сжатие фотография

Яндекс-вебмастер

Инструменты яндекса для веб-мастеров: добавление нового сайта, проверка орфографии, ответов сервера т проч.

http://webmaster.yandex.ru/
аналитика поиск проверка

IETransformsTranslator — конвертирует CSS3 трансформации для IE6-8

Сервис конвертирует CSS3-трансформации в filter-записи для имитации таковых трансформаций в Internet explorer 6-8.

Поддерживаются не все свойства трансформаций. Требует указания пиксельных размеров трансформируемого блока.

http://www.useragentman.com/IETransformsTranslator/index.html
css3 filter internet explorer transforms трансформация

IconFinder — поиск иконок

Англоязычный сервис поиска иконок (в том числе, из платных наборов). Показывает возможные фораты скачивания (часто есть векторные), имеет удобный фильтр.

https://www.iconfinder.com/
иконка поиск

Faviconist — генератор фавиконок

Сервис генерирует простую фавиконку на основе к-л одной буквы шрифта с google fonts. настраиваются цвет, заливка градиентом, прозрачность. На выходе иконки размером 32×32 и 16×16 пикс.

http://faviconist.com/
генератор иконка

CSS Button Generator

Генератор красивых CSS-кнопок. Выдает неплохой и почти грамотный кроссбраузерный код (без поддержки старых IE).

http://css3buttongenerator.com/
css генератор кнопка

Cloud im — он-лайн консультрование

Сервис добавляет на страницы он-лайн консультанта. Позволяет активно вовлекать посетителей в чат, есть аналитика, приложения для мобильных устройств, Mac и Win.

Бесплатный тарифный план не заявляет об ограничении на количество чатов в месяц.

http://cloudim.ru/
консультирование помощь чат

Browserstack — тестирование во всех браузерах

Тестирование верстки на множестве устройств, всевозможных операционных системах и во всех сколько-нибудь распространенных версиях браузеров. от 40 долларов в месяц.

Есть демонстрационные аккаунты: 30 минут живого тестирования, 100 скриншотов.

https://www.browserstack.com
chrome firefox internet explorer ipad iphone opera адаптивность браузер кроссбраузерность тестирование

Browser shots — тестирование во всех браузерах

Сервис для тестирования верстки во множестве браузеров. Даем сервису URL, получаем скриншоты страницы в разных браузерах и операционных системах.

Internet explorer есть на сервисе только в 8 и 11 версиях.

http://browsershots.org/
chrome firefox internet explorer opera браузер скриншот тестирование

Блочные модели

Варианты разметки 1-, 2- и 3-колоночных макетов («фиксированных» и «резиновых»). Контентная область в коде всегда идет раньше сайдбара (даже когда последний визуально слева).

http://blog.html.it/layoutgala/
колонка макет разметка

xiper.net

Основы и секреты front-end разработки.

http://www.xiper.net/
css html javascript jquery верстка обучение справка статья техника

Верстка email-рассылок

Отличная статья (хоть и 2011 года) о кроссбраузерной и кроссмейлерной верстке страниц для email-рассылок.

http://habrahabr.ru/post/112163/
email кроссбраузерность кроссмейлерность рассылка

imagesLoaded — js-проверка загрузки изображений

Этот javascript констролирует загрузку изображений в произвольном блоке, позволяет выполнять js-функции в начале загрузки, после полной загрузки, в случае ошибки. Не требует фреймворков.

http://imagesloaded.desandro.com/
javascript загрузка изображение картинка проверка

GSAP (GreenSock Animation Platform) — библиотека для анимации

Мощнейшая и архибыстрая библиотека для анимации (JS+CSS) объектов. Множество эффектов, контроль таймлайна, скорости, направления. Элементарный синтаксис. Дополнительно — см. пару статей на Хабре.

http://www.greensock.com/gsap-js/
gasp javascript анимация

Frontender Magazine

Русскоязычный блог (переводы актуальных статей).

http://frontender.info/
css html javascript less sass бэм верстка перевод статья

Animate.css — библиотека CSS-анимаций

Большая библиотека CSS-анимаций для элементов страницы. При скачивании можно выбрать только необходимые анимации.

Помните, что CSS-анимация поддерживается IE только с 10 версии.

https://daneden.me/animate/
css анимация

Визуальный генератор спрайтов

Сервис создает картинку спрайт на основе позиционирования пользователя: просто перетаскиваете изображения в рабочую область, позиционируете их на «холсте» (к сожалению, нет запрета пересечения изображений по габариту), сразу видите и картинку, и css-стили (именуются по именам файлов).

http://spritepad.wearekiss.com
css визуально генератор спрайт

Техники вертикального и горизонтального выравнивания — описание и сравнение

Англоязычная статья, описывающая техники вертикального и горизонтального выравнивания одного блока (или изображения) в другом. Указывает кроссбраузерность методов.

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
вертикальное выравнивание горизонтальное техника

Сокрытие email в ссылке на странице

Сервис генерирует javascript-код, скрывающий email: для посетителей ссылка будет выглядеть как обычная ссылка на адрес электронной почты, для ботов без поддержки js будет выглядеть как абракадабра.

http://webdevtools.ru/maillink
email почта скрыть ссылка

Semantic UI — фреймворк для верстки

Html-css-ja-фреймворк. Модальная сетка, оформление элементов интерфейса, js-плагины, модульная система построения, less, красивая и удобная документация.

Квинтэссенция семантичности. Совместимость с Safari начинается с 6 версии.

http://semantic-ui.com/
css html less фреймворк

reveal.js — впечатляющие презентации на html

Скрипт позволяет создавать впечатляющие презентации на html. Несколько эффектов перехода слайдов, двухмерные переходы (у каждого «корневого» слайда могут быть «потомки»), несколько тем оформления. Не требует других фреймворков.

Эффекты трехмерных переходов работают только в современных браузерах.

http://lab.hakim.se/reveal-js
html javascript презентация слайд

Поддержка и использование CSS3-свойств

Описание некоторых, наиболее интересных (востребованных) CSS3-свойств с примерами использования, ссылками на спецификацию, описанием кроссбраузерности и, в некоторых случаях, ссылками на статьи и инструменты.

http://css3clickchart.com
css3 поддержка пример справка стиль

Генератор спрайтов из zip-архива

Русскоязычный сервис, генерирующий спрайт в формате png из загружаемого zip-архива с маленькими изображениями. Множество настроек, имена классов для элементов спрайта строятся на основе имен файлов.

На выходе — картинка-спрайт (горизонтальное или вертикальное поочередное (алфавитный порядок по имени файла) элементов спрайта) и css-код элементов (позиция фона и размеры).

http://ru.spritegen.website-performance.org/
css zip генератор изображение картинка спрайт

Генератор фоновой картинки

Мощный генератор узора для фона страницы/блока. Цвет, фоновый повторяющийся узор (много вариантов), его (узора) размер, наклон, цвет...

http://bgpatterns.com/
background генератор картинка узор фон

Генератор favicon

Сервис позволяет нарисовать или создать из изображения фавиконку (в том числе, анимированную).

http://www.favicon.cc/
favicon icon анимация генератор иконка фавиконка

HTML5TEST

Сервис тестирует Ваш браузер на поддержку htnl5-технологий. Есть сравнение браузеров и поддержки ими HTML5. Наглядно видно, почему Intenet Explorer любой версии — самый худший браузер на момент выхода.

http://beta.html5test.com/
chrome css3 firefox html5 internet explorer opera safari браузер тестирование технология

Генератор разметки (колонки)

Генерирует разметку 1-5-и колоночных макетов (в том числе, и таких двухколоночных, в которых правый широкий блок идет по коде до узкого левого). Выдает xhtml и css.

http://www.pagecolumn.com/
layout генератор колонка разметка

Генератор разметки (колонки)

Русскоязычный генератор грамотной разметки страницы. Выдает zip-архив с макетом. Может включать CSS-сброс, «прижимать подвал», эмулировать одинаковую высоту клонок.

http://csstemplater.com/
layout генератор колонка разметка

TinyPNG — сжатие PNG-файлов

Он-лайн сервис. Эффективно сжимает PNG-файлы. Загружаем PNG, получаем его сжатый вариант.

Периодически, преобразует png-24 в png-8 (потеря полупрозрачности).

https://tinypng.com/
png верстка графика изображения нарезка сжатие

Initializr — генератор шаблона для верстки

Генерирует HTML5-шаблон, на основе которого можно верстать проект. Выдает шаблоны на основе HTML5 Boilerplate, идеологии Mobile first или на основе Bootstrap. Может добавить в проект Modernizr, jQuery, классы для Internet Explorer (для body), код для Google Analytics, Chrome Frame, Favicon и некоторые другие вещи.

http://www.initializr.com/
html генератор шаблон

CSS3 анимации и переходы

Англоязычное описание работы с анимациями и переходами в CSS3. Много примеров с демонстрацией, описание свойств, приемы использования.

http://css3.bradshawenterprises.com/
animation css3 transform transition анимация переход трансформация учебник

Browse Happy — смени браузер!

Сайт, призывающий сменить или обновить браузер. Предназначен пользователям старых браузеров и программы Internet Explorer.

http://browsehappy.com/
chrome firefox internet explorer opera браузер выбор

Viewport resizer — закладка для тестирования адаптивности

Добавляем в панель закладок, заходим на тестируемую страницу, нажимаем акладку — в верхней части вьюпорта появляется панель с разными ширинами вьюпортов и возможностью поворота. Пункты панели можно определить самому. Удобно и быстро (почти как встроенное в Firefox средство тестирования — Ctrl+Shift+M).

http://lab.maltewassermann.com/viewport-resizer/
bookmarklet адаптивность закладка тестирование

Solo — органайзер фрилансера

Solo — органайзер для фрилансера. Контакты, календарь, проекты, задачи, учет времени.

Веб-приложение, работает на вашем хостинге. Англоязычное, но легко переводится.

http://www.getsoloapp.com/
solo веб-приложение задача календарь контакты органайзер проект учет времени фриланс

Шпаргалка по функциям смягчения анимации

Функция смягчения (easing) определяет скорость течения анимации, делая её более реалистичной. Сервис содержит описание функций, демонстрацию и примеры их реализаций на javascript, SCSS и CSS.

http://easings.net/ru
css javascript scss анимация смещение смягчение функция шпаргалка

Инструмент сортировки CSS-свойств

Сортирует CSS-свойства в нужном порядке (есть по умолчанию, можно указать свой). Есть он-лайн-варивнт и дополнения для большого количества редаторов (в т.ч. для Sublime Text и Notepad++).

http://csscomb.ru/
css notepad++ sublime text сортировка

Iconizr — оптимизация и использование SVG

На входе — одно или несколько SVG-изображений, на выходе — спрайты (SVG и PNG), стили для использования на своих страницах, демо (с JS, определяющим поддержку SVG браузером). Если часть загруженных файлов имеют суффикс -hover, они будут восприняты как состояния наведения одноименных (без суффикса) элементов.

http://iconizr.com/
png svg генератор иконка спрайт

Gumby — html-css-js-фреймворк

Gumby — bootstrap-подобный html-css-js-фреймворк: адаптивность, модульная сетка, огромное количество компонентов интерфейса. Стилизация написана на SASS.

http://gumbyframework.com/
gumby sass фреймворк

WinLess

Программа WinLess — компилятор LESS для Windows.

http://winless.org/
less winless препроцессор

Стилизация Bootstrap

Стилизует страницу (превью в «живом» режиме) на основе переменных. Работает со всеми версиями Bootstrap. Переменные для LESS можно получить просто скопировав-вставив, можно CSS получить (полный или минифицированный).

http://bootswatchr.com/create
bootstrap генератор стилизация тема оформления

Сниппеты для верстки

Сайт с набором html-css-js-сниппетов (компонентов страниц) — аккордеоны, автодополнения, меню. табы, подсказки и куча всего прочего.

http://www.uibox.in/
accordion angular-js autocomplete backbone bootstrap button calendar carousel collapsible color-picker combo-box date-picker dojo drag-drop dropdown file-picker foundation gauge graph infinite-scroll input input-mask input-tag jquery jquery-ui knob lightbox map menu modal-dialog mootools pagination progress raphael scrollbar select sidebar slider spinner stepper syntax tab toolbar tooltip tour tree typeahead visualization zepto сниппет шаблон

PrePros — программа-препроцессор

Компилирует множество метаязыков: LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml, Markdown. Умеет оптимизировать изображения, делать живую перезагрузку, сжимать JS и CSS-файлы. Умеет делать livereload.

Есть платная версия с FTP-загрузкой и некоторыми другими «плюшками».

Работает очень просто: устанавливаете приложение, указываете ему папку, в которой лежат файлы верстки, отмечаете те, которые нужно прекомпилировать (можно выбрать в какую папку). Теперь при изменении файла (к примеру, style.less) будет происходить его компиляция (к примеру, в css/style.css).

http://alphapixels.com/prepros/
coffeescript haml jade less livereload livescript markdown sass scss slim stylus компилятор компиляция препроцессор программа

MaxSite CMS

Быстрая нетребовательная к серверу (стандартная страница: 6 sql-запросов, 2,3 Мб оперативной памяти) система управления содержимым сайта. Идеальная для знающих основы PHP, множество плагинов, отзывчивый форум.

http://max-3000.com/
cms codeIgniter maxsite wordpress система управления контентом

Jasny Bootstrap

Форк Bootstrap. Добавлены JS-компоненты и CSS.

bootstrap форк фреймворк

IcoMoon — генератор иконочных шрифтов

Генератор иконочных шрифтов. Есть платные тарифные планы и один бесплатный.

Позволяет редактировать иконку: менять ее размер, отражать по вертикали/горизонтали, смещать в рамках символа. Выдает шрифт или SVG.

http://icomoon.io/
генератор иконка иконочный шрифт редактор шрифт

Fuel UX — JS-дополнения для Bootsrap

Набор javascript-дополнений для Bootstrap 2.

Элементы форм (кастомные чекбоксы и радиокнопки, поля выбора файла и проч.), таблицы с сортировкой и поиском, выбор даты, облако тегов, презагрузчик, деревья

http://exacttarget.github.io/fuelux/
bootstrap Checkbox Combobox Datagrid Datepicker Pillbox Preloader Radio Scheduler Search Select Spinner Tree Wizard дополнение расширение

prettyPhoto — галерея, плагин jQuery

Клон Lightbox для jQuery. Умеет показывать изображения, видео, объединять в галереи, уменьшает размеры, если не вписывается во вьюпорт. Несколько вариантов оформления, широкая кроссбраузерность. Огромное количество настроек.

Минусы: много лишнего CSS, стилизация.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#
jquery lightbox видео галерея изображения картинки плагин фотографии

Препроцессор LESS

Препроцессор LESS — простой в освоении язык, преобразуемый в CSS. Добавляет в работу с CSS переменные, вложения, примеси, математические операции, преобразования цветов, циклы, условия. Может работать на стороне сервера (компилироваться в CSS) и на стороне клиента (в этом случае, может содержать вставки JS).

http://lesscss.org/
CSS less препроцессор

markItUp — невизуальный редактор, плагин jQuery

Плагин невизуального редактора для jQuery. Умеет работать с Html, Textile, Wiki Syntax, Markdown, BBcode, имеет режимы предпросмотра. Умеет считать, сортировать строки, преобразовывать символы в html-сущности, работать с шаблонами.

http://markitup.jaysalvat.com/home/
bbcode html jquery markdown textile wiki syntax визуальный редактор плагин

JQuery.iviewer — «лупа», плагин jQuery

Плагин jQuery, визуально масштабирует картинку (аналог лупы). Умеет поворачивать картинку, увеличивать и уменьшать скроллом.

http://test.dpetroff.ru/jquery.iviewer/test/
изображение картинка лупа масштабирование плагин прокрутка рассмотреть увеличение уменьшение фотография

jQuery Thumbs — плагин jQuery

Плагин jQuery, «создает» миниатюры из полноразмерных изображений (визуально «подрезает» до указанного размера). Реально не уменьшает изображения.

http://joanpiedra.com/jquery/thumbs/
jquery изображения картинки миниатюры плагин фотографии

jQuery Cycle — плагин jQuery

Плагин jQuery. Слайдер для изображений и коротких текстов. Отлично подойдет для сайдбара. Множество настроек.

jquery плагин сладйер

HTML-CSS-JS-песочница

html-css-scss-coffeescript-[еще куча всего]-песочница. Вводим разметку и код — видим результат рендера страницы. Можно получить постоянную ссылку на написанный код.

Встроен Emmet.

http://cssdeck.com/labs
css html javascript песочница

Генератор разметки

Генератор разметки страницы для Bootstrap. Платные тарифные планы, сделан с умом (проекты, командная работа, возможность легко править код страницы.

Ссылка на регистрацию бесплатного аккаунта (1 проект, 10 Мб пространства).

http://www.divshot.com/
bootstrap генератор разметка

Fontello — генератор иконочных шрифтов

Сервис Fontello — абсолютный фаворит среди генераторов иконочных шрифтов. Выбираем из сотен иконок нужные (есть поиск по названию и меткам (местами — забавно), задаем выбранным иконкам названия CSS-классов и символы в шрифте, скачиваем, подключаем к странице, используем как в демонстрации из скачанного архива.

http://fontello.com/
генератор иконка иконочный шрифт шрифт

Emmet

Emmet — механизм, ускоряющий верстку. Пишем сокращенную запись, нажимаем разворачивающую кнопку — получаем полную запись. Поставляется в виде плагинов к редакторам кода. Нужно знать!

Примеры:

http://emmet.io/
CSS HTML врстка нужно знать сокращение ускорение

Документация по jQuery

Англоязычная документация по jQuery. Удобнейший «живой» поиск, множество примеров.

http://jqapi.com/
jquery документация обучение справочник

Веб-безопасные шрифты

Подборка шрифтов, которые можно использовать в CSS. Даны сведения о распространенности (для Windows и Mac, в процентах), в копируемых конструкция font-face прописаны грамотные «резервы».

Актуальность и источники информации неизвестны.

http://cssfontstack.com/
безопасные шрифты шрифт

Темы для Bootstrap

Слоган этого ресурса с темами оформления для bootstrap: «потому, что "свободный" — не всегда означает дерьмовый».

http://www.blacktie.co/
bootstrap оформление тема

Sublime Text — редактор кода

Sublime Text — удобный редактор для написания HTML, CSS, JS и многого другого. Один их лучших.

Минусы: стоит 70$ (можно использовать бесплатно, без SMS ограничений, но каждые несколько часов будет просить денег), невизуальная настройка, некоторые проблемы с кириллицей, темная тема оформления (темный текст на темном фоне).

http://www.sublimetext.com/
sublime text редактор

Генератор изображений

Генерирует изображения с написанным на картинке пиксельным размером и, по желанию, произвольным текстом. Цвет, текст, размер — любые. Используйте атрибут src="http://placehold.it/350x150" для вставки картинки 350×150 пикс.

http://placehold.it/
генератор изображение картинка размер

Фреймворк jQuery

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

Если Вы не знаете jQuery, Вы не можете называть себя веб-верстальщиком или, тем более, технологом.

http://jquery.com/
jquery фреймворк

Echo.js — подгрузка картинок при скролле

Принцип lazy loading — это подгрузка контентных изображений только в том случае, если посетитель «докрутил» скролл до того места, где расположена картинка. Подключаем этот JS и пишем вместо контентных картинок:

http://toddmotto.com/labs/echo/
javascript lazy-loading загрузка изображение картинка подгрузка прокрутка скролл

Инструменты Google

Отличные инструменты, в том числе, и для верстальщика. Чрезвычайно удобны в организации работы во фрилансе.

https://drive.google.com
google office TODO документы задачи инструменты календарь органайзер переводчик поиск почта презентации рисунки таблицы фриланс

Плагины jQuery

Прекрасная подборка плагинов jQuery, организованных в группы. Удобно систематизировано, даны ссылки на демонстрацию и страницы проектов на github.

http://www.unheap.com/
jquery автодополнение аккордеоны анимация галереи графики диалоги загрузка навигация пагинация плагины подсказки прокрутка скролл слайдеры слои сортировка таблицы фильтры формы

Темы для Bootstrap

Несколько простых (только цвет и типографика) бесплатных тем оформления. Есть LESS. Бесплатно.

Некоторые из тем содержат шрифты без поддержки кириллицы.

http://bootswatch.com/
bootstrap template theme тема шаблон

Темы для Bootstrap

Есть совсем простые, есть простые и очень симпатичные шаблоны для bootstrap (в том числе, админки сайтов). Бесплатно.

http://startbootstrap.com/
bootstrap template theme тема шаблон

Справочник верстальщика

Справочник по html и css на русском языке. Поиск, описание с указанием кроссбраузерности, самоучитель, рецепты, задания, блог, форум.

http://htmlbook.ru/
css html обучение справочник

HTML-CSS-JS-песочница

html-css-scss-coffeescript-[еще куча всего]-песочница. Вводим разметку и код — видим результат рендера страницы. Можно подключить нормализатор, к-л JS-фреймворк.

Встроен Emmet.

http://jsfiddle.net/
css html javascript песочница

Шрифты для Web

Подключение с сервиса (можно и скачать), настройки при подключении (можно получить ссылку на шрифт, содержащий только необходимые символы), отличный фильтр по шрифтам.

http://www.google.com/fonts/
font шрифт

Генератор CSS-градиентов

Имитирует интерфейс Photoshop, выдает кроссбраузерный код, имеет много предустановок. Градиенты горизонтальные, вертикальные, диагональные, радиальные.

Есть импорт из изображения или из CSS. Выдает CSS или SCSS.

Опционально — комментарии в коде (какой синтаксис для какого браузера предназначен).

Можно давать ссылку на созданный градиент.

http://www.colorzilla.com/gradient-editor/
css3 gradient генератор градиент

Документация по jQuery

Русскоязычная документация по jQuery. Указаны версии фреймворка, в которых появились рассматриваемые функции. Описание событий, селекторов, эффектов и пр. С примерами.

Есть «карта функций», позволяющая быстро найти нужную.

http://jquery.page2page.ru/
jquery документация обучение справочник

CSS3 генератор (тени, углы, колонки...)

Удобный в использовании генератор CSS3. Генерирует: Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transitions, Transform.

Выдает CSS с вендорными префиксами, показывает кроссбраузерность.

http://css3generator.com/
border-radius box resize box shadow box-sizing css3 font-face multiple columns outline rgbs text-shadow transform transition генератор колонка переход тень трансформация угол шрифт

Фреймворк Bootstrap

Bootstrap — популярнейший html-css-js-фреймворк, серьезно ускоряющий работу верстальщика. Множество компонентов (модульные сетки, навигация, слайдер, аккордеон, пагинация и пр.)), простое использование, наличие LESS.

http://getbootstrap.com/
bootstrap less фреймворк