DEV Community

khaleel gibran
khaleel gibran

Posted on • Updated on

My Favourite Web Development Tools!

Every web developer has his or her favourite tools that he or she uses to make coding easier and "enjoyable". In this post, I'm going to share some awesome web development tools that I find really awesome! (although most of them are CSS designing tools πŸ˜³πŸ™„)

1. Glitch

Ok, this not just a tool, this a really nice coding platform with an awesome community. I can host my projects with the help of an inbuilt code editor. Supports many languages but works best for NodeJS.

2. Smooth Shadows (by Phillip Brumm)

Smooth shadows help in generating CSS code that will result in smooth box shadows. It looks really smooth and satisfying. πŸ˜…

3. Coolors

A really nice online tool that can generate matching and suitable color schemes for your project. If you don't like the current color scheme, hit the Spacebar and it will generate a new color scheme for you.

4. Blobmaker

Blobmaker helps you to generate really gooey looking SVG blobs of various sizes, colors and shapes randomly. Can be used as background or to create really cool looking animating blobs!

5. Get Waves

Similar to Blobmaker, Get Waves allows you to generate waves (the ocean ones) of different colors and varying number of waves randomly. It looks good as a footer of a webpage or the header.


An awesome collection of SVG illustrations for open source projects, can be used for landing pages, 404 pages, etc, and in general as well! The illustrations can be used without attribution and without paying any money, although I feel like you should give some sort of attribution.

7. Marcdown

A beautiful and real-time Markdown to HTML editor (by Liyas Thomas) online that can help you preview your Markdown code before publishing it on GitHub. It has a really beautiful dark mode πŸ‘»πŸ˜πŸ€©. Works offline after first use, which makes it even more awesome.

8. Postwoman (not Postman)

Another beautiful tool built by Liyas Thomas. Postwoman is an API request builder that allows you to test out [your] APIs with or without a proxy. It's a Progressive Web App so it can be saved to your desktop! It's lightweight so basically it's a really nice online alternative to Postman.


This helps you to create awesome and beautiful (I really like awesome and beautiful stuff) mockups of screenshots of websites. Can be really useful if you're not a MacBook user and you need a nice picture of your website for your README!

10. CSS Grid Generator

This is another awesome πŸ˜‚ website by Sarah Drasner which generates code to create dynamic grid layouts using CSS Grids.

And those are the top 10 awesome tools that I use, let me know what are the cool stuff that you use in the comments! ✌️

Top comments (5)

zerogdrive profile image
Ayoub Alforjani

Thanks for sharing those resources.

khalby786 profile image
khaleel gibran


speshov profile image

Hmm blobmakere gives page not found

khalby786 profile image
khaleel gibran

Oops! Thanks, I have fixed the link!

sidhhh profile image

Thanks so much!