Productive Tools🚀 For Web Development😎
Tags: productivity, angular, react, javascript
Published: 2020-02-22 18:36:23

##🦸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](https://color.hailpixel.com/#3CB46E)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i4gco65wnwwqla85pzow.png)

2.[uiGradients - Beautiful colored gradients](https://uigradients.com/#Wiretap)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fgyrbke0joq3dtuzwka5.png)
 
3.[Stylify Me - Online Style Guide Generator](http://stylifyme.com/?stylify=www.pluralsight.com)

4.[Colors and Fonts](https://www.colorsandfonts.com/)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xb9mxa468x6vqap8zkp7.png)

#Fonts 📣#
 [FontSpark | Discover Better Fonts](https://fontspark.app/)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a2sda5go3oxijzlch4ve.png)

#Icon 🎩#
[Noun Project](https://thenounproject.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w0a1ltc23kaxm0vfqy4m.png)
 
#CSS 👑#
[CSS Grid: Style Guide](https://codepen.io/oliviale/full/GbmyYx)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4e415qxoyu5075qdrbzb.png) 

#Logo 💎#
[Logaster logo maker](https://www.logaster.com/logo/?t=EBookStore)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bjd1a05vogkki2ubh1vg.png)

#Animation 👾#
1.[Animate.css](https://www.colorsandfonts.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pg7o5hn275oub5jt16z2.png)
 

2.[CSSeffectsSnippets](https://emilkowalski.github.io/css-effects-snippets/)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0fuobsl9axzywg9me14p.png)

3.[Animatopy](https://sarthology.github.io/Animatopy/)

4.[Collect UI](http://collectui.com/challenges/sign-up)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ei1tfnqp5u4oxqkaen3a.png)

5.[Steam inspired game card hover effect](https://codepen.io/andrewhawkes/full/RwwOJrO)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1yrzaf9l1d1b0uae77vj.png)

6.[UnDraw](https://undraw.co/illustrations)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/doae5j29nwx29c3jp7zp.png)

7.[Animista](https://animista.net/)

8.[Vivify - CSS Animation Library](http://vivify.mkcreative.cz/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2c59gc70624z868b1iuw.png)
 
9.[CSS Animation Library for Developers and Ninjas - cssanimation.io](http://cssanimation.io/)

10.[Magic Animations CSS3](https://www.minimamente.com/project/magic/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lbp6l69t4lx6ngeq8wie.png)
 
11.[vector illustrations – Ouch.pics](https://icons8.com/ouch)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lkwptjzb12i5xxvvjp9b.png)

12.[Illustrations Vectors, Photos and PSD files](https://www.freepik.com/search?dates=any&format=search&page=1&query=illustrations&selection=1&sort=popular&type=vector)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f74mt3ldvzk0n8duzspv.png)
 

13.[MIT Vectors](https://lukaszadam.com/illustrations)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/up9zfotfil8ewcau9857.png)

14.[Humaaans: Mix-&-Match illustration library](https://www.humaaans.com/)
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/28s7m6pc041qbe3xq37v.png)

*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.*