/WebRes

Useful resources for frontend :boom: :boom: :boom:

Как улучшить список?

How to improuve this list?
  1. Создайте свой форк репозитория и склонируйте его.
  2. Исправьте/дополните файл у себя.
  3. Сделайте commit и push вашей копии в форк на GitHub.
  4. Пришлите Pull-запрос, я добавлю ваши изменения.
  5. Если Вы обнаружили битую ссылку, пожалуйста, создайте тикет.
  1. Fork this repository and clone it.
  2. Make a fix or addition in your copy.
  3. Commit and push your changes.
  4. Make a pull request.
  5. If you found a broken link, please create a ticket.

Оглавление / Table of contents

Graphic & Design services

Resource Lang. Description
Real Favicon Generator 🇬🇧 Online favicon generator.
Photopea 🇬🇧 Online editor of PSD, XCF and Sketch formats.
Fotor 🇷🇺 Простой графический редактор.
Clara.io 🇬🇧 Free 3D online redactor.
Boxy SVG 🇬🇧 Free online SVG editor.
Tinypng 🇬🇧 Free JPEG optimizator.
Adobe Assets 🇬🇧 Adobe online tools.
Palettable 🇬🇧 Color palettes online generator.
Adobe Color 🇷🇺 Цветовой круг от Adobe.
Material design color tool 🇬🇧 Material design color palette creator from google.
Draw.io 🇷🇺 Сервис для создания диаграмм, блок-схем и графиков. Есть экспорт и синхронизация с Dropbox и Github.
Getcover 🇷🇺 Сервис шаблонов разлчных устройств: мобильные телефоны, ноутбуки, браузеры.
Placeholder 🇬🇧 Online tools for making placeholder images.
Canva 🇷🇺 Сервис для создания дизайнов для социальных сетей.
easelly 🇬🇧 Free service for creating infographics.
Joxi 🇷🇺 Сервис для создания и обмена скриншотами.
Gravit Desigener 🇬🇧 A full featured free vector design app.
Coolors 🇬🇧 Fast color sheme generator.

Design resources

Resource Lang. Description
Daily UI 🇬🇧 100-day challenge for designers.
0 to 255 🇬🇧 A color tool for finding lighter and darker colors based on any color.
Depositphotos 🇷🇺 Стоковые фото, умеренная цена.
Dribble Freebie 🇬🇧 Free resources on Dribble.
Fribbble 🇬🇧 Free PSD files and other free design resources by Dribbblers.
Graphic boat 🇬🇧 Free and commercial digital items.
Unsplash 🇬🇧 Free high-quality photos.
The Noun Project 🇬🇧 Big storage of icons, free and commercial.
Discover color 🇷🇺 Красивые цветовые палитры и сочетания цветов.
Подборка материалов о материальном дизайне 🇷🇺 Объяснение, ссылки на официальные руководства для дизайнеров и разработчиков, исходники и неофициальные вспомогательные материалы (2015).
Руководство Гугл по материальному дизайну 🇷🇺 Перевод от CSS-live.ru
Creative Market: Free Goods of the Week 🇬🇧 Weekly bundle of 6 free digital goods. Need to subscribe for newsletters.
Создание дизайна Landing Page 🇷🇺 Руководство по создания дизайна для Landing page, статья на Habrahabr (2015 г.)
8 правил подбора цветовой палитры, которые должны знать все 🇷🇺 Обзорная статья на Habrahabr о правилах подбора цветовой палитры (2017 г.)
UISpace 🇬🇧 Thousand of great freebies: graphics, ui mockups and illustrations.
Up Labs 🇬🇧 Free and commercial graphic resources.
Symu 🇬🇧 Free psd templates.
Coverr 🇬🇧 Free videos for websites.
Pexels Videos 🇬🇧 Free videos for websites.

SVG

Resource Lang. Description
Hero Patterns 🇬🇧 SVG patterns generator.
SVG-паттерны 🇷🇺 Большая статья о том, что такое svg-паттерны и как они работают.
Trianglify generator 🇬🇧 Beautigul SVG-backgrouns with gradients and triangle shapes.
Geopattern 🇬🇧 Randomly generated patterns.

Other services

Resource Lang. Description
Toggl 🇬🇧 Time tracker, has free tariff.
Trello 🇷🇺 Планировщик задач с карточками и списками.
Testprovider 🇷🇺 Тестирование по ИТ-специальностям.
Online Mockups 🇬🇧 Online mockup tools.
Google Fonts 🇬🇧 Google fonts online tools.
Font Awesome 🇬🇧 Font awesome home page.
Icofont 🇬🇧 Many icons.
Feather Icons 🇬🇧 Minimalistic iconic font.
Проверка оптимизации сайтов от Google 🇷🇺 Онлайн сервис проверки сайтов на оптимизацию для мобильных устройств.
CSSMatic 🇷🇺 Online tools for generating CSS code of grabients, box shadows, border radius and noise textures.
Caniuse 🇬🇧 Browser support tables for HTML5, CSS3, JS etc.
Todoist 🇷🇺 Планировщик задач и списки дел. Есть бесплатный тарифный план.
CSV converter 🇬🇧 Service that converts csv/xls files to other formats, including JSON.

CSS

Resource Lang. Description
Modernizr: практическое применение 🇷🇺 Описание библиотеки Modernizr
Sasha Tran 🇬🇧 ▶️ CSS drawind screencast.
Daily CSS Images 🇬🇧 Free 50-day email challenge for mastering pure CSS images.
100 Days CSS 🇬🇧 Free 100-day email challenge for mastering pure CSS images.
A Beginner’s Guide to Pure CSS Images 🇬🇧 A detailed explanation of how to creating pure CSS images.
How to Make Pure CSS Images 🇬🇧 A 100% free crash course on mastering pure CSS images
An Intermediate Guide to Pure CSS Images 🇬🇧 A detailed explanation of how to creating pure CSS images. Part 2.
About normalize.css 🇬🇧 Nicolas Gallagher: normalize.css description.
Minsk CSS Meetup 🇷🇺 ▶️ Записи встреч Minsk CSS на Youtube.
На 100% правильный способ делать контрольные точки в CSS 🇷🇺 Про адаптивную верстку и контрольные точки в медиа-запросах.
О режимах наложения в CSS без тайн 🇷🇺 Обзорная статья о способах наложения слоев и режимах смешивания.
Modernizr 🇬🇧 JS-library, detects user browser features, add to build cross-browser valid code.
Как работает Flexbox — объясняем на больших, красочных GIF’ках 🇷🇺 Добробная статья с иллюстрациями о работе Flexbox. Часть 1.
Ещё больше о том как работает Flexbox — объясняем на больших, красочных GIF’ках 🇷🇺 Добробная статья с иллюстрациями о работе Flexbox. Часть 2.
Полное руководство по Flexbox 🇷🇺 Перевод статьи Криса Койера.
WAIT! Animate 🇬🇧 Free online CSS3 generator of animations.
CSS Animate 🇬🇧 Free online CSS3 generator of complicated animations.
Animista 🇬🇧 Free online CSS3 generator of animations with many presets.
CSS Hexagon, Please 🇬🇧 Free online CSS3 generator of hexagons.
CSS3 Maker 🇬🇧 Complete tools for generating CSS3 effects.
Westciv 🇬🇧 Box shadow, CSS Transforms, CSS Text Stroke and Gradients CSS3 sandbox.
Grabient 🇬🇧 Beautiful online CSS3 gradient generator.
CSS-таблицы 🇷🇺 Руководство по CSS - оформлению таблиц с примерами.
Tridiv 🇬🇧 Online editor for creating 3D models in CSS3.
Способы скрыть содержимое 🇷🇺 Сравнительная таблица
mini.css 🇬🇧 Light and easy to use css framework.
Hover.css 🇬🇧 Powerful library of CSS3 hover effects.
Minimamente 🇬🇧 CSS3 library of effects.
Хорошо ли Вы знаете линейные градиенты? 🇷🇺 Подробная статья про принцип работы линейных градиентов.
Геометрические фигуры на CSS 🇷🇺 Фигуры без использования clip-path
HTML color codes 🇬🇧 Web colors names.
Как создать адаптивную сетку 🇷🇺 Руководство по созданию адаптивной сетки для новичков.
Uigradients.com 🇬🇧 Collection of beatiful css-gradients.

HTML

Resource Lang. Description
HTML5 Specification 🇬🇧 W3C HTML5 specification.
HTML5.1 🇬🇧 W3C Recommendation, 1 November 2016
Getting started with Pug 🇬🇧 Pug official documentation.
Типовая структура страницы в HTML5 по стандарту 🇷🇺 Краткая шпаргалка на css-live.ru
Туториал по Jade для начинающих 🇷🇺 Обзорная статья по основным возможностям PUG/JADE.
Jade/Pug или HTML на диете 🇷🇺 ▶️ Вебинар по основам PUG.
Favicon сегодня: форматы, поддержка, автоматизация 🇷🇺 Обзорная статья на Хабре (2017 г.)
Webcode Tools 🇬🇧 Microformats JSON generator.

JavaScript

Resource Lang. Description
ECMAScript 5.1 с аннотациями 🇷🇺 Перевод стандарта ES5 с аннотациями.
Code Academy: JavaScript 🇬🇧 Interactive JS course.
Давайте выучим замыкания в JavaScript 🇷🇺 Статья про замыкания в JavaScript.
Базовый Javascript от Loftblog 🇷🇺 Базовый видеокурс от Loftblog по JavaScript.
Упрощённый JavaScript-жаргон 🇷🇺 Словарь фронтенд-терминов.
Руководство 'Изучаем D3.js' 🇷🇺 Руководство 'Изучаем D3.js' Введение, основные понятия и простые графики.
D3 Tutorials 🇷🇺 Перевод английского оригинала D3 Tutorials, написанного Скоттом Мюрреем
Getting Started with D3 🇬🇧 PDF-book from ORelly by Mike Dewar.
D3.js – визуализируй свои идеи! 🇷🇺 ▶️ Вебинар на Geek brains, слегка затянутый, но достаточно подробный. Для новичков.
D3.js – создаем карту с визуализацией! 🇷🇺 ▶️ Вебинар по созданию карты.
Манипуляции с DOM (шпаргалка) 🇷🇺 Основные свойства и методы для создания узлов и манипуляций с DOM-деревом.

Miscellaneous

Resource Lang. Description
StatCounter GlobalStats 🇬🇧 free, online visitor stats tool
Emoji cheat sheet 🇬🇧 List of all Emoji codes
Geekbrains вебинары 🇷🇺 ▶️ Вебинары на разные ИТ-темы, есть интересные.
Лекции первой ШРИ Яндекса 🇷🇺 ▶️ Видео лекций всего курса первой Школы разработки интерфейсов Яндекса (2013г.)
Emmet cheat sheet 🇬🇧 Full cheat sheet of Emmet for Sublime Text3.
Горячие клавиши Sublime Text3 🇷🇺 Полный список дефолтных клавиатурных сокращений для Sublime Text3.
Вебстандарты: Подкаст, Facebook 🇷🇺 Регулярные новости о фронтенде.
Руководство по веб-шрифтам 🇷🇺 Исчерпывающее руководство по стратегиям загрузки веб-шрифтов.
Руководство по цветам в веб 🇷🇺 Механизмы работы цыета в браузерах.
WebReference.ru 🇷🇺 Справочник CSS свойств и html тегов.
Подкаст Веб стандарты (git) 🇷🇺 Репозиторий подкастов с ссылками и иногда с расшифровками эфиров.
Слова, часто используемые в CSS-классах 🇷🇺 Репозиторий с мини-голоссарием.
Essential Image optimization 🇬🇧 An eBook by Addy Osmani.

Coding sandboxes

Resource Lang. Description
freeCodeCamp 🇬🇧 Free code challenges: HTML, CSS, JS, Node.js, js frameworks
JSFiddle 🇬🇧 HTML, CSS, JS simple sandbox.
Code Abbey 🇬🇧 Code challenges in different languages.
Solo learn 🇬🇧 Community of mobile code learners with courses, lessons, quizzes. C++, Java, JavaScript, Pyton, PHP, C#, Swift, Ruby, jQuery, HTML, SQL, CSS.

Texts, advertising, marketing, project management

Resource Lang. Description
Как правильно поставить ТЗ на создание сайта 🇷🇺 ▶️ Лекция Яндекса про постановку ТЗ на разработку сайта.
Заголовки: что написать, чтобы читали? 🇷🇺 ▶️ Мастер-класс Яндекса по написанию заголовков.
Как написать хороший текст для сайта 🇷🇺 ▶️ Мастер-класс Яндекса по текстам.
Пользователи ?:%:?(:;% на ваши красивые сайты 🇷🇺 🔞 Очень грубо и очень по делу о том, какими должны быть сайты.