Полезные ресурсы для web-мастера

HTML

www.jsfiddle.net - песочница для веб-разработчиков. HTML, CSS, JavaScipt и результат.
http://csstemplater.com - генератор HTML+CSS шаблонов
http://www.phpform.org/ генератор форм
http://www.w3schools.com/ Справочник с возможностью редактирования кода
Все правильные doctype и запрещенные в них HTML теги
http://imagemap-generator.dariodomi.de/ - map генератор


http://css3pie.com/documentation/getting-started/ - для работы некоторых свойств css3 в IE, не поддерживаемых по умолчанию PIE


Программа для генерации кода сложных таблиц. Спасибо за разработку newJS
Вопросы и пожелания по программе - озвучиваем здесь.
Table_Generator_2.0.7z

Линейки для вебмастера
Экранные линейки.zip

http://www.blacksunsoftware.com/colormania.html - color mania - программа для выбора цвета на экране

Типовые макеты 
http://htmlbook.ru/samlayout/tipovye-makety
http://blog.html.it/layoutgala/
http://www.dynamicdrive.com/style/layouts/category/C10/


CSS 
http://jigsaw.w3.org/css-validator/#validate_by_upload онлайн валидатор. Не работают стили - вам сюда
http://procssor.com - форматирование CSS кода.
http://css3generator.com - CSS3 генератор
www.spritebox.net - нарезка картинки на CSS спрайты
http://css-tricks.com/examples/ButtonMaker/ сервис для генерации кнопок на css
http://dabuttonfactory.com/ сервис для генерации кнопок на css
http://www.colorzilla.com/gradient-editor/ Сервис для генерации градиентов на css
http://border-image.com/ Сервис для создания рамок для рисунков
http://css-sprit.es/ генератор спрайтов
http://bearcss.com/ генератор css для html
http://www.css3.me/ css3 генератор
http://csscomb.ru/ инструмент для сортировки CSS-свойств в нужном порядке
http://simpreal.org.ua/csssprites онлайн генератор css спрайтов
http://cssmenumaker.com/ онлайн генератор css стилей для меню
http://www.useragentman.com/IETransformsTranslator/ Трансформации для IE
http://css3button.net/ - генератор кнопок
http://css3gen.com/box-shadow/ генератор теней
http://www.cssmatic.com/box-shadow генератор теней

http://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока.

Компрессия кода

CSS

http://www.homepage-performance.de/e...ssor-tool.html
http://isnoop.net/tools/css.php
http://www.pagecolumn.com/tool/css_compressor.htm
http://tools.pingates.com/
http://www.lotterypost.com/css-compress.aspx
http://mabblog.com/cssoptimizer/compress.html
http://www.cssoptimiser.com/
http://www.codebeautifier.com/
http://www.askapache.com/online-tools/compress-css/
http://iceyboard.no-ip.org/projects/css_compressor
http://compressor.ebiene.de/
http://tools.arantius.com/css-compressor
http://www.sevenforty.com/tools/csscompressor
http://www.phpinsider.com/compress_css.php
http://www.devtrench.com/css-formatt...-optimiser.php
http://cssdrive.com
http://www.cleancss.com
http://www.excssive.com/
http://www.csscompressor.com/
http://www.cssportal.com/css-optimize/
http://www.artiss.co.uk/css-compression
http://www.creativyst.com/Prod/3/
http://www.generateit.net/css-optimize/


XHTML, HTML и CSS компрессор
http://www.peterbe.com/plog/blogitem...6-1/compressor

JavaScript / CSS сжатие
http://www.refresh-sf.com/yui/


Расширение для Photoshop, умеющее конвертировать стили слоя в css3 код: http://css3ps.com

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

Онлайн генераторы CSS3 — в обойме инструментов web-разработчика


Типографика, шрифты

http://www.fontsquirrel.com/fonts/li...guage/cyrillic подборка кириллических шрифтов
www.blindtextgenerator.com - генератор текстов-рыб
www.typetester.org - Типографика, подбор шрифтов для кроссбраузерного отображения нестандартного шрифта на сайте
http://cufon.shoqolate.com/generate/ Генератор Cufon шрифтов
http://www.typograf.ru/ Web типограф
http://fontstruct.com - создание шрифтов онлайн

http://www.fontsquirrel.com/fontface/generator Font-face Kit Generator - генерация наборов 
http://www.font2web.com - конвертация шрифтов под web
http://www.freefontconverter.com/ - шрифт под web
http://everythingfonts.com/font-face - шрифт под web

Google Web Fonts
Google Web Fonts
Пользование:
Getting Started
Красивые шрифты для сайта онлайн — как добавить в Html и CSS web шрифты через Google Font API
Google Web Fonts - нестандартные шрифты
Prosto в Google Web Fonts

Подборка ссылок на статьи о типографике:

Основы типографики
Типографика для веб
Типографика на Вебе
Типографика WEB
Типографика и веб: правила хорошего тона

3 примера сайтов с прекрасной типографикой:
www.yesnurse.co.uk
www.hausofdesign.co.uk
demo.fotosynthes.ru/designpile/


Дизайн

http://framebox.org - прототипирование веб-интерфейсов
http://lea.verou.me/css3patterns/ background паттерны на CSS3
http://subtlepatterns.com - обновляемая коллекция bg паттернов
www.tartanmaker.com - генератор тартан bg паттернов
www.stripemania.com - генератор паттернов из линий.
www.stripegenerator.com - ещё один генератор паттернов из линий
http://bgmaker.ventdaval.com - онлайн редактор для создания собственный фоновых паттернов
www.pixelknete.de/dotter/ - генератор точечных фонов
www.patterncooler.com - генератор/редактор фоновых паттернов. (весьма интересная штуковина)
http://bgpatterns.com - снова bg паттерны.
http://0to255.com подбор цвета.
http://colorschemedesigner.com - подбор цветовой палитры.
http://pictaculous.com - ещё один генератор цветовой палитры из изображения
http://kuler.adobe.com - подбор цветовой палитры
http://pixlr.com/editor/ - Растровый онлайн редактор
http://favicon.ru - редактор fav-иконки для сайта
http://colorscheme.ru/ Сервис для подборки цветовых схем
http://favigen.com/ Сервис для генерации фавиконок для сайта
http://colllor.com/ подбор цвета тени
http://kraken.io/ онлайн оптимизация изображений
http://3d-pack.com/ - генератор 3D изображений для коробки
http://www.roundpic.com/ скругление углов изображения
http://weavesilk.com - создание красивых обоев на основе одного эффекта
http://lorempixel.com - генератор картинок-рыб (по аналогии с текстом-рыбой)
http://thenounproject.com Бесплатные иконки
http://www.iconsearch.ru/ - Поиск иконок по ключевым словам
http://www.iconfinder.com/ - Поиск иконок по ключевым словам
http://labs.tineye.com/multicolr/ - Поиск фотографий по цветовой гамме
http://www.punypng.com/ - Оптимизация изображений
http://www.colorsontheweb.com/colorwizard.asp Подбор гармоничных цветов
http://patterns.ava7.com/ - паттерны

http://image2base64.wemakesites.net/ сервис перевода картинок в base64 вариант


JavaScript

http://microjs.com - набор минимизированных javascript скриптов. Очень много


Генераторы прелоадеров

http://www.ajaxload.info/
http://preloaders.net/
http://cssload.net/
http://www.chimply.com/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://mentalized.net/activity-indicators/
http://www.sanbaldo.com/wordpress/1/ajax_gif/

Проверка на валидность и совместимость

Вёрстка для мобильных устройств, как сайт будет выглядеть на разных разрешениях экрана
http://www.responsinator.com/

https://chrome.google.com/webstore/d...okffboaccidbal - Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера

Can I use... - в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии.

http://www.quirksmode.org/ - информация о совместимости браузеров с некоторыми вещами CSS и JS. Тестовые страницы по каждому пункту.
В частности:

• http://www.quirksmode.org/html5/index.html - HTML5
• http://www.quirksmode.org/css/contents.html - селекторы и свойства CSS

http://loads.in - насколько быстро грузится ваш сайт

Валидаторы
W3C Markup Validation Service 
W3C CSS Validation Service
XML Validation

Разное

http://getcover.ru - генератор "рамок" браузера или телефона. примечателен кнопкой "Забацать"
http://css-tricks.com/downloads/ множество симапатичностей
http://popinbuilder.icoder.com/ Сервис для генерации popup баннеров
http://snippets.su/ сниппеты
http://htaccess.madewithlove.be - htaccess тестер
www.asciiflow.com - создание ASCII таблиц
http://www.maschek.hu/imagemap/imgmap - генератор карт со сложными полигонами
http://word2cleanhtml.com/ - очистка текстов от стилей word перед вставкой в материалы


Коды от Стью Николса
http://www.cssplay.co.uk/
http://www.stunicholls.com
Внимательно читайте по авторским правам - для использования на коммерческих ресурсах для многих кодов донат обязателен!

http://html5boilerplate.com/ - HTML/CSS/JS шаблон

Обзор онлайн-сервисов для веб-разработки и дизайна

50 ресурсов для веб-разработчиков за 2012 год


Интересные сайты

http://dribbble.com - в поисках вдохновления. "Твиттер" для дизайнеров
http://designers.mx - вдохновение для дизайнера
http://cvparade.com - вдохновение типографика

Вдохновляжки
http://noteandpoint.com
http://bookcoverarchive.com
http://creattica.com/retouch/latest-designs
http://revision.ru русский
http://www.awwwards.com
http://www.typographyserved.com ещё одна вдохновлялка, на этот раз типографическая


Небольшой CSS респонсивный фрэймворк. (мини версия твиттер бутстрапа и похожих фв).
Kube

www.jsfiddle.net - песочница для веб-разработчиков. HTML, CSS, JavaScipt и результат.
www.blindtextgenerator.com - генератор текстов-рыб.
www.typetester.org - Типографика, подбор шрифтов.
lea.verou.me/css3patterns/ background паттерны на CSS3
subtlepatterns.com - обновляемая коллекция bg паттернов
www.tartanmaker.com - генератор тартан bg паттернов
www.stripemania.com - генератор паттернов из линий.
www.stripegenerator.com - ещё один генератор паттернов из линий.
bgmaker.ventdaval.com - онлайн редактор для создания собственный фоновых паттернов.
www.pixelknete.de/dotter/ - генератор точечных фонов
www.patterncooler.com - генератор/редактор фоновых паттернов. (весьма интересная штуковина)
bgpatterns.com - снова bg паттерны.
procssor.com - форматирование CSS кода.
css3generator.com - CSS3 генератор
csstemplater.com - генератор HTML+CSS шаблонов
0to255.com- подбор цвета.
colorschemedesigner.com - подбор цветовой палитры.
pictaculous.com - ещё один генератор цветовой палитры из изображения
kuler.adobe.com - подбор цветовой палитры
www.spritebox.net - нарезка картинки на CSS спрайты 
www.performable.com/buttons - создание дизайнов кнопок
framebox.org - прототипирование веб-интерфейсов
getcover.ru - генератор "рамок" браузера или телефона. примечателен кнопкой "Забацать"
pixlr.com/editor/ - Растровый онлайн редактор
favicon.ru - редактор fav-иконки для сайта
dribbble.com - в поисках вдохновления. "Твиттер" для дизайнеров.

Сервисы для генерации красивых кнопок на css
http://css-tricks.com/examples/ButtonMaker/
http://dabuttonfactory.com/
и множество других симапатичностей
http://css-tricks.com/downloads/

http://colorscheme.ru/ Сервис для подборки цветовых схем
http://favigen.com/ Сервис для генерации фавиконок для сайта
http://www.colorzilla.com/gradient-editor/ Сервис для генерации градиентов на css
http://border-image.com/ Сервис для создания рамок для рисунков
http://www.fontsquirrel.com/fontface/generator Font-face Kit Generator - генерация наборов шрифтов для кроссбраузерного отображения нестандартного шрифта на сайте

Генераторы прелоадеров
http://www.ajaxload.info/
http://preloaders.net/

http://cufon.shoqolate.com/generate/ Генератор Cufon шрифтов
http://www.typograf.ru/ Web типограф
http://popinbuilder.icoder.com/ Сервис для генерации popup баннеров

 http://www.quirksmode.org/ - информация о совместимости браузеров с некоторыми вещами CSS и JS. Тестовые страницы по каждому пункту.
В частности:

• http://www.quirksmode.org/html5/index.html - HTML5
• http://www.quirksmode.org/css/contents.html - селекторы и свойства CSS

2. http://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока.

http://css-sprit.es/ генератор спрайтов
http://bearcss.com/ генератор css для html
http://www.excssive.com/ онлайн компрессор css
http://colllor.com/ подбор цвета тени
http://kraken.io/ онлайн оптимизация изображений
http://cssload.net/ генератор прелоадеров
http://www.css3.me/ css3 генератор
http://www.phpform.org/ генератор форм
http://3d-pack.com/ - генератор 3D изображений для коробки
http://www.roundpic.com/ скругление углов изображения
http://snippets.su/ сниппеты

Да, еще - смотреть в обязательном порядке. Справочник с возможностью редактирования кода
http://www.w3schools.com/

Валидаторы

W3C Markup Validation Service 
W3C CSS Validation Service
XML Validation

weavesilk.com - создание красивых обоев на основе одного эффекта. 
fontstruct.com - создание шрифтов онлайн.
designers.mx - вдохновение для дизайнера.
cvparade.com - вдохновение типографика.
htaccess.madewithlove.be - htaccess тестер
www.asciiflow.com - создание ASCII таблиц
microjs.com - набор минимизированных javascript скриптов. Очень много.
loads.in - насколько быстро грузиться ваш сайт.
lorempixel.com - генератор картинок-рыб (по аналогии с текстом-рыбой)
Дайджесты на хабре - много полезных и интересных ссылок

Вдохновляжки. 

noteandpoint.com
bookcoverarchive.com
creattica.com/retouch/latest-designs
revision.ru русский.
www.awwwards.com
www.typographyserved.com

Бесплатные иконки
thenounproject.com

Подборка ссылок на статьи о типографике:

Основы типографики
Типографика для веб
Типографика на Вебе
Типографика WEB
Типографика и веб: правила хорошего тона

3 примера сайтов с прекрасной типографикой:
www.yesnurse.co.uk
www.hausofdesign.co.uk
demo.fotosynthes.ru/designpile/

Расширение для Photoshop, умеющее конвертировать стили слоя в css3 код: http://css3ps.com

Онлайн генераторы CSS3 — в обойме инструментов web-разработчика

Обзор онлайн-сервисов для веб-разработки и дизайна

Онлайн генератор css спрайтов:
http://simpreal.org.ua/csssprites
Написан мной лично, как говорится, "для себя" 
Умеет:

• открывать несколько картинок,
• делить картинки на области,
• объединять области в один спрайт
• редактировать способ расположения областей
• генерировать и настраивать стили
• сохранять спрайты и стили
• сохранять и открывать проект
• для удобства поддерживается сохранение в zip архив

Типовые макеты 
http://htmlbook.ru/samlayout/tipovye-makety
http://blog.html.it/layoutgala/
http://www.dynamicdrive.com/style/layouts/category/C10/

Инструмент для сортировки CSS-свойств в нужном порядке
http://csscomb.ru/

Оптимизация изображений http://www.punypng.com/

HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты. http://html5boilerplate.com/

PHP online 
http://writecodeonline.com/php/

50 ресурсов для веб-разработчиков за 2012 год

Подборка цвета, очень важно для начинающих и дальтоников!

https://kuler.adobe.com/
http://colorschemedesigner.com/

Resolution Test

https://lh4.googleusercontent.com/Y2...0-h400-e365-rw

Установить расширение->

Can I use... - очень полезный сайт: в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии.


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

Шапки для сайта - все шапки разбиты на категории, разные размеры, скачивание с Яндекс диска.

Трансформации для IE http://www.useragentman.com/IETransformsTranslator/

Правильные doctype и запрещенные в них HTML теги

CSS Hat - приложение для конвертации стилей слоев Photoshop в стили CSS.
Плагин платный.
Статья о приложении.

Сервис для генерации красивых уголков на css3 border-radius 
http://finego.ru/tools/border-radius-generator

Parfait - очень удобный сервис для верстальщиков. Позволяет очень быстро и легко "нарезать" и сохранить PSD-макет, определяет css-свойства каждого элемента макета по клику на нем, расстояния между элементами и многое другое. Отличная замена Photoshop-у.



http://rolar.ru/view_download.php?id=61 - Линейка для веб-программиста.
http://www.blacksunsoftware.com/colormania.html - color mania -программа для выбора цвета на экране
мап генератор - http://imagemap-generator.dariodomi.de/
генератор градиента - http://css-helper.ru/gradients/
генератор кнопок - http://css3button.net/

это вот для работы бордер радиус в IE - http://css3pie.com/documentation/getting-started/ нужно скачать и кинуть в папку с сайтом а потом применить код который написан на этой странице в разделе №3.

здесь рассказывается как сделать внутренние тени с помощью css3 - http://habrahabr.ru/post/154211/
генератор теней - http://css3gen.com/box-shadow/
разновидные беграунды - http://patterns.ava7.com/
wordpress темы - http://yithemes.com/
как сделать градиент для текста - http://www.artlebedev.ru/tools/techn...gradient-text/
как сделать плавные переходы при наведении на блок - http://shpargalkablog.ru/2011/07/tra...aciya-css.html

http://css-sprit.es/ генератор спрайтов - ссылка не работает, не открывается просто грузится и не открывается, есть ли какие-то еще генераторы спрайтов? мне просто на сайт нужно
посмотрите тут]

http://shpargalkablog.ru/2011/07/tra...aciya-css.html - вот тут есть статья по свойству transition в css3
http://habrahabr.ru/post/126207/ - как сделать разные фигуры блоков с помощью чистого!! без картинок!! csshttp://border-image.com/ - Генератор Border-image
http://www.lipsum.com/ - Генератор текста Lorem Ipsum
http://www.content-watch.ru/text/ - Проверка текста на уникальность

responsinator: Вёрстка для мобильных устройств, как сайт будет выглядеть на разных разрешениях экрана
http://www.responsinator.com/

Удобный формат ....много полезного.

http://beaqn.in/frontend/

Маленькая и очень удобная программка для определения параметров цвета любого элемента на экране, типа Колормании. Показывает коды HEX, HTML, RGB, CMYK, HSV

http://www.nattyware.com/pixie.php

http://generat.16mb.com

Удобно. Начинающим должно помочь.

http://codepen.io/ классный портал что бы потестить свой код и поделится с остальными
Вроде еще не было

https://babeljs.io/ 
es6 -> es5 компилятор

сайт с иконками. Все форматы. Бесплатный http://www.flaticon.com

Готовой коллекции сочетающихся цветов не было. Меня вот что впечатлило:

Оптимальные сочетания цветов
В помощь дизайнеру: оптимальные сочетания цветов