DEV Community

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

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

devggaurav profile image Gaurav ・3 min read

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! 😀

Discussion (28)

pic
Editor guide
Collapse
joelazevedo profile image
Joel Azevedo

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

Collapse
devggaurav profile image
Gaurav Author

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 Author • 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 Author

Thank u man!😅

Collapse
terd47 profile image
codebydoh

Amazing post

Collapse
devggaurav profile image
Gaurav Author

thank u!

Collapse
mlnzyx profile image
R. Maulana Citra

thank you, very helpful!

Collapse
miguelmj profile image
MiguelMJ

These are some useful resources!

Collapse
redhoodjt1988 profile image
RedHoodJT1988

This is an awesome article. Thanks.

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
davidyaonz profile image
David Yao

Smart 🤓🤓

Collapse
yamillanz profile image
Yamil Lanz

Awesome

Collapse
devggaurav profile image
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 Author

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

Collapse
doopline profile image
Ztnight

Very good content

Collapse
mauriza22 profile image
Collapse
ma2web profile image
ma2web

Good post 👍

Collapse
devggaurav profile image
Gaurav Author

Thank you!

Collapse
nsedrickm profile image
Sedrick Meh

Thanks. This has been a great aid.

Collapse
devggaurav profile image
Collapse
anilpank profile image
Anil

Good collection, but why not simply use a good framework like bootstrap or foundation

Collapse
devggaurav profile image
Gaurav Author

Yea i use frameworks sometimes but this article is for beginners

Collapse
trinhryan profile image
Nguyễn Văn Trình

Thank you so much