DEV Community

loading...
Cover image for [21] Top 10 Must-Have Web Dev Tools – May 2021

[21] Top 10 Must-Have Web Dev Tools – May 2021

villivald profile image MV Originally published at create-react-app.com Updated on ・5 min read

It seems that it is the perfect time to continue my recent blog post series - Top 10 Best Web Dev Tools. Every month I will try to pick the most intriguing and handy tools that I believe are must-haves for every web developer. This time there are:

1). Vercel

A very impressive and easy-to-use deployment and collaboration platform for front-end developers from creators of NextJS. Vercel enables developers to host websites and web services that deploy instantly and scale automatically – all without any configuration. So far, I have been using it for a couple of weeks, and it really feels like a Heroku or Netlify on steroids.

Top 10 Must-Have Web Dev Tools

https://vercel.com

2). Color Leap

Color Leap is a very beautiful and well-designed resource on the history of colors. It is perfect for looking for inspiration, so choose your favorite era and dig into its colors.

Top 10 Must-Have Web Dev Tools

https://colorleap.app

3). HTML DOM

A handy DOM-related knowledge database from creators of this vs that which I mentioned last year.

https://htmldom.dev/

4). Keyframes

A couple of very user-friendly and simple visual tools to help you generate CSS (animations, shadows, colors) for your projects.

Top 10 Must-Have Web Dev Tools

https://keyframes.app/

5). GRID

A simple visual cheatsheet for CSS Grid Layout.

Top 10 Must-Have Web Dev Tools

https://grid.malven.co/

6). CSS Stats

CSS Stats provides a report with deep analytics and visualizations for your stylesheets.

Top 10 Must-Have Web Dev Tools

https://cssstats.com

7). Yellow Lab Tools

Yellow Lab Tools is a free online page speed audit tool and a web performance analyzer.

Top 10 Must-Have Web Dev Tools

https://yellowlab.tools/

8). Figma Crash

Actually, this pick is not a tool but a study resource. It helps you to dive deep into powerful Figma features. The course is totally free.

Top 10 Must-Have Web Dev Tools

https://www.figmacrashcourse.com/

9). CSS Hell

I could not describe this resource better than their official site does - The collection of common CSS mistakes and how to fix them.

css hell

https://csshell.dev/

10). Readme.so

This resource provides you the easiest way to create a brilliant README for your next project.

readme

https://readme.so/

P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?


Original post @ create-react-app.com

My Site https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog
Hashnode https://proj.ninja

Discussion (1)

Collapse
hemazyn profile image
Hemazyn

Informative

Forem Open with the Forem app