@Taatshi

В этой теме собираем все, что может понадобиться для работы web-мастера. Платные ресурсы - не предлагать!

Справочники
http://www.w3schools.com/ - справочник с возможностью редактирования кода
https://html5css.ru/ - справочник
https://hcdev.ru/ - Справочник HTML и CSS, также есть справочники с переводом на русский: Typescript, Angular, React, Node.js, Python 3, XSLT
https://runebook.dev/ - переводы документации на разные библиотеки в одном месте

Песочницы
https://codepen.io/ - html/css/js
https://onlinephp.io/ - php

HTML
http://www.phpform.org/ - генератор форм
https://www.w3schools.com/tags/ref_html_dtd.asp - все правильные doctype и запрещенные в них HTML теги
uncss-online.com - удаление неиспользуемых стилей + Shorthand

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

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

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

Типовые макеты
http://htmlbook.ru/samlayout/tipovye-makety
http://www.dynamicdrive.com/st... egory/C10/

CSS
http://jigsaw.w3.org/css-valid... _by_upload онлайн валидатор. Не работают стили - вам сюда
http://css3generator.com - CSS3 генератор
http://css-tricks.com/examples/ButtonMaker/ сервис для генерации кнопок на css
http://dabuttonfactory.com/ сервис для генерации кнопок на css
http://www.colorzilla.com/gradient-editor/ Сервис для генерации градиентов на css
http://border-image.com/ Сервис для создания рамок для рисунков
http://bearcss.com/ генератор css для html
http://www.useragentman.com/IE... ranslator/ Трансформации для IE
http://www.cssmatic.com/box-shadow генератор теней
http://flexbox.help/ как будет выглядеть выравнивание и расположение блоков при различных вариантах использования свойства flex
https://protocoder.ru/css/strokeTextGen обводка текста на css3

http://lea.verou.me/css3patterns/ - background-паттерны на CSS3
http://subtlepatterns.com - обновляемая коллекция bg-паттернов


Компрессия кода
CSS
http://www.cleancss.com
http://www.cssportal.com/css-optimize/
http://www.generateit.net/css-optimize/
http://www.homepage-performanc... -tool.html
http://www.pagecolumn.com/tool/css_compressor.htm
http://www.lotterypost.com/css-compress.aspx
http://www.codebeautifier.com/
http://www.askapache.com/onlin... press-css/
http://tools.arantius.com/css-compressor
http://www.phpinsider.com/compress_css.php
http://www.creativyst.com/Prod/3/

JavaScript
https://jscompress.com/
https://www.toptal.com/develop... -minifier/
https://refresh-sf.com/
https://www.digitalocean.com/c... ols/minify


Расширение для Photoshop, умеющее конвертировать стили слоя в css3 код: https://css3ps.com
Понимает линейные градиенты, тени, обводки, радиусы фигур, размеры фигур, семейство шрифта и др.

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


Типографика, шрифты
Google Web Fonts - Google Web Fonts
fontello.com - Генератор иконочных шрифтов
https://webfonts.pro/ - подборка шрифтов
https://grtcalculator.com/ - подбор размера шрифта, междустрочного интервала и ширины контента на основе золотого сечения
http://www.fontsquirrel.com/fo... e/cyrillic подборка кириллических шрифтов
www.blindtextgenerator.com - генератор текстов-рыб
http://www.typograf.ru/ Web типограф
http://fontstruct.com - создание шрифтов онлайн
http://www.font2web.com - конвертация шрифтов под web

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


Дизайн
www.tartanmaker.com - генератор тартан bg паттернов
www.stripegenerator.com - генератор паттернов из линий
www.patterncooler.com - генератор/редактор фоновых паттернов
http://0to255.com - подбор цвета
https://paletton.com/ - подбор цветовой палитры
https://color.adobe.com/ru/create - подбор цветовой палитры
http://pixlr.com/editor/ - растровый онлайн редактор
http://colorscheme.ru/ - сервис для подборки цветовых схем
http://colllor.com/ - подбор цвета тени
http://kraken.io/ онлайн оптимизация изображений
http://weavesilk.com - создание красивых обоев на основе одного эффекта
http://thenounproject.com - бесплатные иконки
http://www.iconsearch.ru/ - поиск иконок по ключевым словам
http://www.iconfinder.com/ - Поиск иконок по ключевым словам
http://labs.tineye.com/multicolr/ - поиск фотографий по цветовой гамме
http://www.colorsontheweb.com/colorwizard.asp - подбор гармоничных цветов
http://patterns.ava7.com/ - паттерны
https://cloudconvert.com/eps-to-svg - конвертация фотошоп файлов eps в svg
SVGO - минификация SVG , полезен после для чистки svg после редакторов вроде Illustrator или Inkscape


Генераторы прелоадеров
http://mentalized.net/activity-indicators/


Проверка на валидность и совместимость
http://www.responsinator.com/ - как сайт будет выглядеть на разных разрешениях экрана
https://www.browserstack.com/responsive - online mobile tester
https://chrome.google.com/webs... boaccidbal - Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера
Can I use... - в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии

Проверяйте свои творения, прежде чем это сделает за вас посетитель вашего сайта
W3C Markup Validation Service
W3C CSS Validation Service
XML Validation

Разное
http://getcover.ru - генератор "рамок" браузера или телефона. примечателен кнопкой "Забацать"
http://snippets.su/ - сниппеты
http://htaccess.madewithlove.be - .htaccess-тестер
www.asciiflow.com - создание ASCII таблиц
http://www.maschek.hu/imagemap/imgmap - генератор карт со сложными полигонами
http://word2cleanhtml.com/ - очистка текстов от стилей word перед вставкой в материалы
http://www.comslider.com/ - генератор каруселей
unicode-table.com - таблица символов Юникода
http://html5boilerplate.com/ - HTML/CSS/JS шаблон
Обзор онлайн-сервисов для веб-разработки и дизайна


Интересные сайты
https://drafts.csswg.org/ - черновики рекомендаций css с историей измнения
http://dribbble.com - в поисках вдохновения. "Твиттер" для дизайнеров
http://cvparade.com - вдохновение типографика
http://noteandpoint.com
http://bookcoverarchive.com
http://www.awwwards.com
http://www.typographyserved.com
https://tympanus.net/codrops/category/playground/
https://css-art.com - для вдохновения и обучения

51

@SlavAz

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 - в поисках вдохновления. "Твиттер" для дизайнеров.

20

@Taatshi

Еще немного

Сервисы для генерации красивых кнопок на 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 баннеров

11

Vovan-VE

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

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

14

LK

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

11

@Taatshi

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/

Добавлено через 18 минут
Коды от Стью Николса

http://www.cssplay.co.uk/
http://www.stunicholls.com

Внимательно читайте по авторским правам - для использования на коммерческих ресурсах для многих кодов донат обязателен!

11

LK

Проверяйте свои творения, прежде чем это сделает за вас посетитель вашего сайта .

W3C Markup Validation Service
W3C CSS Validation Service
XML Validation

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

7

@SlavAz

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

Добавлено через 9 минут
Дайджесты на хабре - много полезных и интересных ссылок

Добавлено через 2 часа 23 минуты
Вдохновляжки.

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

Добавлено через 1 минуту
Бесплатные иконки
thenounproject.com

Добавлено через 18 минут
Внезапно ещё одна вдохновлялка, на этот раз типографическая: www.typographyserved.com

11

Vovan-VE

http://www.iconsearch.ru/ - Поиск иконок по ключевым словам.
http://www.iconfinder.com/ - Поиск иконок по ключевым словам.
http://labs.tineye.com/multicolr/ - Поиск фотографий по цветовой гамме.

10

@SlavAz

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

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


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

10

@PhotoShopRND

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

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

3

LK

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

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

3

simpreal

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

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

Правда тестировал только в FireFox и Chrome

@Taatshi

simpreal, посмотрела Ваш ресурс - интересно, понятно и удобно. Оттестируйте в IE 8-10 и Opera и отпишитесь. Я тоже посмотрю пока - возможно, добавим в список.

2

@koza4ok

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

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

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

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

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

4

simpreal

Извиняюсь, если у кого-то мой сервис работал не корректно. На данный момент я исправил некоторые печальные ошибки и протестировал в Опере. Но в IE поддержка FileAPI начинается только с 10 версии, так что пока не могу протестировать в IE. В Safari поддержка FileAPI начинается с 6-й версии, которая существует только под мак.
Также, скоро будет офлайн версия для Windows. Буду рад любым замечаниям и предложениям

LK

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

1

@Taatshi

simpreal, добавила. Ждем оффлайн версию)

1

@Wahlberg

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

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

0

@Taatshi

Wahlberg, уже оба есть. Но спасибо за попытку.

0