Web dev and designer tools (Part-1)
Tags: webdev, programming, design, tooling
Published: 2021-11-27 12:14:06

*So in this topic I've listed web developing and designing tools that you require,which I know,if we get some more so I'll be posting it in part 2,so we'll see which and what are they!*

**1)Time saving Web development Tools:**

**a)[Coolors](https://coolors.co/)-** A really nice online tools that can generate matching and suitable color schemes for your project.
![Coolors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zb8bxr7vo0v8cxaakp5.jpg)
**b)[Getwaves](https://getwaves.io/)-**
Get waves allow you to generate waves of different colors and trying number of waves randomly.
![Get waves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqm9l7ukjo5eud0sj6jo.jpg)
**c)[Blobmaker](https://www.blobmaker.app/)-**
Blobmaker helps you to generate really gooey looking SVG blobs of various sizes,colors and shapes randomly.
![Blobmaker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l89hepjtkvvg45627gry.jpg)
**d)[Screely](https://www.screely.com/)-**
This helps you to create awesome and beautiful mockups of screenshots of websites.
![Screely](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co05vfw56e76e6cpgsyt.jpg)
**e)[CSS Portal](https://www.cssportal.com/)-**
This is a home to a large range of CSS generators,tools and resources.
![CSS Portal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyxh1qbe1z0v97mjgtds.jpg)
**f)[Webpack](https://webpack.js.org/)-**
Here all the goodness that you find in webpack
![Webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vx60mo0yd7x3wd1tfkw.jpg)
**g)[Logo Crunch](https://brandmark.io/logo-crunch/)-**
Logo crunch is a logotype maker that specializes in creating beautiful responsive graphics.
![Logo Crunch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qh4ykq7m2seku3eb6yxz.jpg)

**2)Tools which make everything easier for you:**

**a)[Letsenhance.io](https://letsenhance.io/)-**
It's an **AI powered** tool that helps to **improve** image quality and **enhance** it.
![Letsenhance.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb396wqtez9akzpe282r.jpg)
**b)[Loading.io](https://loading.io/)-**
From **complex** to **simple**,**loading.io** is having huge variety of **animation**.
![Loading.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9itw5v8oi767ucomwhjq.jpg)
**c)[Genial.ly](https://genial.ly/)-**
All in one tools to create **infographics**,stunning **presentations**,**interactive images** with cool **animations**.
![Genial.ly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pi8385zz9abzrc4uvhoi.jpg)
**d)[Gingersauce.co](https://gingersauce.co/)-**
One of best tools to create wonderful **Brand Books**.
![Ginger sauce.co](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa0radhs8eretnwxb037.jpg)
**e)[Panda Doc](https://www.pandadoc.com/)-**
**Panda Doc** provides templates like Contracts,Forms,Proposals,quotes and Signatures for you.
![Panda Doc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcav34lxr6q0udxjpprf.jpg)
**f)[Videvo.net](https://www.videvo.net/)-**
Free more than **500k** stunning **stock videos** for you already saved to use.
![Videvo.net](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weuiduhikyy2w9vf2pag.jpg)
**g)[Render forest](https://www.renderforest.com/)-**
All in one tool to create **animation videos**.
![Render Forest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32v6m2tvj5eso0hjrp3c.jpg)

**3)6 Epic Chrome Extensions for Web developers**

**a)[What Font](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)-**
![What Font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ww2btqw92l5zy591frj.jpg)
**b)[ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en)-**
![ColorZilla](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz8med6mz8tecx0s1em2.jpg)
**c)[Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en)-**
![Clear Cache](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d33g2uxgvbwgk8sb83kr.jpg)
**d)[React Dev.tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)-**
![React Dev.tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/924siw5woezk683kw32x.jpg)
**e)[GofullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=en)-**
![GoFullPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnbxjxoqq7mzz2xlmo2k.jpg)
**f)[Grammarly](https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen?hl=en)-**
![Grammarly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kgqxnvx2v8srohl3ndl.jpg)

**4)5 Best Productive Tools For Web developers:**

**a)[Responsinator](https://www.responsinator.com/)-**
![Responsinator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oewg1isualbrj37m853.jpg)
**b)[Metatags.io](https://metatags.io/)-**
![MetaTags.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v0z15h7zftg00hmehq5.jpg)
**c)[WhatRuns](https://www.whatruns.com/)-**
![WhatRuns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzkmvu5w6vbhjqvdatmp.jpg)
**d)[Extract CSS](http://extractcss.com/)-**
![Extract CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c8vbvkbnjk6c8or1yr3.jpg)
**e)[Browser Stack](https://www.browserstack.com/)-**
![Browser Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tck08owpv0jxekgrqamj.jpg)
**5)Top 6 websites to get free png icons:**

**a)[Flaticon](https://www.flaticon.com/)-**
![Flat Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9rluqpcszej2nvmw9f0.jpg)
**b)[Icon shock](https://www.iconshock.com/free-icons/)-**
![Icon Shock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7udfkc7yv1s2osgs9yli.jpg)
**c)[PNG Tree](https://pngtree.com/)-**
![PNG Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybrb34dg09vu5dpkws87.jpg)
**d)[Vecteezy](https://www.vecteezy.com/)-**
![Vecteezy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbardwq6dkzuivjg4kuv.jpg)
**e)[Icons8](https://icons8.com/)-**
![Icons8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epaay7bgp0bulv5lt5cd.jpg)
**f)[Icon Finder](https://www.iconfinder.com/)-**
![Icon Finder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi9pbpsijhpk4u81stvo.jpg)
**6)Best CSS generators you need:**

**a)[Getwaves.io](https://getwaves.io/)**
**b)[Neumorphism](https://neumorphism.io/#e0e0e0)-**
![Neumorphism](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mobrweg0c79xsjohodtg.jpg)
**c)[Tridev](http://tridev.com/)-**
![Tridev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sv1payuyfw2h2eh8mwt.jpg)
**d)[CSS button generator](https://css3buttongenerator.com/)-**
![CSS Button generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc00ro3bl2y5b6jufr56.jpg)
**e)[Glass Morphism](https://hype4.academy/tools/glassmorphism-generator/)-**
![Glass Morphism](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skw89f2g96h2i2kin35m.jpg)
**f)[Blob Maker](https://www.blobmaker.app/)**

**7)Useful Javascript Libraries:**

**a)[Particles.js](https://vincentgarreau.com/particles.js/)**
It's a simple #javascript library to create moving particles as a background for Web pages.
![Particles.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twf45uej1cqvquho1dox.jpg)
**b)[Bideo.js](https://rishabhp.github.io/bideo.js/)**
This JS library drives it simple and smooth to add a video background that looks awesome on every screen interface.
**c)[Choreographer Js](https://christinecha.github.io/choreographer-js/)**
It's a simple library that allows you to handle #css animations as well as non-css animations.
![Choreographer Js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi4kqyts9ab4s94ky8uz.jpg)
**d)[Chart.js](https://www.chartjs.org/)**
It's an open source library that gives divergent solutions to all of that chart which demands your corresponding application.
![Chartjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i08mhtertvpxyxlul9sw.jpg)
**e)[ScrollMagic](https://scrollmagic.io/)**
Simple scrolling web pages can be made a UX element to surprise and engage website users.ScrollMagic JS library makes that easy to implement.
![ScrollMagic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q92kbisf16bdfgtbe72t.jpg)

**Here's the link ⬇️ to Part-2**
[Web developers and designers tools Part-2](https://dev.to/madiha_eram/web-dev-and-designer-tools-part-2-55j5)