DEV Community

loading...
Cover image for Productive Tools🚀 For Web Development😎

Productive Tools🚀 For Web Development😎

akshay35c profile image Akshay Chougule Updated on ・2 min read

🦸FRONTEND ESSENTIALS

In modern times, our lives have certainly become a bit more dynamic.
Being aware of this, We'll be exploring broad category of tools.So let me show you some tools I find extremely useful, either because they make my life easier or because they push me to write more accessible code🕴️.

Color 🌈

1.Colordot - A color picker for humans
Alt Text

2.uiGradients - Beautiful colored gradients
Alt Text

3.Stylify Me - Online Style Guide Generator

4.Colors and Fonts
Alt Text

Fonts 📣

FontSpark | Discover Better Fonts
Alt Text

Icon 🎩

Noun Project
Alt Text

CSS 👑

CSS Grid: Style Guide
Alt Text

Logo 💎

Logaster logo maker
Alt Text

Animation 👾

1.Animate.css
Alt Text

2.CSSeffectsSnippets
Alt Text

3.Animatopy

4.Collect UI
Alt Text

5.Steam inspired game card hover effect
Alt Text

6.UnDraw
Alt Text

7.Animista

8.Vivify - CSS Animation Library
Alt Text

9.CSS Animation Library for Developers and Ninjas - cssanimation.io

10.Magic Animations CSS3
Alt Text

11.vector illustrations – Ouch.pics
Alt Text

12.Illustrations Vectors, Photos and PSD files
Alt Text

13.MIT Vectors
Alt Text

14.Humaaans: Mix-&-Match illustration library
Alt Text

That’s it for now! Just a quick overview of some of the tools that make my work a little bit more productive. I just hope I helped you in this choice and thus, make your life more arranged and creative.

Discussion

pic
Editor guide
Collapse
colortools profile image
Color Tools 🌈

online color tools

Hi Akshay; Can you add our online color tools to your list please?


Color Tool Name Link
Color Palette Generator hexcolor.co/palette-generator
Color Picker Tool hexcolor.co/color-picker
Gradient Color Generator hexcolor.co/gradient-generator
Image to Colors Palette Generator hexcolor.co/image-to-colors
CSS Color Extractor hexcolor.co/css-color-extractor
Color Contrast Checker hexcolor.co/color-contrast-checker
Bootstrap Material Theme Colors hexcolor.co/material-design-colors
Collapse
corentinbettiol profile image
Corentin Bettiol

Thanks I really liked colordot :D

screenshot

Collapse
kevnk profile image
Kevin Kirchner

Have you seen the grayscale.design color palette generator?

You set the color values you want and then add your colors. It will find the colors that match your color value scale for you! In other words, you can theoretically design in grayscale to get your contrast just right, then simply swap in your colors and you'll maintain the exact contrast ratio. It's pretty epic.

Collapse
devpks profile image
Praveen Kumar

Appreciate the effort❤️

Collapse
michaelandreuzza profile image
michael-andreuzza

Thank you so much for listing Colors & Fonts.

It warms my heart to know that the work I am putting on the website and newsletter helps other ones.

That means a lot.

Again thank you so much.

Collapse
wegissilveira profile image
wegissilveira

Thank you so much for this.

Collapse
renesansz profile image
Rene Padillo 🇵🇭

cool! thanks for sharing 😀

Collapse
dpaine20 profile image
David Paine20

Thanks for sharing the list of amazing tools.
You must check that tool as well
url-decode.com/
That tool contains 100+ Web utilities, related to numbers, Unit converter, Developers, String, IP tools, and Converters as well.

Collapse
nimicent profile image
Julia Nash

love this. And have used a lot of these!!! :-)

Collapse
vlasales profile image
Collapse
nothinbutblood profile image
Sriram

Great work Akshay I'm sriram from india fullstack javascript developer I have a whatsapp group dedicated to coders who can collaborate on fun hobby projects if you are interested in joining please ping me +918970787208

Collapse
douglasfugazi profile image
Douglas Fugazi

Damn, this is pretty cool. Thanks for sharing 👍

Collapse
karanja_b4ha profile image
Baha_dev

Thanks for the amazing post.

Collapse
jopo79 profile image
Javier Fernández

Thanks for sharing!!

Collapse
edmongarcia6 profile image
Edmon Garcia

Thank you for sharing😁

Collapse
mkubdev profile image
Kubdev

Thanks for the ressource, love it !

Collapse
rishabk7 profile image
Rishab Kumar

Thanks for sharing! ❤

Collapse
prahladmishra profile image
Prahlad Mishra

Nice collection thanks for sharing

Collapse
igcp profile image
Igor Conde

Thanks :D

Collapse
albertodeago88 profile image
Alberto De Agostini

Cool, thanks for sharing!

Collapse
adilvelizade0 profile image
Adil Velizade

Please follow instagram : @master_javascript

Collapse
theme_selection profile image
themeselection

Great list. 🤩 We have also prepared the list of Best Open Source Web Development Tools.

Collapse
rahulh123 profile image
Rahul

Thanks for this!

Collapse
scroung720 profile image
scroung720

Wow very helpful thanks

Collapse
mjcoder profile image
Mohammad Javed

Awesome share. 👍

Collapse
augustocalaca profile image
Augusto Calaca

great tips

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

Check this tool about Web Animations API too => proyecto26.com/animatable-component/

Collapse
soyalexmetztli profile image
Alex Metztli

Wooow, cool! Thanks for sharing!

Collapse
anshulnegitc profile image
Anshul Negi

Nice collection brother, earlier I used to search on google for everything now I have the kit.

Collapse
saltgen profile image
Sagnik Dutta

Thank you!