developer-resources

Best FREE resources for Web-developers creating projects for their portfolios!

Background patters

• Subtle patterns
  Over 500 background patterns under CC BY-SA 3.0 licence.

• Hero patterns
  A collection of repeatable SVG background patterns for you to use on your web projects.

• CSS3 Pattern gallery by Lea Verou
  Small collection of cool CSS3 background patterns.

• Patternico
  Create your own background pattern from font awesome or Line icons!

• BGJar
  Free svg background generator for your websites, blogs and app.

• Trianglify
  Tool to generate low-poly backgrounds, textures, and vectors.

• Gradienta
  Awesome gradients to use as a background!

• The Pattern Library
  This on going project compiles patterns shared by the most talented designers out there for you to use freely in your designs.

• Mesher
  CSS mesh gradient generator.

Graphics

• Wave generator
  Create SVG waves for your website or app.

• Blob generator
  Blobmaker is a free generative design tool made with 💕 by z creative labs, to help you quickly create random, unique, and organic-looking SVG shapes.

• Another blob generator
  Generate beautiful blob shapes for web and flutter apps under MIT licence.

• Custom shape dividers
  Awesome tool for creating custom dividers for websites or apps!

Color tools

• Gradihunt
  Great tool for searching and comparing gradients.

• ColorSandFonts
  Color & typography tools for web developers and digital designers.

• Coolors
  Create color palettes super fast!

• Colordot by hailpixel
  Another tool for creating color palettes quickly.

• Color Hunt
  Lot's of color palettes for finding inspiration.

• Adobe Color
  Use Adobe color wheel to generate color palettes.

• palette.app
  Different kind of take on creating color palettes.

• Colormind
  Generate color palettes and see them live on demo website!

• Gradientos
  Find and test gradients easily.

• UI Gradients
  Browse through gradients and copy the CSS code for them.

• Picular
  Search for colors of anything! For example you could search 'coffee' and it will give you good color to use for coffee.

• MyColor.space
  Generate color palettes from single color and create CSS gadients.

UI Components & code snippets

Loading spinners

• Single Element CSS Spinners
  CSS loading Spinners by Luke Haas.

• Spin Kit
  Kit of CSS loading spinners by Tobias Ahlin.

• Loaders.css
  Delightful and performance-focused pure css loading animations.

• SpinThatShit
  A set of SCSS mixins for single element loaders and spinners

CSS Code snippets

• CSS Box Shadow Examples
  Beautiful CSS box-shadow examples

• Box shadow generator
  Generate CSS box-shadows and copy the code for it.

• Animista CSS animation snippets
  Code snippets for all kinds of CSS animations.

Device mockups

• devices.css
  Pure CSS mockups for mobile devices, tablets and laptops.

• Minimal devices by Jared Hardy
  Minimal Apple device CSS mockups

• Device shots
  The single best tool for creating device mockup PNGs with your own screen content!

Other ui components

• Moving text animations
  Moving text animations by Tobias Ahlin.

• UI Design daily
  Free UI Components to use in Figma, Adobe XD, Sketch or Photoshop.

Icons

• Zondicons
  A set of free premium SVG icons for you to use on your digital products.

• Line Icons
  2000+ Line Icons for Designers and Developers!

• Feather Icons
  Simply beautiful open source icons

• Lucide
  An open-source icon library, a fork of Feather Icons.

• JAM Icons
  Jam icons is a set of SVG icons designed for web projects, illustrations, print projects, etc. Licensed under MIT.

• Orion Icon library
  6014 Free SVG Vector Icons

• Radix Icons
  A crisp set of 15×15 icons designed by the Modulz team.

• Icon Park
  IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons.

• Font Awesome
  Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

• Fontisto
  fontisto the iconic font and css toolkit · 616+ free icons

• Evil Icons
  Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.

• Phosphor Icons
  Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

• Iconhub
  Just practical stunning icons for everyone.

• Basicons
  Basic icons for product design & development

• Tabler Icons
  A set of over 950 free MIT-licensed high-quality SVG icons for you to use in your web projects.

• Heroicons
  Another set of MIT-licenced SVG icons.

• Eva Icons
  Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

• CSS GG
  700+ Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API

• Devicon
  Devicon is a set of icons representing programming languages, designing & development tools. You can use it as a font or directly copy/paste the svg code into your project.

• Simple icons
  1477 Free SVG icons for popular brands.

Photos & video

• Lorem Picsum
  Lorem ipsum for photos!

• Lost And Taken
  Free texture stock photos

• Unsplash
  Beautiful free images and pictures

• Pexels
  Free stock photos and videos

• Pixabay
  Stunning free images & royalty free stock

• Mixkit
  High quality free stock video clips, music and sound effects.

Illustrations

• Undraw
  Open-source illustrations for any idea you can imagine and create.

• Glaze
  royalty-free illustration library

• Delesign
  Free illustrations and icons. No attrribution required.

• Scale
  One new high-quality, open-source illustration each day.

Music and sounds

• CCHound
  100% free, quality CC audio

• Unminus
  Free premium music for your projects.

• Mixkit
  Free stock music and sound effects.

Code playgrounds

• StackBlitz
  Online code editor for web apps

• JSFiddle
  Javascript, HTML, CSS code playground.

• CodePen
  Online code editor

• JSBin
  Another online code editor for web developers. Focuses on sharing your code.

• Code Sandbox
  Free, instant, collaborative sandboxes for rapid web development.

Hosting

• Heroku
  Great Paas for deploying and hosting node.js (and other) apps for free.

• Github pages
  Host websites and web apps for free straight from your github repo!

• Firebase
  Fast and secure web hosting.

• Surge
  Static web site publishing for front-end developers. For free.

• Vercel
  HTTPS enabled custom domains, continous deployment with git and unlimited free websites and APIs.

• Netlify
  An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.

• Render
  Render is a unified cloud to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git.

APIS

Some of the coolest free API:s you can use on your projects!

• OpenWeatherMap
  Classic weather API.

• Pokemon API
  All the Pokémon data you'll ever need in one place, easily accessible through a modern RESTful API.

• NASA APIs
  Bunch of different APIs for accessing NASA data including Mars rover photos, satelite photos of earth, exoplanet database and much more!

• Yelp Fusion API
  Get information about local businesses around the world with Yelp Fusion API.

• Youtube API
  Add YouTube functionality to your sites and apps.

• New York Times APIs
  Differetn APIs for New York Times content including news articles, movie reviews, bestseller books reviews & lists.

• OMDb API
  The OMDb API is a RESTful web service to obtain movie information.

• JoeSchmoe avatar API
  An illustrated avatar collection for developers and designers.

• Initials Avatar Generator API
  Get placehoder SVGs for profile pics containing users name initials.
  Example return for 'John Doe' with orange bakcground.

• Coingecko API
  The world's most comprehensive cryptocurrency API.

• JSON Placeholder
  Mock JSON data API for testing.

Other useful tools

• Omatsuri
  Open source browser tools for everyday use.

• Responsively.app
  Develop responsive web apps 5x faster!
  "A must-have DevTool for all Front-End developers that will make your job easier."

• Favicon.io
  The only favicon generator you need for your next project. Create favicons from text, images or even emojis.

• Carbon
  Create and share beautiful images of your code.

• Codepng
  Convert your code into awesome images!

• ray.so
  Like Carbon but different.

• Blaze
  Cool (and fast) way to share files with any devices.

• Screely
  Instantly Turn a Screenshot or Image into a Browser Mockup

• Sweet Alert
  A beautiful replacement for javascript alert() messages.

• diagrams.net
  The world’s most widely used browser-based end-user diagramming software.