Today we are going to go over incredible and useful tools and websites I have gathered from all the resources I've come across from my learnings. All the mentioned tools are completely free to use and we are going to cover websites in categories such as :

Categories

1. Hosting & Deployment
2. Royalty-Free images & videos
3. Icons and Fonts
4. Mockup Tools
5. Project Design Ideas
6. Freelancing
7. Exercises and Algorithms
8. Learning
9. General Tools

Let's dive right in with no particular order...

1. Hosting And Deployment

Hosting Services are different for different tech stacks

You created a website, it works well on your computer but to show it to your friends or potential employers, you need to deploy it. For that, we use hosting services. Over the years I have used a lot of different hosting tools but the only two I'm using now are Netlify and Heroku.

Netlify, for frontend applications and Heroku for backend API's. Netlify's biggest advantage is simplicity. You can deploy a page with a single click within seconds. And so far Heroku has been the only completely free software I found for deploying backend API's.

Some other deployment options are cPanel , GoDaddy , and Github Pages

2. Royalty-Free images & videos

Every good landing page needs quality stock images and video. The modern internet is no longer text-based, It's all about media.

Best websites for finding images are Unsplash and Pexels

We have options to get images as per our preferences as well... Like the image orientation (landscape, portrait, square), color options, and much more.

Moving on, I would like to show you Coverr. It has amazing stock-free video footage. Similar to Unsplash and Pexels we have search options as well.

The last one is Undraw. If you visit this website you are going to see maybe familiar illustrations. These illustrations are used in commercial level applications and so far I have seen them on many huge websites. They look good and professional, anything you want you can find it here no matter what type of application you are building.

Moving on to the next section, Icons, and Fonts...

3. Fonts And Icons

Every website needs a good-looking font and some icons. For fonts, there's only one site that I couldn't recommend enough, and that's Google Fonts

Here you can find absolutely any free font you are looking for and also connecting to your website is incredibly simple.

For Icons, we have Flaticon and Font Awesome In Flaticon, we can find absolutely any icon we are looking for. Just navigate to the site and search for the icon you are looking for. Let's say we search for individual icons like "React", we are going to get many more styles for the same.

Then we have Font Awesome. It has been the go-to place for icons for web developers for years now. They have almost any icon you can even think of.

We have both paid and free icons here.

Need some animated icons? Check this out Icon8

4. Learning

For generally improving your web development knowledge or learning new things, check out the following websites

Freecodecamp - They created a phenomenal curriculum, that allows you to start with no knowledge at all. If you are starting with web development, then this is the place to go

The Odin Project - They are offering a completely free full-stack curriculum, that is supported by a passionate open source community

Scrimba - Scrimba is by far the best website I've come across to learn to code. The thing that makes Scrimba stand out from the rest is, it is interactive. We can edit the code written by the instructor and can come back later to re-write our own code from where we left off. I highly recommend visiting and check that out. I'm sure you will love it

HTMLDOM - Web development goes very fast. I still remember the moments when starting to use jQuery, Prototype, script.aculo.us, Zepto, and many more.

Nowadays, even if our application is powered by modern tools such as Angular, Vue, React, Svelte, .etc, we have to deal with DOM. The frameworks encapsulate and hide the DOM management directly, but still give us a door to work with DOM via ref, event handlers.

If you develop or use a web component in any framework, you have to work with DOM at a certain level.

Knowing the browser DOM APIs and how to use them plays an important role in web development.

mem.dev - Previous tools were used for learning or acquiring the knowledge, mem dev actually helps you keep it. We all are humans, we all forget, so mem dev allows you to practice what you have already learned, to make sure that you never forget them.

You can add snippets of code, specify what you want to remember, and then you can keep practicing it.

The more you PRACTICE the more fluent web developer you are going to become

Few more tools to check out are StackBlitz, HTML & CSS, CSS, Kevin Powell (CSS), CSS Grid, CSS Battle

5. Mockup Tools

The next category on our list is mock-up tools.

Having the proper idea of how the application is going to look and feel is crucial to actually build it. If you need to sketch simple components for a website or create mockup tools for the entire application, Figma has you covered. You can use the whole workflow for applications using their mockup tools.

Another great tool and an alternative to Figma called Zeplin.

One of the best features of Zeplin is, it is the better way to share, organize and collaborate on designs built with developers in mind. So in here both designers and developers can work hand in hand, provide each other assets and actually build great-looking well-designed websites.

You are now confident in your website-building skills and want to start making some money off of them. Try these 3 most popular freelancing sites...

6. Freelancing

Upwork - Upwork is great for contracting work, meaning, not just one-time simple websites, but rather working for months on bigger projects

Freelancer - The same thing can be said for Freelancer. On Freelancer, you can also find some bigger projects that you can work on for months

Fiverr - On the other hand on Fiverr you are most likely going to build short, small, one time projects like landing pages for coffee shops, companies, portfolios for different creators, and stuff like that

Let's talk about project design ideas,

7. Design Ideas

You've got the functionality of the application figured out, but your design doesn't look good. Let's be honest, we are not designers, we are developers and our design skills are not that great, for that reason I often spark my imagination by exploring the best-looking websites in the world at

Awwwards - Here we have the best looking most awarded websites in the whole world. You can click on the website, in here you get all the ratings that the website received and then you can click visit site to see it in action.

By looking at the best-rated websites in the world, you are definitely going to get some imagination for building your own.

Another great site is called

Dribbble - Whatever kind of website you are building, you can find the design for it here.

If you want to TEST your KNOWLEDGE or IMPROVE your LOGICAL thinking and PROBLEM SOLVING skills, these websites are for you...

8. Exercises & Algorithm

Leetcode, Exercism and Codewars

Starting off with Leetcode, they are the best platform to enhance your skills, expand your knowledge and prepare you for your technical interviews. They have a lot of sorting algorithms and things of these sorts so they are more aimed at low-level languages such as C.

Although if you want to improve your logical thinking, they are going to be good for web development as well.

More web development-friendly is Codewar and Exercism. Exercism has a lot of exercises ranging from easy to hard ones. These exercises are going to improve not only your logical thinking but also your knowledge of functions, array methods, object methods, and string methods.

And finally to finish this off, these are some general tools that found myself using really often. We have EmailJS , CanIUse , Image Compressor and CSS-Tricks

EmailJS allows you to send emails directly from JavaScript without any server code needed, extremely useful if you are building a portfolio and want to have a contact form, but don't want to create a whole backend only for that, then you can use EmailJS

The second one on our list is CanIuse. It checks whether the syntax we are using is supported on all devices and browsers. For example, let's say you want to use flexbox, let's check if it's supported everywhere as you can see most of it is green, which means that 99% of the browsers support flexbox out of the box.

Moving on, we have ImageCompressor. When you are deploying your website and you want to increase the speed of the load of the website, the thing that slows it down the most is images.

So before deployment, take all your images that your website uses, drag and drop them in the image compressor and they are going to be compressed and you can use the compressed versions to increase the low speed of the website.

Next, we have CSS-Tricks. Amazing website for exploring new and interesting ways to deal with CSS.

Last but not the least

GTMetrix - Here on this website we can check the performance of a website. It gives pointers on where the website needs to be optimized. We just need to pass the hosted website's URL and we will get detailed performance metrics of the website.

If you find this useful do give a thumbs up. And comment if you have any useful tools that I have missed above.

Thanks.