As a Web Developer, you always need some good reliable tools to use for doing your tasks in a perfect way using the help of awesome tools either open-source or half free which can level up your creativity level.
Watch the Video tutorial for much more detailed information about each tool and a simple preview.
Figma is a cloud-based design tool similar to Sketch but has a different features that makes it special, the UI interface of Figma is easy to use and simple which makes it super easy to adapt and work with especially since it is mainly used by developers for creating application designs like a website mockup or a mobile app UI design, it also allows you to link and make your designs live which you can interact with and simulate events like a running application.
I personally use Figma for creating my Apps designs and for creating designs for my youtube channel and video tutorials, the free plane covers pretty much what you need as an individual developer.
Insomnia is a cross-platform REST and GraphQL client allows you to Debug your API and servers with ease, it gives you an easy to use and intuitive interface to send custom HTTP/GraphQL requests and test your servers with all features you need for debugging an API, I mostly used for every project I create the main advantage it is open-source and very light-weight plus it gives you the ability to import/export your Requests/Responses list and share it with your team.
Font Flipper is a Font matching tool allows you to easily find the right font for your design, you simply pick up an image (or you component you wish to match the font for) and gives you the ability to move between a huge list of available fonts and added fonts that you like to your list so you can download them later and use them on your designs.
Since I found this tool It made it easier for me to find the right font for my website designs and components.
Bundlephobia is a Web Application allows you to find NPM hosted packages and module and gives you important information about it before you install on your project and include it in your dependencies which may increase the bundle size of your web application (mostly front-end app) since it shows you the Minified size/Gzipped+Minified module size plus info about load-time from different types of internet connections (3G, 2G).
It also allows you to upload your package.json file for your project and it scans all the installed dependencies and gives you important info about them.
Animista is a CSS Animation Tool for finding pre-made cool CSS animations and transitions or creating your own custom ones with an easy and simple interface it gives you plenty of options for customizing your CSS animations.
You can import the animation with keyframes in CSS code.
I use it for designing my webpages and it helps for finding hidden bugs and debugging existing design problems and glitches on my webpages.
Play around with it Here.
If you have other cool tools that help you through your daily life as a web developer please feel free to share it with us.