[21] Top 10 Must-Have Web Dev Tools – May 2021
Tags: webdev, codenewbie, beginners, productivity
Published: 2021-05-10 09:35:01

<!-- wp:paragraph -->
<p>It seems that it is the perfect time to continue my recent <a href="https://www.create-react-app.com/tags/top">blog post series</a> - 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: </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>1).  Vercel</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A very impressive and easy-to-use deployment and collaboration platform for front-end developers from creators of <a href="https://nextjs.org/">NextJS</a>. 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 <a href="https://heroku.com/">Heroku</a> or <a href="https://www.netlify.com/">Netlify</a> on steroids.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":446,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.11.06-1024x664.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-446"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://vercel.com/dashboard">https://vercel.com</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>2). Color Leap</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":447,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.23.09-1024x531.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-447"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://colorleap.app/home">https://colorleap.app</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>3). HTML DOM</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A handy DOM-related knowledge database from creators of <a href="https://thisthat.dev/">this vs that</a> which I mentioned <a href="https://www.create-react-app.com/posts/2020-12-25-top-15-best-developer-resources-part2/">last year</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":448,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.30.20-1024x523.png" alt="" class="wp-image-448"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://htmldom.dev/">https://htmldom.dev/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>4). Keyframes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A couple of very user-friendly and simple visual tools to help you generate CSS (animations, shadows, colors) for your projects.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":449,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.32.50-1024x707.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-449"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://keyframes.app/">https://keyframes.app/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>5). GRID</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A simple visual cheatsheet for CSS Grid Layout.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":450,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.37.50-1024x597.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-450"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://grid.malven.co/">https://grid.malven.co/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>6). CSS Stats</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CSS Stats provides a report with deep analytics and visualizations for your stylesheets.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":451,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.46.09-1024x327.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-451"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://cssstats.com/">https://cssstats.com</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>7). Yellow Lab Tools</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Yellow Lab Tools is a free online page speed audit tool and a web performance analyzer.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":452,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.48.46-1024x618.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-452"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://yellowlab.tools/">https://yellowlab.tools/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>8). Figma Crash</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":453,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-11.54.48-1024x937.png" alt="Top 10 Must-Have Web Dev Tools" class="wp-image-453"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://www.figmacrashcourse.com/">https://www.figmacrashcourse.com/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>9). CSS Hell</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I could not describe this resource better than their official site does - The collection of common CSS mistakes and how to fix them.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":454,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-12.02.59-1024x753.png" alt="css hell" class="wp-image-454"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://csshell.dev/">https://csshell.dev/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>10). Readme.so</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This resource provides you the easiest way to create a brilliant README for your next project.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":455,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://create-react-app.com/wp-content/uploads/2021/05/Screenshot-2021-05-10-at-12.04.15-1024x533.png" alt="readme" class="wp-image-455"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><a href="https://readme.so/">https://readme.so/</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>P.S. Please feel free to complete the list by replying to this post. Which web dev tools do you like best?</h4>
<!-- /wp:heading -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

[Original post @ create-react-app.com](https://www.create-react-app.com/posts/2021-05-10-top-10-web-dev-tools-05-2021/)

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