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
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/ |