DEV Community

Cover image for 6 amazing free tools that will save you some time when u are building websites. (Especially for 'non-designer' developers)
Gaurav
Gaurav

Posted on

6 amazing free tools that will save you some time when u are building websites. (Especially for 'non-designer' developers)

Hello everyone, hope you are doing great! In this short article, I am writing about 6 free tools that save me a lot of time when I am building websites. I hope you will also find these tools helpful. let's get into the article.

1. Type Scale

Do you often struggle to define the perfect font sizes for your elements? If yes then this is the perfect tool for you.

Alt Text

All you have to do is add your base font size once you do that this tool will generate different font sizes for different elements.(H1,H2,H3 etc.)
Also, you can select different fonts from google fonts and try different scales for your font size.

The best feature of this tool is you can literally copy the CSS generated according to your choices and paste it into your CSS file. It also imports the font you selected and sets the font-family for yourhtml`. Then you don't have to define font sizes everywhere!

Alt Text

2. Happy Hues

If you don't understand how to apply color palettes to your web designs then this is a great place to start.

Alt Text

This tool not only shows amazing color palettes but also acts as a real-world example of how the colors could be used in your design projects.

It shows, which colors to use for which elements and also how to use colors in your illustrations so that the illustrations match your design.

3. Fontjoy

Alt Text

This tool simply generates font pairs that you can use in your designs. You can choose the contrast you want and hit generate to get font pairs that go together well.

4. CSS Peeper

Alt Text

CSS Peeper is a chrome extension that you can use to inspect styles from different websites in a well-organized and beautiful way. It organizes the colors, fonts used in the website. Also, if you like a certain element on a webpage you can get all the CSS used for creating that element.

5. avataaars generator

Alt Text

With this tool, you can generate amazing avatars to use in your designs. There are multiple styles to choose from and you can export the avatar in different formats like png, SVG, and also you can get react code or image link directly. All for free!

6. brumm.af

Alt Text

With this tool, you can create amazing box shadows. You can add multiple layers to your shadows and adjust every part of it to create awesome-looking smooth shadows.!

Hope you find this article useful. If you did then please share it and also you can follow me on Twitter @devggaurav

Thank u so much for reading! 😀

Top comments (28)

Collapse
 
joelazevedo profile image
Joel Azevedo

Font Joy + Happy Hues, the perfect combination. Thanks for the share.

Collapse
 
devggaurav profile image
Gaurav

Yes 💯

Collapse
 
iamfaqeehhokyky profile image
Sulaimon Okikiola

Yeah. You may want to add FontAwesome to the list too. I've learnt about it from Danny Thompson tutorials video. Thanks @devggaurav . This is great 👍

Collapse
 
devggaurav profile image
Gaurav • Edited

Yea fontawesome is also nice. I used to use it but now i use boxicons and css.gg icons. Check it out U might also like these. Thank u😊

Collapse
 
iamfaqeehhokyky profile image
Sulaimon Okikiola

Sure to check it out right away. Thanks man 😊

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice some of these are new to me I wish I had known them before.

Collapse
 
mazyn profile image
Gilmar Alves

You sir are sharing gold! Thank you for the links ❤️

Collapse
 
devggaurav profile image
Gaurav

Thank u man!😅

Collapse
 
terd47 profile image
codebydoh

Amazing post

Collapse
 
devggaurav profile image
Gaurav

thank u!

Collapse
 
rizkimcitra profile image
R. Maulana Citra

thank you, very helpful!

Collapse
 
miguelmj profile image
MiguelMJ

These are some useful resources!

Collapse
 
davidyaonz profile image
David Yao

Smart 🤓🤓

Collapse
 
yamillanz profile image
Yamil Lanz

Awesome

Collapse
 
devggaurav profile image
Gaurav

Thank u

Collapse
 
lucasandre profile image
Lucas André

Awesome!!
Much better than my article, haha 😅
I am testing the CSS Pepper right now and I will definitely use brumm.af at some point, so I saved it here in the bookmarks.

Collapse
 
devggaurav profile image
Gaurav

Thank u so much man!😊 Also check out my earlier article on the same topic. U might find something useful there as well😅