Important Tools For WebDeveloper
Tags: webdev, html, css, frontend
Published: 2021-05-06 07:32:21

# An ultimate list of resources for Web developers. 
**Top 5 must use tools** 
1)Royalty-free Images, Videos and Illustration
2)Icons and Fonts
3)UI Design Tools
4)Design ideas
5)Learning Platform


###1). Royalty-Free Images, Videos and Illustration
Some Website You can get  Royalty-Free Images, Videos and illustrations that you can use for your landing pages and background images.

###i)[Unsplash]( https://unsplash.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyvw8x5hx02d7l9xumd0.png)

###ii)[Pexels](https://www.pexels.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j75j38wus171x4nrkwa.png)

###iii)[unDraw](https://undraw.co/illustrations) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp3xeo36q6w94532yobt.png)

###iv)[Coverr](https://coverr.co/)
####It's mainly  use for slow-motion Videos
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97scvrskknrw2adrfv8o.png)

###2). Icons and Fonts
Some Website You can get   Free Vector Icons and Fonts that you can use for your Websites.

###i)[Flaticon]( https://www.flaticon.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38ih2r5exsrjz0qz7hj3.png)

###ii)[Animated icons](https://icons8.com/animated-icons)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0p0rtxs1eea75fyratjs.png)

###iii)[Font Awesome](https://fontawesome.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdii10xhjz5rtl9o65hb.png)

###iv)[Google Fonts](https://fonts.google.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxqpaumqv823try69o32.png)
###3).UI Design Tool
Some Free, Online UI Design Tool For Developers 

###i)[Figma]( https://www.figma.com/ui-design-tool/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wue1c9zzz3an5sz5w7pg.png)
###ii)[Zeplin](https://zeplin.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9uzsc0a1a6wy5ztgiuy.png)
###iii)[Adobe XD](https://www.adobe.com/in/products/xd.html)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq3eutku1vbwxuakoymn.png)

###4).Design ideas
 Best Tranding  Web Designs that will help you to get your ideas 

###i)[Awwwards]( https://www.awwwards.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejdq2u7bno2mqn6jk1xd.png)
###ii)[Dribbble](https://dribbble.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj9l4folk64pv0lg57jr.png)

###5). Learning Platform
Some online learning platform that offers free coding classes in programming languages including Python, Java, JavaScript, Ruby, SQL, C++, HTML, and CSS. Start with these free programming classes: Introduction to HTML.

###i)[freeCodeCamp](https://www.freecodecamp.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiwrxq99ibkd2x6hpp5k.png)
###ii)[Theodinproject](https://www.theodinproject.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygdadl5sidrkthn12bcr.png)

###iii)[MeM.Dev](https://mem.dev/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aeokkjldh2bbxbq4ehk8.png)