DEV Community

Mohammed Ali
Mohammed Ali

Posted on • Updated on

Tools & Resources [Live Doc]

CSS

  1. https://maketintsandshades.com/ = Tints and shade generator
  2. https://bennettfeely.com/clippy/ = Clip-path Maker
  3. https://coolors.co/contrast-checker/112a46-acc8e5 = Colour contrast checker

SVG Logos:

  1. https://svgl.app/
  2. https://www.logo.wine/ = SVG Logos
  3. https://shapes.framer.website/ = SVG Shapes

Gradients:

  1. https://neat.firecms.co/
  2. https://www.mshr.app/
  3. https://www.shadergradient.co/
  4. https://color.adobe.com/ = Upload gradient image & get hex-color codes

Images:

  1. https://flagpack.xyz/
  2. https://undraw.co/illustrations
  3. https://unsplash.com = Sample Images
  4. https://uifaces.co = Sample User Face Images
  5. https://extract.pics/ = Extract all images from a website

Web Performance

  1. https://pagespeed.web.dev/
  2. https://www.webpagetest.org/
  3. https://tools.pingdom.com/

Execute JS:

  1. https://runjs.app/play
  2. https://jsbin.com/?html,output
  3. https://codepen.io
  4. https://liveweave.com/
  5. https://html-css-js.com/
  6. https://jsfiddle.net/
  7. https://onecompiler.com/html

Icons:

  1. https://hugeicons.com/
  2. https://www.iconfinder.com/
  3. https://tabler.io/icons
  4. https://lordicon.com/
  5. https://heroicons.com/
  6. https://react-icons.github.io/react-icons/

Animations:

  1. https://scrollrevealjs.org/
  2. https://michalsnik.github.io/aos/
  3. https://motion.dev/

APIs:

  1. https://github.com/public-apis/public-apis = List of freely available Public APIs

Top comments (0)