В помощь каждому

derzaiii · 05-10-2015, 15:05:02

Решил открыть такую тему где будет подборка ссылок на полезные и важные ресурсы которые в той или иной степени помогают в вёрстке.

Теперь все ссылки которые будут в постах я буду переносить в шапку.

Онлайн справочник HTML/CSS [spoiler] - http://htmlbook.ru/ [/spoiler]

CSS3 hover effects [spoiler]-http://habrahabr.ru/post/265451/ [/spoiler]

Cайт с шрифтами (полезно если нет подходящего шрифта в https://www.google.com/fonts/) - [spoiler]http://fonts4web.ru/[/spoiler]

Интересности на html5/css3 - [spoiler]http://webremeslennik.ru/[/spoiler]

Буржуйский сайт показывающий поддерживает ли браузер нужное для вас css свойство или нужно использовать префиксы[spoiler] http://caniuse.com/[/spoiler]

Активно пользуюсь одной фишкой(не помню где нашел) - помогает проверять адаптивный дизайн. Создаете новую закладку для сайта, и вместо адреса вставляете:
[spoiler]

Код Выделить

javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return%20false;d.write('<!DOCTYPE%20HTML><html%20style="opacity:0;"><head><meta%20charset="utf-8"/></head><body><a%20data-viewport="320x480"%20data-icon="mobile">Mobile%20(e.g.%20Apple%20iPhone)</a><a%20data-viewport="320x568"%20data-icon="mobile"%20data-version="5">Apple%20iPhone%205</a><a%20data-viewport="600x800"%20data-icon="small-tablet">Small%20Tablet</a><a%20data-viewport="768x1024"%20data-icon="tablet">Tablet%20(e.g.%20Apple%20iPad%202-3rd,%20mini)</a><a%20data-viewport="1280x800"%20data-icon="notebook">Widescreen</a><a%20data-viewport="1920%C3%971080"%20data-icon="tv">HDTV%201080p</a><script%20src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));

[/spoiler]
теперь находясь на нужной сайте кликаете по этой ссыле - появляется панель где можно выбирать нужные устройства.

Хороший ресурс для тестов или если нужно поделиться кодом для отладки [spoiler]http://jsfiddle.net/ [/spoiler]

Проверяем как сайт выглядит в разных браузерах[spoiler] http://browsershots.org/ [/spoiler]

Генератор CSS спрайтов[spoiler]http://wearekiss.com/spritepad[/spoiler]

Оригинальная прокрутка для сайта [spoiler]http://www.pixxelfactory.net/jInvertScroll/[/spoiler]

Отличный сервис для конвертации простых SVG изображение в анимационные [spoiler]http://lazylinepainter.info/[/spoiler]

Ссылки от Dogica

Это отличное руководство описывает правила для оформления и форматирования HTML и CSS кода - [spoiler]http://habrahabr.ru/post/143452/ [/spoiler]

Подборка впечатляет - дизайнерам в помощь![spoiler] http://webformyself.com/50-fragmentov-css-poleznyx-kazhdomu-dizajneru/ [/spoiler]

Компрессоры JS кода [spoiler]http://jscompress.com или http://javascriptcompressor.com [/spoiler]

Компрессоры CSS кода[spoiler]http://www.minifycss.com/css-compressor или http://cssminifier.com [/spoiler]

Размер странички вашего сайта [spoiler]http://main-ip.ru/test/analizator/ [/spoiler]

КОД ОТВЕТА СТРАНИЧКИ + описание всех возможных кодов (речь о 404.. 503 итд) [spoiler]http://www.cy-pr.com/tools/header/ [/spoiler]

Потрясный генератор 3D текстов! (для русского выбирайте языки с Multilanguage в скобках) [spoiler]http://textanim.com/[/spoiler]

Супер редактор для ЛЮБЫХ видов файлов (вкл CSS HTML JS...) [spoiler]https://atom.io/ -[/spoiler]

Супер редактор для ЛЮБЫХ видов файлов (вкл CSS HTML JS...) [spoiler]https://notepad-plus-plus.org/ - [/spoiler]

Отличный чат! Можно болтать вообще без регистрации. Можно встроить в свой сайт.. [spoiler]http://www.chatovod.ru [/spoiler]

Жмет БЕЗ ПОТЕРИ КАЧЕСТВА картинки *jpg и *png - [spoiler]http://www.tinypng.com - [/spoiler]

Жмет БЕЗ ПОТЕРИ КАЧЕСТВА картинки *gif (включая Animated!!!) и *svg [spoiler]http://www.compressor.io - [/spoiler]

Переводит (конвертирует) файлы практически любого типа в любой другой [spoiler]http://www.zamzar.com/ [/spoiler]

Онлайн Редактор который умеет работать (и очень хорошо) с Animated Gif [spoiler]http://www.online-image-editor.com[/spoiler]

Онлайн Фотошоп [spoiler]https://pixlr.com/editor/ [/spoiler]

Онлайн графический редактор с хорошими возможностями сжатия и фильтров для картинок [spoiler]http://webresizer.com/resizer/[/spoiler]

Проверка на совместимость всеми возможными браузерами [spoiler]http://browsershots.org/ или https://spoon.net/browsers или https://www.browserling.com/ [/spoiler]

очень адекватный переводчик для сайта который в отличии от Гугль Транслэйт не портит разметку [spoiler]https://translate.yandex.ru/developers/website-widget[/spoiler]

ну и как же без нашего уважаемого http://www.sbup.com/ - Лучший в рунете бесплатный онлайн аудит для вашего сайта!

Очень интересная Онлайн CSS студия [spoiler]http://enjoycss.com/[/spoiler]

Хороший онлайн компрессор и конвертор для PDF файлов!
Так же умеет разделять на фрэймы и записывать в отдельные JPG файлы постранично [spoiler]http://smallpdf.com/[/spoiler]

Ссылки от Tekstilgrad

Сервис который поможет подобрать правильную цветовую гамму к выбранному цвету [spoiler] http://www.paletton.com/ [/spoiler]

Ссылки от Константин

Лучшая русская обучалка хтмл, ксс [spoiler]htmlacademy.ru [/spoiler]

Ссылки от feuer81

Буржуйский обучающий бесплатный сайт. На нем можно изучить html,css,markup,php,sql,ruby,js,jquery,angular.js,ruby,phyton [spoiler]Codecademy.com[/spoiler]

Ссылки от Imtecseo

Тестирование нагрузки на сайт [spoiler]https://pro.loadstorm.com/[/spoiler]

Ссылки от shаmanyara

Проверка визуального отображения и адаптивности сайта под различные устройства и экраны - [spoiler]http://quirktools.com/screenfly/ [/spoiler]

Ссылки от Старый

Генерация няшек CSS [spoiler]http://css3generator.com[/spoiler]

Генерация валидных CSS градиентов, в том числе из картинок [spoiler]http://www.colorzilla.com/gradient-editor/[/spoiler]

Предлагайте те ресурсы с которыми работаете вы - будем вместе расширять список

Dogica · 05-10-2015, 21:17:51

Спасибо за хорошие ресурсы
Пожалуйста обратите внимание на вот эти полезнейшие и конечно бесплатные онлайн штуки:

http://jscompress.com или http://javascriptcompressor.com - компрессоры JS кода
http://www.minifycss.com/css-compressor или http://cssminifier.com - компрессоры CSS кода

http://main-ip.ru/test/analizator/ - Размер странички вашего сайта

http://www.cy-pr.com/tools/header/ - КОД ОТВЕТА СТРАНИЧКИ + описание всех возможных кодов
(речь о 404.. 503 итд)

http://textanim.com/ - Потрясный генератор 3D текстов! (для русского выбирайте языки с Multilanguage в скобках

https://atom.io/ - супер редактор для ЛЮБЫХ видов файлов (вкл CSS HTML JS...)
https://notepad-plus-plus.org/ - супер редактор для ЛЮБЫХ видов файлов (вкл CSS HTML JS...)

http://www.chatovod.ru - Отличный чат! Можно болтать вообще без регистрации. Можно встроить в свой сайт..

http://www.tinypng.com - Жмет БЕЗ ПОТЕРИ КАЧЕСТВА картинки *jpg и *png
http://www.compressor.io - Жмет БЕЗ ПОТЕРИ КАЧЕСТВА картинки *gif (включая Animated!!!) и *svg
http://www.zamzar.com/ - Переводит (конвертирует) файлы практически любого типа в любой другой
http://www.online-image-editor.com - Онлайн Редактор который умеет работать (и очень хорошо) с Animated Gif
https://pixlr.com/editor/ - Онлайн Фотошоп
http://webresizer.com/resizer/ - Онлайн графический редактор с хорошими возможностями сжатия и фильтров для картинок

http://browsershots.org/ или https://spoon.net/browsers или https://www.browserling.com/ - Проверка на совместимость всеми возможными браузерами

https://translate.yandex.ru/developers/website-widget - очень адекватный переводчик для сайта который в отличии от Гугль Транслэйт не портит разметку

ну и как же без нашего уважаемого http://www.sbup.com/ - Лучший в рунете бесплатный онлайн аудит для вашего сайта!

Tekstilgrad-Maderas · 05-10-2015, 23:11:12

Добавлю
http://www.paletton.com/ - сервис который поможет подобрать правильную цветовую гамму к выбранному цвету

[Константин] · 06-10-2015, 12:58:49

htmlacademy.ru — лучшая русская обучалка хтмл, ксс

Dogica · 06-10-2015, 16:22:04

Цитата: [Константин] от 06-10-2015, 12:58:49
htmlacademy.ru — лучшая русская обучалка хтмл, ксс

вау! реально хороший ресурс в закладочки
спасибо вам

Dogica · 10-10-2015, 17:47:51

Очень интересная Онлайн CSS студия..

http://enjoycss.com/

derzaiii · 10-10-2015, 20:05:50

http://jsfiddle.net/ - Хороший ресурс для тестов или если нужно поделиться кодом для отладки

Dogica · 10-10-2015, 20:06:22

Хороший онлайн компрессор и конвертор для PDF файлов!
Так же умеет разделять на фрэймы и записывать в отдельные JPG файлы постранично

http://smallpdf.com/

derzaiii · 13-10-2015, 14:36:48

http://browsershots.org/ - Проверяем как сайт выглядит в разных браузерах

feuer81 · 15-10-2015, 07:10:40

Codecademy.com - буржуйский обучающий бесплатный сайт. На нем можно изучить html,css,markup,php,sql,ruby,js,jquery,angular.js,ruby,phyton

В помощь каждому

Есть идея улучшить тему, ВАЖНО ваше мнение