Skip to content

Online Resources For Web Developers

GENERATORS:

  • Text Content Generator - http://www.lipsum.com
  • Favicon Generator - http://tools.dynamicdrive.com/favicon
  • Data Generator - https://mockaroo.com/
  • Mobile Mockup Generator - https://mockuphone.com
  • Logo Generator - https://www.logaster.com
  • UUID Generator - https://www.uuidgenerator.net/
  • Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/

FONTS

  • Google Fonts - https://fonts.google.com/
  • Font Joy - https://fontjoy.com/
  • Font Pair - https://fontpair.co/
  • HTML symbols - https://www.toptal.com/designers/htmlarrows/

UI Kits

  • Wired elements - https://github.com/rough-stuff/wired-elements

IMAGE RESOURCES:

  • Free Stock Images - https://www.pexels.com
  • Free Stock Images With Great API - https://unsplash.com/
  • Free- Vectors, mockups - https://www.freepik.com
  • Dummy Image Placeholders - https://source.unsplash.com/
  • Dummy Image Placeholders - https://placeholder.com
  • Free Icons - https://www.iconfinder.com
  • Icons and Photos - https://thenounproject.com/

COLOR & DESIGN:

  • Generate Color Palette from Image - https://www.canva.com/color-palette/
  • Color Palette Generator - https://coolors.co/app
  • Color Pallete Generator - http://colormind.io/
  • Create Color Schemes - https://color.hailpixel.com
  • Get Color Schemes of Websites - http://stylifyme.com
  • Create Gradients - https://uigradients.com
  • CSS Button Generator - http://css3buttongenerator.com
  • SVG/CSS Background Patterns - https://www.heropatterns.com/
  • Color restrictive palletes (Pixel Art) - https://lospec.com/

DATA VIZ

  • Color palete selection - https://colorbrewer2.org
  • Color palete selection - https://projects.susielu.com/viz-palette

IMAGE COMPRESSION & CONVERSION:

  • Compress All Images - https://compressor.io/compress
  • Compress JPG - http://jpeg-optimizer.com/
  • Compress PNG - https://tinypng.com/
  • Convert images (any format) - https://convertio.co/

CODE OPTIMIZATION:

  • Minify JS & CSS - http://minifier.org
  • Code Optimization Tools - https://codebeautify.org
  • Code Diff Checker - https://www.diffchecker.com

CONVERTERS:

  • ES6+ & JSX Compiler - https://babeljs.io/repl
  • Sass Converter - https://www.sassmeister.com/
  • Less Converter & More - http://www.webtoolkitonline.com
  • Markdown Editor - https://stackedit.io
  • Jade Converter - http://www.html2jade.org/

VALIDATION & COMPATIBILITY:

  • Validate HTML - https://validator.w3.org
  • Validate CSS - https://jigsaw.w3.org/css-validator
  • Check Browser Compatibility - https://caniuse.com/
  • ES6+ Compatibility Table - https://kangax.github.io/compat-table/es6/

IN BROWSER CODING:

  • Client Side Code - https://codepen.io
  • Client Side Code - https://jsfiddle.net
  • Client Side Code - http://liveweave.com
  • Client Side Code - https://codesandbox.io
  • Server Side Code - https://repl.it

SNIPPET TOOLS:

  • Snippet Manager - https://gist.github.com
  • Snippet Manager - https://pastebin.com

WIREFRAME:

  • In Browser Wireframing - https://app.moqups.com
  • Very Basic In Browser Wireframing - https://wireframe.cc
  • Wireframes and prototyping - https://www.justinmind.com/

RESPONSIVENESS:

  • Device Testing - http://www.responsinator.com
  • What's My Browser Size - https://www.webpagefx.com/tools/whats-my-browser-size/

SPEED TEST:

  • Speed & Performance Testing - https://tools.keycdn.com/speed
  • Pingdom Speed Test - https://tools.pingdom.com/

OTHER:

  • Public API Resources - https://github.com/toddmotto/public-apis?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more
  • HTML Entity Lookup - http://entity-lookup.leftlogic.com/

References:

  • https://gist.github.com/bradtraversy/61171a9b81586f5bc4c0ca1e2beb59ab
  • https://www.youtube.com/watch?v=4JC8ahZneYU