Awesome tools for Web Developer - Part 1
Tags: webdev, javascript, beginners, watercooler
Published: 2022-08-15 15:43:00

# Introduction

We love tools and resources that help us in easing our process. I take a look at the resources post to find some tools to improve my productivity. 

I have used various tools and websites to help me in web development. Today, I am going to share a few of them to help you to take benefits of such a website.

So, let's get started.

# [Figma Community](https://www.figma.com/community)

> Bring designs to life with icons, illustrations, animations, and more.

![Figma Community](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnf07xup8ztwv2xtiw5l.png)
 
As you might know, Figma is a tool to design mockups and UI/UX. It has a community that includes awesome mockups designed for web and mobile. This UI design is free to use. You can easily duplicate into your Figma account and can also make changes according to you. I definitely visit this website when I have to work on a web project. 

---

# [readme.so](https://readme.so/)

> Our simple editor allows you to quickly add and customize all the sections you need for your project's readme

![readme.so](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8la0qvgai3g1snlc6hn.png)
 
An awesome tool to create readme for your projects. There is already created templates for various sections such as title, description, badges, contributors, and many more. 

---

# [CodePen](https://codepen.com/)

> CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

![CodePen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8q52wzx6pxqlw8ebi0b.png)

CodePen is an online editor for web development. It has support for HTML, CSS, and JavaScript. It supports most of the libraries of JavaScript and CSS. You can easily share codepen with other people. It's come in handy in sharing created web components.

---

# [PageSpeed Insights](https://pagespeed.web.dev/) 

> Make your web pages fast on all devices

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td596nd66qmyuxqtk2be.png)
 

PageSpeed provides useful insights regarding the loading speed of a website. You can improve your web page's speed by working on these parameters. It has support and provides separate insights for desktop and mobile.

---

# [Wappalyzer](https://www.wappalyzer.com/)

> Find out the technology stack of any website

![Wappalyzer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xezmqxaz8c1q74r86omt.png)
 
Wappalyzer is an awesome tool to find the tech stack of a website. You can do it through various mediums such as browser extensions and APIs. It has a browser extension that will provide the tech stack of the visited website. It supports API and using that you can create your wappalyzer kind of website. 

# Connect With Me

### [Twitter](https://twitter.com/surajondev)
### [LinkedIn](https://www.linkedin.com/in/surajondev/)

# Conclusion

I hope these tools will help you increase your efficiency in web development. I have decided to create a such post under a series to provide you with an awesome tool to help in the web development journey. You can follow me to know about further posts in the series.

Thanks for reading the post.