You can't afford not to have these!
Tags: javascript, webdev, design, programming
Published: 2021-02-16 01:26:07

I recently watched a YouTube video that gives the **MUST USE Websites & Tools for Web Developers**. Click [here](https://youtu.be/9CEW3Tmx2tg) to watch the video.  You can also get a free pdf copy from [here](https://pages.thejavascriptmastery.com/resources).

Yeah, and I guess they are the must haves. Thanks to [JavaScript Mastery](https://www.youtube.com/channel/UCmXmlB4-HJytD7wek0Uo97A), these are the sites that he gathered for years as a developer. They are great and they are free!

Here are the names and the links plus some additional from me. Enjoy!

###Hosting & Deployment
If you want to bring your websites live for the world to see you can use Netlify for the front-end and Heroku for the Backend. 
1. [Netlify](https://www.netlify.com/)
2. [Heroku](https://dashboard.heroku.com/)

*I add*
3. [Firebase](https://firebase.google.com/)
4. [Github pages](https://pages.github.com/)

###Royalty-Free Images & Video
Since websites are no longer text-based and mostly medias attract visitors, you can spice up your design using these for free.
1. [Unsplash](https://unsplash.com/)
2. [Pexels](https://www.pexels.com/)
3. [Undraw](https://undraw.co/)
4. [Coverr](https://coverr.co/)
5. *I add* [Pixabay](https://pixabay.com/)


###Icons & Fonts 
For good looking fonts and Icons these are the go to sites:
1. [Flaticon](https://www.flaticon.com/)
2. [Animated icons](https://icons8.com/animated-icons)
3. [Font Awesome](https://fontawesome.com/v4.7.0/icons/)
4. [Google fonts](https://fonts.google.com/)
5. *I add* [Boxicons](https://boxicons.com/)
6. [Font Space](https://www.fontspace.com/category/elegant) for Elegant fonts
7. [Iconify](https://iconify.design/)

###Learning
To upskill and improve your knowledge on web development check these out:
1. [Freecodecamp](https://www.freecodecamp.org/)
2. [The Odin Project](https://www.theodinproject.com/)
3. [MemDev](https://mem.dev/)

*I add*
4. [w3schools](https://www.w3schools.com/)
5. [MDN Web Docs](https://developer.mozilla.org/)
6. [StackOverflow](https://stackoverflow.com/)

###Mockup Tools 
If you like to sketch simple components for your future website or current project so you can have a look and feel of it, go here:
1. [Figma](https://www.figma.com/)
2. [Zeplin](https://zeplin.io/)

###Freelancing
If you are confident with your skills and you want to get clients, go and earn from them with these freelancing sites!
1. [Upwork](https://www.upwork.com/)
2. [Freelancer.com](https://www.freelancer.com/)
4. [Fiverr](https://www.fiverr.com/)
5. *I add* [FreeUp](https://freeup.net/)

###Project Design Ideas
To bring your designs to the next level and get an inspiration for your next projects, check these websites:
1. [Awwwards](https://www.awwwards.com/)
2. [Dribble](https://dribbble.com/)

*I add*
3. [CSS Design Awards](https://www.cssdesignawards.com/)
4. [One Page Love](https://onepagelove.com/)
5. [FWA](https://thefwa.com/)

###Exercises & Algorithms 
I learned that *there is no formation without repetition*. To practice and improve your logical and problem solving skills, grow and be the best with these sites
1. [Leetcode](https://leetcode.com/)
2. [Exercism](https://exercism.io/)
3. [Codewars](https://www.codewars.com/)
4. *I add* [Codingame](https://www.codingame.com/home)

###General Tools 
You cannot do it alone. So, these are some tools that may help your web dev journey.
1. [Emailjs.com](https://www.emailjs.com/)
2. [Caniuse.com](https://caniuse.com/)
3. [Image Compressor](https://imagecompressor.com/)
4. [CSS-tricks](https://css-tricks.com/)

*Additional*
5. [CSS Gradient](https://cssgradient.io/)
6. [Clippy](https://bennettfeely.com/clippy/)
7. [Flexbox Froggy](https://flexboxfroggy.com/)
8. [Grid Garden](https://codepip.com/games/grid-garden/)
9. [Squoosh](http://squoosh.app/)
10. [BlobMaker](https://www.blobmaker.app/)

For your bonus, if you wanted to test your site's performance so *you can give your users the best experience*, check this out [WebDev](https://web.dev/).


That's all! Comment down for additional websites that you think may help the web dev community.

SOLI DEO GLORIA!