Полезные ресурсы

Аналитика

• Яндекс Радар
• Яндекс.Метрика
• Statcounter

Оптимизация

• Минификатор CSS
• Минификатор JS
• PageSpeed Insights – Проверка оптимизации страницы
• Normalize.css
• О normalize.css
• Оптимизация контента
• Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…
• Для чего стоит использовать предварительную загрузку?

Кроссбраузерность

• Can I Use
• Автопрефиксер CSS онлайн
• Shouldiprefix – Свойства которые необходимо использовать с префиксами
• Microsoft Edge VMs
• BrowserStack – Тестирование веб-сайтов в браузерах
• Parallels – Виртуальная машина для macOS
• Simulate Mobile Devices with Device Mode in Chrome DevTools

Тестирование

• Validator.w3
• Perfectpixel
• Как попасть в макет и не сойти с ума
• Краш-тест вёрстки

Стиль кода

• БЭМ
• Стиль кода HTML Академии
• Code Guide by @mdo
• Руководство по оформлению HTML/CSS кода от Google
• Слова, часто используемые в CSS-классах
• Слова и сокращения в CSS-классах
• Типовые названия классов для html
• Progressive Enhancement
• Graceful Degradation
• Основные правила и принципы написания CSS
• Принципы написания однородного CSS-кода
• EditorConfig
• EditorConfig — Одни Настройки для всех Редакторов/IDE

Доступность

• Рекомендации по разработке сайтов для людей с нарушениями зрения
• Спецификация WAI-ARIA 1.1
• Как прятать
• Правила использования ARIA в HTML
• Hiding DOM elements

Блочная модель

• Интерактивная диаграмма блочной модели
• Centering in CSS: A Complete Guide
• How To Center in CSS
• Организация отступов в верстке (margin/padding)
• Границы и отступы в потоке
• Антигерой CSS-разметки — свойство «display: table»

Flexbox

• Flexbox cheat sheet
• Flexbox playground
• Flexbox in 5 minutes
• Описание свойств Flexbox
• Выравнивание элементов в Flex контейнере
• Визуальное руководство по свойствам Flexbox из CSS3
• Полное руководство по Flexbox
• Flexbugs

Float

• Раскладка в CSS: float
• Float'омания: разъяснение как работает css свойство float

Grid

• Основные понятия Grid Layout
• Вёрстка на Grid в CSS. Полное руководство и справочник
• Полное руководство по CSS Grid
• Большая статья про гриды (CSS Grid Layout)
• Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас

Адаптивная верстка

• 5 распространенных проблем, которые решает адаптивная верстка
• Responsive Resources
• Основные принципы «отзывчивого» веб-дизайна
• Контент по центру, фон по ширине

Шрифты и типографика

• Google Fonts
• Fonts 4 web – Бесплатные кириллические шрифты
• Коллекция веб-безопасных шрифтов
• Создание типографики с вертикальным ритмом
• Набор спецсимволов
• Иконки utf-8
• Конвертер веб-шрифтов
• Подключение нестандартных шрифтов
• Оптимизация шрифтов
• Ремы, емы, и почему отказ от них - не проблема
• Создание вертикального ритма на сайте
• О верстке вертикального ритма
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов
• CSS font-display: The Future of Font Rendering on the Web

SVG

• SVGOMG – svgo gui
• URL-encoder for SVG
• SVG for Everybody – поддержка SVG-спрайтов
• Flaticons – векторные иконки
• Seeklogo – векторные логотипы компаний
• SVG Porn – векторные логотипы
• Способы генерации SVG-спрайтов на примере библиотеки svg-sprite
• Символьный SVG-спрайт. Подробное руководство
• SVG в вебе. Практическое руководство
• Доступные SVG
• Блог Юлии Бухваловой про SVG
• Как правильно вставлять SVG
• Как проектировать, создавать и анимировать SVG

Оптимизация растровой графики

• Squoosh – оптимизация изображений от Google
• iLoveIMG
• TinyPNG – PNG and JPEG compression
• Optimizilla – online image optimizer
• Сompressor – сжимает JPG и PNG
• ImageOptim
• ImageAlpha – оптимизация PNG
• FileOptimizer (for Windows)
• Оптимизация изображений
• WebP
• Using WebP Images

Прочая графика

• Octicons – Иконочный шрифт заточеный под ретину, от GitHub
• UI Gradients – CSS градиент генератор
• StickPNG – Free PNG
• Unsplash – Beautiful Free Images & Pictures
• Iconka – Иконки, иллюстрации, анимации
• TOP Logos – Логотипы компаний (русские)
• Font Awesome – Иконочный шрифт
• Fontello – Онлайн генератор шрифтов с иконками
• Spritepad – Веб-генератор спрайтов
• Favicon Generator
• X-Icon Editor
• Заметка: как использовать HTML "picture" для адаптивных изображений
• Picturefill – полифилл для picture
• Теория цвета в цифрах
• Про PNG
• Как отличить контентное изображение от декоративного
• Форматы изображений
• Какие нужны фавиконки

Node.js

• Node.js
• Установка Node.js
• Полезные команды для работы с Node.js
• How to Uninstall Node.js from Mac
• npm-package.json
• npm-install
• Node Hero: начало работы с Node.js
• Bower – Менеджер пакетов (сторонних библиотек проекта)

Плагины для Gulp

• gulp
• gulp-sass – Компиляция SASS/SCSS
• gulp-watch – Отслеживание изменений
• browser-sync – Запуск сервера с живой перезагрузкой страниц
• gulp-stylelint – Линтинг CSS
• gulp-concat – Конкатенация (объединение) файлов
• gulp-postcss + autoprefixer
• gulp-autoprefixer
• gulp-clean-css или gulp-csso – Минификация CSS
• gulp-uglify – Минификация JS
• gulp-htmlmin – Минификация HTML
• del – Удаление файлов
• gulp-plumber – Безперебойная работа Gulp
• gulp-sourcemaps
• gulp-rename – Переименование файлов
• gulp-imagemin – Оптимизация изображений
• gulp-webp – Конвертация изображений в формат WebP
• gulp-svgstore – Сборка SVG-спрайтов
• gulp-posthtml + posthtml-include – Шаблонизация HTML

CSS-препроцессоры

• Как работать с CSS-препроцессорами и БЭМ
• Less. Путеводитель для новичков
• Less
• Sass
• Руководство по написанию разумного, поддерживаемого и масштабируемого Sass.
• CSS-препроцессоры против CSS

Плагины для Atom

• Atom beautify
• Color picker
• Emmet
• File Icons
• Minimap
• Pigments
• SVG Preview
• Remote FTP
• Git-Plus
• EditorConfig
• Git Log – Рисует график коммитов
• PlatformIO IDE Terminal – Встраивает Terminal
• Linter
• linter-eslint – Проверяет JS
• linter-stylelint – Проверяет CSS
• Busy Signal – Показывает что пакет выполняет задачу

GitHub

• GitHub Desktop
• Atlassian SourceTree
• GitKraken
• Создание файла gitignore
• Pro Git book
• Git How To — интерактивный тур по основам Git
• Интерактивное обучение работе с ветками в Git
• Скринкаст по Git (от javascript.ru)
• Коллекция часто задаваемых вопросов по Git
• Шпаргалка по Git
• Шпаргалка по консольным командам Git
• Правила полета на Git
• Глоссарий терминов для Git и GitHub
• Полезные команды для работы с Git
• Работа с Git через консоль
• Как склеить коммиты и зачем это нужно
• Следите за концом строки
• Гитхаб как хостинг

Terminal

• iTerm2
• Terminal в Mac OS
• Искусство командной строки
• Как сделать красивую консоль в Mac и Linux

Bootstrap

• Bootstrap
• Bootstrap на русском
• Material Design for Bootstrap
• Free themes for Bootstrap
• Start Bootstrap – Bootstrap Templates & Themes

Основы

• Выражения и операторы
• MDN. Массивы
• MDN. Объекты
• MDN. Работа с объектами
• MDN. Циклы и итерации
• Как работает рекурсия – объяснение в блок-схемах и видео
• MDN. Использование объекта Console
• Всё, что вы хотели знать об областях видимости в JavaScript

Алгоритмы

• Сортировки в гифках: 8 самых популярных алгоритмов
• Об основах алгоритмов сортировки в иллюстрациях

Оформление кода

• JavaScript: путь к ясности кода

Материалы для изучения

• Современный учебник Javascript
• Выразительный JavaScript

Canvas

• MDN. Руководство по canvas
• Выводим текст на HTML5 Canvas

Разное

• Клавиатурные события
• keyCod.es – Код клавиши
• Что такое Объектная Модель Документа (DOM)?
• Отладка JavaScript в Google Chrome и Visual Studio Code

jQuery плагины

• ​​Slick – Адаптивный слайдер
• ​​Owl Carousel – Адаптивный слайдер-карусель
• Tooltipster – Всплывающие подсказки
• ​​Flatpickr – Всплывающие окна с выбором даты
• CodeHouse – Крутые подборки готовых решений на CSS и jQuery без плагинов
• fancybox – Галерея и модальное окно

Как работают сайты

• A fun and colorful explanation of how DNS works – Как работает DNS
• Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com
• Принципы работы современных веб-браузеров
• Как зарегистрировать свой домен

Форматирование кода

• HTML
• CSS
• JS
• JSON
• XML
• Python
• PHP
• SQL

Библиотеки с анимациями

• Animate.css – Библиотека CSS анимаций
• It's Tuesday. – Простые и приятные CSS анимации

Генераторы кода и CSS-свойства

• Nth-child и nth-of-type
• CSS Click Chart – Реализация действия на CSS
• Генератор кода и примеры
• Полная таблица CSS-свойств

Браузеры

• Microsoft Edge
• Google Chrome
• Mozilla Firefox
• Opera
• Apple Safari
• Яндекс.Браузер

Графические редакторы

• Adobe Photoshop
• Adobe Illustrator
• Adobe Export Assets
• Sketch
• Zeplin
• Avocode

Редакторы кода

• VS Code
• Sublime text 3
• Atom
• Brackets
• Notepad ++
• WebStorm
• Обзор редакторов кода

Песочницы

• JS fiddle
• CodePen
• CSS Desk

Платные курсы

• Loftschool
• Специалист
• Хекслет
• Нетология
• Skillbox
• GeekBrains
• EpicSkills
• HTML Academy
• FructCode
• Udemy
• Яндекс.Практикум
• JavaRush
• ITVDN

Беслатные курсы

• Codecademy
• freeCodeCamp
• Coursera
• Stepik
• Codewars
• W3Schools

Полезные ресурсы

• CSS-Tricks
• MDN Web Docs
• HTML.com
• htmlbook.ru
• WebReference
• HTML5BOOK.RU
• Про CSS
• CSS Cheat Sheet
• Индивидуальное обучение программированию с ментором
• Спецификация HTML
• Спецификация CSS