• Original address: 6 amazing free tools that will save you some time when u are building websites. (Especially for ‘non-designer’ developers)
  • Original author: Gaurav
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: 5 having
  • Proofread: PassionPenguin, Greycodee, Chorer

What if there is no UI team? Share 6 free tools for indie web developers

Hi everyone, I hope everything is going well with you! In this article, I’ll introduce you to six free tools that have saved me a lot of time building websites. Hopefully these tools will help you as well.

1. Type Scale

How often do you struggle with font sizes for page elements? If you have this problem, this software will definitely help you.

Just enter your base font size in the web page and it will show you the font size for different elements (H1, H2, H3, etc.). In addition, you can pick different fonts from The Google Font library and try different font sizes.

The best thing about this tool is that after you select the effect you want, it automatically generates the corresponding CSS style code, which you can copy directly into the CSS file. It also automatically imports the font library of your choice and sets the font-family property for your HTML, so you don’t have to spend time defining font sizes in different files!

2. Happy Hues

If you don’t know how to match colors for your website, this tool will be your starting point.

It not only shows a variety of gorgeous color schemes, but also provides real-life examples of different color schemes and how to incorporate different colors into your project design.

This tool shows you how to choose colors for different elements. It also shows you how to choose color schemes for web illustrations to match the overall style of the page.

3. Fontjoy

This tool can quickly generate a set of fonts for different elements that you can use in your web design. You can choose the contrast you want and click Generate to get the font you want.

4. CSS Peeper

CSS Peeper is a Chrome extension with an excellent user experience. It can help you quickly check the style information of different web pages and display the colors and fonts used on the site. In addition, if you are interested in a particular element on your site, it can help you quickly check out all the CSS styles needed to create that element.

5. avataaars generator

This tool helps you create interesting personified avatars. There are so many different styles and styles to choose from, and you can quickly export your avatar footage in a variety of formats once you’ve finished your design. The tool now supports PNG and SVG, and generates React code or image links directly. Best of all, the tool is completely free!

6. brumm.af

Using this tool, you can create amazing box-shadow effects. You can add multiple layers of shadows and adjust each layer to create the most natural and realistic shadows.

Hope this article helps you! If you think this post is good, share it and follow the original author on Twitter @devggaurav ~

Thanks for reading! 😀

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.