Useful web-design & web development resources.md

Colour gradients & colour palettes

Resource	Link
Predefined colour gradients #1	https://webkul.github.io/coolhue/
Predefined colour gradients #2	https://www.eggradients.com
Palette generator #1	https://color.adobe.com/create/color-wheel/
Palette generator #2	https://pigment.shapefactory.co/
Palette generator #3	https://www.palettable.io/
Palette generator #4	https://coolors.co/app
Generate palette from 1 colour	https://mycolor.space/
Colour generator with contrast	https://color.cloudflare.design
CSS mesh gradient generator	https://csshero.org/mesher/

Design inspiration

Resource	Link
Useful tutorials for design trends	https://tympanus.net/codrops/
Creative & unique websites	https://www.awwwards.com/
Cool websites & design articles	https://designsystemsrepo.com/
Typography inspiration	https://typ.io/
What's trending in Type	https://www.typewolf.com/

Tips & tutorials

Resource	Link
Very useful little design tips	https://twitter.com/i/moments/994601867987619840

JavaScript libaries

Resource	Link
Fairly advanced animation	http://animejs.com/
React animation library with physics	https://popmotion.io/
Modern drag & drop library	https://shopify.github.io/draggable
Simultaneous & stable file uploading	https://github.com/flowjs/flow.js
Animated file uploading library	https://github.com/pqina/filepond
Notifications library	https://pushjs.org/
Smooth parallax scrolling	https://basicscroll.electerious.com/
Parallax library	https://github.com/dixonandmoe/rellax
Lightweight text editor	https://github.com/jaredreich/pell
D3.js charts library	http://c3js.org/
3D animation library	https://threejs.org/
Library for drag and drop dashboards	https://github.com/gridstack/gridstack.js
Library for drag and drop dashboards #2	https://github.com/haltu/muuri
Reveal elements while scrolling down	https://scrollrevealjs.org/
Simple colour picker	https://github.com/Simonwep/pickr
After Effects animations on web	https://github.com/airbnb/lottie-web
Library for financial charts	https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/

Tools

Resource	Link
3D device mockup	http://threed.io/
Free photoshop alternative for mockup	https://www.photopea.com/
Free fonts	https://fonts.google.com
Collection of SVG icons	https://feathericons.com/
CSS gradient generator	https://cssgradient.io/
CSS grid generator	https://www.layoutit.com/grid
Creating styles for Google Maps	https://mapstyle.withgoogle.com/
OpenStreetMap editor	https://maputnik.github.io/
SVG maps	https://www.amcharts.com/svg-maps
A guide to typography	https://www.pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
Free stock images	https://unsplash.com/
Free illustrations	https://undraw.co/illustrations
More free stock photos	https://www.pexels.com/
Micro animations library	https://useanimations.com/
Favicon generator	https://realfavicongenerator.net/

Site testing tools

Resource	Link
Security headers testing	https://securityheaders.com/
Performance testing with tutorials	https://web.dev/measure/
Fairly simple performance test	https://developers.google.com/speed/pagespeed/insights/
Multiple performance tests at once	https://gtmetrix.com/
Speed test from multiple locations	https://tools.keycdn.com/performance
Site speed analysis	https://www.webpagetest.org/
Massive performance check list	https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/