FREE And Useful Resources for Web Development in 2021⚡
Tags: javascript, react, webdev, beginners
Published: 2021-04-09 11:59:04


## [Fontjoy](https://fontjoy.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dha8jicow6vus5eavaxu.png)
Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.

## [FreeHTML5](https://freehtml5.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oo41kcdsjko08b3iqxz.png)
**FreeHTML5** is dedicated to provide extraordinary and premium-like free html5 bootstrap templates for web designers and developers.

## [Google Fonts](https://fonts.google.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x1v05r48h512lvqwcve.png)
Google Fonts makes it easy to bring personality and performance to your websites and products. Our robust catalog of open-source fonts and icons, makes it easy to integrate expressive type and icons seamlessly—no matter where you are in the world.

## [Coolors](https://coolors.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p363tklo4rmyc4ray22u.png)
Coolors is the essential tool for creating and collecting color palettes. It allows you to generate perfect matching colors in seconds. Even if you are not so skilled in design!
All you have to do is pressing the spacebar to generate a random color palette, click on the color you like to lock it and repeat both actions until you get the results you need.

## [uiGradients](https://uigradients.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnjoot59kjlppkqzcbz1.png)
A handpicked collection of beautiful color gradients for designers and developers.

## [ShadeSwash](https://shadeswash.netlify.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6edvjl1bqjbk9gip13p.png)
Never waste time trying to find the right shade of a color again. With ShadeSwash, every shade you'll ever need is just a click away.

## [FlatIcon](https://www.flaticon.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htt2c268ujyd6av2fq0z.png)
The largest database of free customizable icons in the world. Flaticon has millions of icons in all formats for all kinds of projects: presentations, apps, websites, catalogs, infographics, etc.

## [Favicon.io](https://favicon.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38awtksn0lwuzsi7banq.png)
If you already have an image or logo that you want to use for your favicon then use this tool to convert your image to the proper favicon format. If you don't have a logo or image for your website and want to generate a favicon from scratch then use this tool to generate your favicon.

## [Pixabay](https://pixabay.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv0c6jncmgvn7ded87h1.png)
Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music.

## [Device Shots](https://deviceshots.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jajcxuk6gonsbnkgsol8.png)
Easily design device mockups for presentations or to share on social platforms. Choose between phones, tablets, computers, watches and displays.


And that is it for this article. You can visit [satishnaikawadi.me](https://satishnaikawadi.me/posts) for more articles related to programming.Thanks for reading 😇 .