Web разработка > HTML и CSS

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

(1/7) > >>

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

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

Онлайн справочник HTML/CSS (нажмите чтобы показать/скрыть) - http://htmlbook.ru/
CSS3 hover effects (нажмите чтобы показать/скрыть)-http://habrahabr.ru/post/265451/
Cайт с шрифтами (полезно если нет подходящего шрифта в https://www.google.com/fonts/) - (нажмите чтобы показать/скрыть)http://fonts4web.ru/
Интересности на html5/css3 - (нажмите чтобы показать/скрыть)http://webremeslennik.ru/
Буржуйский сайт показывающий поддерживает ли браузер нужное для вас css свойство или нужно использовать префиксы (нажмите чтобы показать/скрыть) http://caniuse.com/
Активно пользуюсь одной фишкой(не помню где нашел) - помогает проверять адаптивный дизайн.  Создаете новую закладку для сайта, и вместо адреса вставляете:
(нажмите чтобы показать/скрыть)
--- Код: ---Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
--- Конец кода ---
теперь находясь на нужной сайте кликаете по этой ссыле - появляется панель где можно выбирать нужные устройства.

Хороший ресурс для тестов или если нужно поделиться кодом для отладки (нажмите чтобы показать/скрыть)http://jsfiddle.net/
Проверяем как сайт выглядит в разных браузерах (нажмите чтобы показать/скрыть) http://browsershots.org/
Генератор CSS спрайтов (нажмите чтобы показать/скрыть)http://wearekiss.com/spritepad
Оригинальная прокрутка для сайта (нажмите чтобы показать/скрыть)http://www.pixxelfactory.net/jInvertScroll/
Отличный сервис для конвертации простых SVG изображение в анимационные (нажмите чтобы показать/скрыть)http://lazylinepainter.info/

Ссылки от Dogica

Это отличное руководство описывает правила для оформления и форматирования HTML и CSS кода - (нажмите чтобы показать/скрыть)http://habrahabr.ru/post/143452/
Подборка впечатляет - дизайнерам в помощь! (нажмите чтобы показать/скрыть) http://webformyself.com/50-fragmentov-css-poleznyx-kazhdomu-dizajneru/
Компрессоры JS кода (нажмите чтобы показать/скрыть)http://jscompress.com или http://javascriptcompressor.com
Компрессоры CSS кода (нажмите чтобы показать/скрыть)http://www.minifycss.com/css-compressor или http://cssminifier.com 
Размер странички вашего сайта (нажмите чтобы показать/скрыть)http://main-ip.ru/test/analizator/
КОД ОТВЕТА СТРАНИЧКИ + описание всех возможных кодов (речь о 404.. 503 итд) (нажмите чтобы показать/скрыть)http://www.cy-pr.com/tools/header/
Потрясный генератор 3D текстов! (для русского выбирайте языки с Multilanguage в скобках) (нажмите чтобы показать/скрыть)http://textanim.com/
Супер редактор для ЛЮБЫХ видов файлов (вкл CSS HTML JS...) (нажмите чтобы показать/скрыть)https://atom.io/ -
Супер редактор для ЛЮБЫХ видов файлов (вкл CSS HTML JS...) (нажмите чтобы показать/скрыть)https://notepad-plus-plus.org/ -
Отличный чат! Можно болтать вообще без регистрации. Можно встроить в свой сайт.. (нажмите чтобы показать/скрыть)http://www.chatovod.ru
Жмет БЕЗ ПОТЕРИ КАЧЕСТВА картинки *jpg и *png - (нажмите чтобы показать/скрыть)http://www.tinypng.com -
Жмет БЕЗ ПОТЕРИ КАЧЕСТВА картинки *gif (включая Animated!!!) и *svg (нажмите чтобы показать/скрыть)http://www.compressor.io -
Переводит (конвертирует) файлы практически любого типа в любой другой (нажмите чтобы показать/скрыть)http://www.zamzar.com/
Онлайн Редактор который умеет работать (и очень хорошо) с Animated Gif (нажмите чтобы показать/скрыть)http://www.online-image-editor.com
Онлайн Фотошоп (нажмите чтобы показать/скрыть)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/ - Лучший в рунете бесплатный онлайн аудит для вашего сайта!

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

Ссылки от Tekstilgrad 

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

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

Лучшая русская обучалка хтмл, ксс (нажмите чтобы показать/скрыть)htmlacademy.ru

Ссылки от feuer81  

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

Ссылки от Imtecseo  

Тестирование нагрузки на сайт (нажмите чтобы показать/скрыть)https://pro.loadstorm.com/

Ссылки от shаmanyara

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

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

Генерация няшек CSS (нажмите чтобы показать/скрыть)http://css3generator.com
Генерация валидных CSS градиентов, в том числе из картинок (нажмите чтобы показать/скрыть)http://www.colorzilla.com/gradient-editor/

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

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

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:
Добавлю
http://www.paletton.com/ - сервис который поможет подобрать правильную цветовую гамму к выбранному цвету  ;)

[Константин]:
htmlacademy.ru — лучшая русская обучалка хтмл, ксс

Dogica:

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

--- Конец цитаты ---

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

Навигация

[0] Главная страница сообщений

[#] Следующая страница

Перейти к полной версии