HTML CSS
https://cssicon.space/#/ - иконки на чистом CSS
https://github.com/yoksel/common-words - слова, часто используемые в CSS-классах
https://habrahabr.ru/post/273471/ - Коллекция практических советов и заметок по вёрстке
https://webref.ru/layout/howtocodeinhtml - Как верстать на HTML5 и CSS3
https://webref.ru/layout/advanced-html-css - Продвинутые уроки по HTML и CSS
https://krekotun.ru/ui-developer-skills.html - Что должен знать HTML-верстальщик?
https://habrahabr.ru/post/114256/ - Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать
https://habrahabr.ru/company/pt/blog/337450/ - Погружение в CSS: метрики шрифтов, line-height и vertical-align
https://codepen.io/chrisdothtml/full/waKBdM - Colorful CSS Buttons
https://www.justinaguilar.com/animations/index.html - CSS3 Animation Cheat Sheet
https://nicothin.github.io/idiomatic-pre-CSS/ - Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.
https://nicothin.pro/page/oshibki-i-spornye-voprosy-v-html-css-vjorstke - Ошибки и спорные вопросы в HTML-CSS вёрстке
https://dimox.name/press_footer_bottom_with_css/ - Как с помощью CSS прижать footer к низу окна браузера
https://freefrontend.com/css-radio-buttons/ - Checkboxes, Radio Buttons, Forms...
https://css-live.ru/articles/luchshij-sposob-realizovat-obyortki-v-css.html - Лучший способ реализовать «обёртки» в CSS
https://hunzaboy.github.io/CSS-Checkbox-Library/ - CSS Checkbox Library
https://weblind.ru/ - Рекомендации по разработке сайтов для людей с нарушениями зрения
https://codepen.io/joshbader/pen/EjXgqr - Интересные анимированные погодные иконки на чистом CSS
https://freefrontend.com/css-page-transitions/ - 13 бесплатных примеров CSS-переходов между страницами.
https://codepen.io/carolineartz/full/ogVXZj - interactive box-model diagram
https://codepen.io/giana/pen/YZWjQy - Сетка из блоков, по наведению на которые появляется текстовое описание на CSS
https://proglib.io/p/20-impressive-css3-techiques/ - 20 потрясающих CSS3 техник, библиотек и примеров
https://css.github.io/csso/csso.html -
Анимация
https://daneden.github.io/animate.css/
https://daniel-lundin.github.io/snabbt.js/
https://thecodeplayer.com/ - примеры крутых анимаций на CSS
https://codepen.io/patterns/ - еще один ресурс примеров анимации
https://velocityjs.org/ - примеры использования тут https://codepen.io/collection/tIjGb/
https://ianlunn.github.io/Hover/ - анимация при наведении мышкой на элемент
https://stfalcon.com/ru/blog/post/animation-css - статья про transform-анимации
https://tympanus.net/Development/Animocons/
https://connoratherton.com/loaders - Loaders.css
https://www.sitehere.ru/examples/02.04.2015/ - 22 Эффекта кнопок после нажатия
https://habrahabr.ru/post/341554/ - Список лучших инструментов для web-анимации
https://habrahabr.ru/company/mr_gefest/blog/280370/ - Советы, библиотеки и дополнительные материалы по CSS-анимации
https://itproger.com/news/39 - Крутые и бесплатные анимации для текста
https://github.com/retyui/postcss-animations - Плагин автоматически добавляет css анимации известных библиотек таких как: animate.css; magic.css; tuesday.css; mimic.css
https://codepen.io/WaelYasmina/pen/brgNYK - Animated weather icons
https://dynamicsjs.com/ - JavaScript library to create physics-based animations
https://keyframes.app/editor/
https://easings.net/ru
https://codepen.io/samgordon/pen/jPqqWB - FILTER BY COLOR
https://webref.ru/layout/shapes-polygon/examples
Git
https://githowto.com/ru - это интерактивный тур, который познакомит вас с основами Git
https://learngitbranching.js.org/ - Это приложение создано, чтобы помочь новичкам постичь мощные возможности ветвления и работы с git
https://firstaidgit.ru/#/ - часто задаваемые вопросы по Git
https://git-scm.com/book/ru/v2- книга Pro Git
https://htmlacademy.ru/blog/99-github-as-hosting - Гитхаб как хостинг
https://proglib.io/p/git-tips/ - Cистема контроля версий Git: расширенная шпаргалка
https://proglib.io/p/git-for-half-an-hour/ - Git за полчаса: руководство для начинающих
https://github.com/xaosaki/loftschool-docs/blob/master/github.md
https://htmlacademy.ru/blog/86-useful-commands-for-working-with-git
https://htmlacademy.ru/blog/84-register-on-github-work-with-console
Цвета, Градиенты
https://color.adobe.com/ru/
https://colorscheme.ru/
https://flatuicolors.com/
https://colorhunt.co/
https://colordrop.io/
https://webcolourdata.com/
https://habrahabr.ru/company/ua-hosting/blog/300862/
https://www.materialpalette.com/
https://qrohlf.com/trianglify/
https://javier.xyz/cohesive-colors/
https://www.colorhexa.com/
https://htmlcolorcodes.com/
https://gradients.io/
https://coolors.co/
https://yoksel.github.io/handy-colors/
https://www.color-hex.com/
https://www.gradient-animator.com/- очень крутой генератор градиентов
https://qrohlf.com/trianglify/#gettingstarted- генератор градиента из треугольников
https://www.toptal.com/designers/subtlepatterns/
https://www.gradient-animator.com/ - CSS Gradient Animator
Иконки
https://www.flaticon.com/
https://flaticons.net/
https://nucleoapp.com/?ref=codyhouse
https://iconmonstr.com/
https://ru.icons8.com/
https://fontawesome.ru/
https://iconstore.co/
https://icons8.com/c/animated-icons
https://iconka.com/ru/free/
https://flaticons.net/
https://www.iconfinder.com
https://icons8.ru/c/animated-icons - 60 Бесплатных анимированных иконок
https://www.hipsterlogogenerator.com/
https://www.transformicons.com/ - Animated icons, symbols and buttons using SVG and CSS
SVG
https://glyphter.com/ - svg иконки
https://iconizr.com/ - Онлайн генератор svg спрайтов
https://quasimondo.com/ZorroSVG/ - конвертер из png/gif в svg
https://svgporn.com/ - популярные лого на svg
https://icomoon.io/app/#/select – хранилище svg иконок
https://codyhouse.co/gem/animate-svg-icons-with-css-and-snap/ - Animated SVG Icon
https://glivera-team.github.io/svg/2016/06/13/svg-sprites-2.html - Как мы используем SVG-спрайты(новый способ)
https://nicothin.pro/page/icon-fonts-2017 - Иконочные шрифты и почему они не нужны
https://css-live.ru/articles/karmannoe-rukovodstvo-po-napisaniyu-svg-glava-1-organizaciya-dokumenta.html - Карманное руководство по написанию SVG
https://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/ - Motion Blur Effect with SVG
https://github.com/upbyte/svg - Примеры svg-графики и фильтров
https://www.heropatterns.com/ - SVG background patterns
https://snapsvg.io/ - The JavaScript SVG library for the modern web
https://habrahabr.ru/post/272505/ - Как я использую SVG-спрайты
https://maxwellito.github.io/vivus/ -
https://feathericons.com/ - Простые SVG-иконки на разные случаи
https://css.yoksel.ru/svg-sizes/ - Размеры в SVG
https://svgporn.com/
https://svgontheweb.com/ru/
Шрифты
https://fonts4web.ru/
https://fonts.google.com
https://fontstorage.com/ru/
https://www.fontsquirrel.com/
Фото, картинки, видео
https://pixambo.com/
https://unsplash.it/
https://unsplash.com/
https://www.pexels.com/
https://www.videvo.net/?ref=producthunt - Коллекция бесплатных стоковых видео в высоком разрешении
https://videos.pexels.com/
https://www.coverr.co/
https://allthefreestock.com/
https://www.lifeofpix.com/gallery/
https://pixabay.com/
https://kaboompics.com/gallery
https://stokpic.com/
https://www.uhdwallpapers.org/
https://www.splashbase.co/
https://picjumbo.com/
https://www.firestock.ru/
https://stocksnap.io/
https://elements.envato.com/
https://techandall.com/
https://tinypng.com/ - оптимизация PNG, JPG
https://optimizilla.com/ - оптимизация PNG, JPG
https://compressjpeg.com/ru/
https://kraken.io/web-interface - оптимизация картинок других форматов
https://www.online-convert.com/ru - отличный онлайн-конвертер для видео, аудио, картинок
https://unsplash.it/ - генератор изображений-заглушек
https://www.toptal.com/designers/subtlepatterns/ - генератор изображений
https://jakearchibald.github.io/svgomg/ - оптимизация SVG
https://uigoodies.com/photos.html
PSD, html шаблоны
https://templated.co/
https://ru.365psd.com/
https://freebiesbug.com/psd-freebies/website-template/
https://psdrepo.com
https://uispace.net/
https://all-psd.ru/
https://psd-html-css.ru/
https://codyhouse.co/library/
https://www.graphberry.com/category/themes
https://html5up.net/
https://speckyboy.com/free-responsive-html5-web-templates/
Flexbox
https://medium.com/@abraztsov/%D0%BA%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-flexbox-2e3429d37d54 - Как работает Flexbox?
https://html5.by/blog/flexbox/ - Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.
https://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstvam-flexbox-iz-css3.html - Визуальное руководство по свойствам Flexbox из CSS3
https://codepen.io/enxaneta/full/adLPwv/- пример-песочница, чтобы разобраться в работе flexbox
https://css-live.ru/articles-css/shpargalka-po-shpargalke-po-flexbox.html- краткий
визуальный гайд в картинках по поведению flexbox
https://www.flexboxpatterns.com/home- основные паттерны при верстке на
flexbox
https://cssmine.com/ebook/flexbox-examples- красивые практические
примеры на flexbox
https://frontender.info/a-guide-to-flexbox/ - Полное руководство по Flexbox
https://prgssr.ru/development/kak-rabotayut-v-fleksbokse-z-index-i-avtootstupy.html - Как работают в флексбоксе z-index и автоотступы
https://www.codeply.com/go/wjzgZTaKon - Masonry effect using CSS flexbox
https://habrahabr.ru/post/302130/ - 5 Flexbox методов, о которых вы должны знать
https://habrahabr.ru/company/netcracker/blog/277433/ - Все способы вертикального выравнивания в CSS
https://css-live.ru/articles-css/progressive-flexbox-horizontal-justify.html - Снова равномерное выравнивание блоков по ширине: постепенное улучшение до Flexbox
https://gist.github.com/kuflash/5e8f1644cb544ccfa4a253dccec900a3 - Отличия между свойствами width и flex-basis
CSS Grid Layout
https://tuhub.ru/frontend/css-grid-complete-guide/ - Полное руководство по CSS Grid
https://css-live.ru/css/bolshaya-statya-pro-gridy-css-grid-layout.html - Большая статья про гриды (CSS Grid Layout)
https://habrahabr.ru/company/edison/blog/343614/- Учим CSS Grid за 5 минут
https://habrahabr.ru/company/edison/blog/344878/ - Делаем адаптивный HTML, добавляя одну строку в CSS
https://css-live.ru/articles/bolee-dostupnaya-razmetka-s-displaycontents.html - Более доступная разметка с display:contents
https://habr.com/company/edison/blog/344878/.com[perevod]-delaem-adaptivnyy-html--dobavl/
- Делаем адаптивный HTML, добавляя одну строку в CSS
JavaScript
https://developer.mozilla.org/ru/docs/Web/JavaScript
https://jscompress.com/
https://keycod.es/
https://javascript.kiev.ua/
https://medium.com/devschacht/for-dummies/home
https://htmlacademy.ru/blog/283-javascript-arrays-and-objects-are-just-like-books-and-newspapers
https://tproger.ru/translations/webpack-basics/ - Webpack: основы настройки проекта на JavaScript и Sass
https://tproger.ru/translations/configure-webpack4/ - Webpack 4: практические рекомендации по настройке
https://webdesign-master.ru/blog/javascript/14.html - Создание AJAX форм обратной связи на сайте
https://code.tutsplus.com/ru/tutorials/getting-started-with-chartjs-line-and-bar-charts--cms-28384 - Начинаем работать с Chart.js: линейные и столбчатые диаграммы
https://popper.js.org/
https://izimodal.marcelodolce.com/
https://sorgalla.com/lity/
https://limonte.github.io/sweetalert2/
https://iamceege.github.io/tooltipster/
https://ytiurin.github.io/html5tooltipsjs/
https://youmightnotneedjqueryplugins.com/
https://shamansir.github.io/JavaScript-Garden/ru/
https://learn.javascript.ru/ - Современный учебник Javascript
https://javascript.info/
https://anton.shevchuk.name/jquery-book/- отличный учебник по jQuery с примерами
https://theory.phphtml.net/tasks/javascript/- Задачник JavaScript и jQuery от Трепачёва Дмитрия
https://www.itmathrepetitor.ru/zadachi-po-javascript-iz-knigi-vyrazitelnyjj-javascript/ - ЗАДАЧИ ПО JAVASCRIPT ИЗ КНИГИ "ВЫРАЗИТЕЛЬНЫЙ JAVASCRIPT"
https://habrahabr.ru/company/Voximplant/blog/337050/ - Nuxt.js
https://habrahabr.ru/post/338840/ - Как быстрее DOM построить: парсинг, async, defer и preload
https://codecombat.com/ - Самая захватывающая игра для обучения программированию
https://plainjs.com/ - множество утилит и плагинов на ванильном JS для решения распространненых задач фронтенда, с демками и примерами
Как распознавать речь в браузере и преобразовывать её в текст с помощью JavaScript — https://tutorialzine.com/2017/08/converting-from-speech-to-text-with-javascript
https://d3js.org/ - JavaScript-библиотека для обработки и визуализации данных
JQuery
https://jquery.page2page.ru
https://jquery-docs.ru/
https://social-likes.js.org/ru/- Красивые кнопки «лайков» со счётчиками в едином стиле для социальных сетей
https://fotorama.io/
https://bvi.isvek.ru/install-jquery/ - Плагин для слабовидящих
СЛАЙДЕРЫ, КАРУСЕЛИ И ГАЛЕРЕИ
https://pawelgrzybek.com/siema/
https://polarnotion.github.io/turntable/
https://sachinchoolur.github.io/lightgallery.js/
https://nanogallery2.nanostudio.org/
https://feimosi.github.io/baguetteBox.js/
https://austenpayan.github.io/skippr/
https://meandmax.github.io/lory/
https://pedroduarte.me/wallop/
https://idealimageslider.com/
https://kenwheeler.github.io/slick/
https://fancyapps.com/fancybox/3/
https://bxslider.com/
https://owlcarousel2.github.io/OwlCarousel2/
https://dimsemenov.com/plugins/magnific-popup/
https://revolution.themepunch.com/
https://photoswipe.com/
https://dimsemenov.com/plugins/royal-slider/
https://github.com/mike-zarandona/prettyembed.js
https://getbootstrap.com/docs/4.0/components/carousel/
https://foundation.zurb.com/sites/docs/orbit.html
https://flickity.metafizzy.co/
https://alvarotrigo.com/fullPage/ru/
https://usablica.github.io/progress.js/
https://wp-kama.ru/id_2818/masonry-vyivod-html-blokov-v-vide-kirpichnoy-kladki.html
https://tympanus.net/Development/SidebarTransitions/
https://nisnom.com/kollektsiya-animirovannyh-ikonok-gamburger-dlya-sajta-html-css-i-javascript-jquery/
https://nisnom.com/veb-razrabotki/spinkit-11-simpatichnyh-preloaderov-ot-nicola-pressi/
https://nisnom.com/veb-razrabotki/transforming-menu-icon-with-labels/
https://nisnom.com/veb-razrabotki/pure-css-one-page-scroll-prokrutka-stranitsy-po-sektsiyam-na-chistom-css-bez-js/
https://nisnom.com/modalnye-okna/
https://nisnom.com/preloadery-loader/
https://nisnom.com/knopki-dlya-sajta-s-effektami-i-animatsiej-html-css-i-javascript-jquery/
https://nisnom.com/kollektsiya-potryasayushhih-menyu-dlya-sajta-html-css-i-javascript-jquery/