🚀🚀10 sites or apps that can make your frontend development to pro* level 
Tags: webdev, design, html, beginners
Published: 2020-07-24 05:34:23

These are the site / apps/ extenstion I found very useful in my frontend development. 

They can eventually **5x** your developement speed.

#Responsive#
I'll place this in the top place, [it is](https://responsively.app/) one of the emergging open-source electorn app where you can check the resposiveness of multiple phone and screen.

Not only that *think of this scenario* you can inspect and add a css code it gets changed in all the screens you can check how the code impacted in all resposive screens in a single window ! 

*can't get cool:sunglasses: than this*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6qa3d1y5whz19upjuos0.png)

Github URL : https://github.com/manojVivek/responsively-app

#Work From Home mate#
It is an helper application to balance the work life in the modern wfh pattern. It can help you to stay dehydrated and take a quick and accurate break.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/90ap7hk8f2ia357zl31d.png)

Github URL : https://github.com/karthick3018/wfh-mate


#Shape Divider#

Resposively got the 1st badge in the product hunt here it the second bagde holder.

In the modern desgin world we'll get many background or floating shapes like waves , curve etc. 

This [app](https://www.shapedivider.app/) can solve that easily it can be helpful in making diffrent type of shapes and generate css for the shape
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7c5p7mbahknd88z9j5jk.png)

App link : https://www.shapedivider.app/

#Animation#

If we use style and animation for a text or any element animation is the first thing that seeks attention of the user. We can complain even I looks there first :joy:

Animista can help you with , it has many animation templates you can select any and check how it works actually. Out of the box they generates CSS for the particular animation. Animation can be simple now :man-shrugging:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c70qsde7upgb2mpjeusw.png)

App Link: https://animista.net/

#Border-radius#

This is the only border-radius code or template i've seen 2 years back `border-radius:10px` or `border-radius:50%` 

but now it way ahead having multiple border shapes in today's design. Design is nice come on how can we generate that by just inspecting a element  :face_with_rolling_eyes:

This site solves my border-radius issue recently now it's easy! let's do different border radius 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4mspp7b23g9qcvwlpf0n.png)

Site Link : https://9elements.github.io/fancy-border-radius/

#Gradient#

Gradient colors are the one often used for background and other stuffs. Same inspect can't help much more . But Css-matic can help it with to generate cool gradients .

In my recent [post](https://dev.to/karthick3018/check-this-scss-methods-before-using-scss-build-an-apple-imusic-style-16kp) I created the background using this site it's cool

It can handle other stuff's like box-shadow,border-radius,noise-texture 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ipbg0lpemmgrp84dtpf.png)

Site Link : https://www.cssmatic.com/

#CSS Clip Path#

CSS Clip path is the one used for shaping the svg or image other than using border-radius . It can be used to generate the available geomentric shapes.

This site can help to clip the shapes and generate the CSS value for that shape 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/os1efje1pus8trv6vmvf.png)

App link : https://bennettfeely.com/clippy/

#Shape Templates

These are some of the shapes created using css they can act as a tempalate for you . Well I copied trapezoid recently from here. 

App link : https://css-tricks.com/the-shapes-of-css/

#Icons

Icons are the things that can't be avoided in making a website wheather it can be of svg or from font awesome.

This site has the limited number of icons but it covers major icons in the use case for free

App link : https://heroicons.dev/

#Font Selector 

We see many of the site is our day to day web surff some fonts many be influenced us this simple chrome extension can help to find the font used in any of the sites 

App link : https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

_it can be done using inspect as well :stuck_out_tongue_closed_eyes: but you can't inspect every text used it may have multiple fonts_

#Color Selector 

Same like the font selector it is color selector many of you would've used already just mentioning here 

App link : https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

#Box Shadow
This Site has the list of box shadows 

https://getcssscan.com/css-box-shadow-examples

_This github repo has other list of links or resources that can help you with website development_

https://github.com/bradtraversy/design-resources-for-developers

_Share the other resources that helped you a lot_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6tvvqaxjap2xcud4sdb1.jpeg)

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
*check my styles on* [codepen](https://codepen.io/karthick30)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)
*connect with me on* [linkedIn](https://www.linkedin.com/in/karthick-raja-dev/)

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*