Tools for front end web development - Fancy Font and Generator

  • Posted on: 13 September 2016
  • By: jmu

  Recently, I found some fancy fonts( such as Google Fonts), interesting generators, tools and libraries that can make my life much easier. In this blog, I will share all of them and briefly explain some of them.

Here is the list for this blog:

Google Fonts (Open Sans)

  Google provides us lots of fantasy font style to make our web page be more impressive. Open Sans includes hundreds of font, and all of them are open source and free. You don't need to do any additional programming or setting. The only thing you need to do is add a link into the <head> tag of your HTML document.


Visual Studio Code


1001 Fonts

  I have used 1001 Fonts for a long time. In this website, you can find a lot of different font types, such as different occasion, decade or even special holiday style. All decorative fonts are super fancy. Almost all fonts are free for personal use. Parts of them are free for commercial use. Comparing with Google Fonts, it is a little bit complicated to use here. Don't worry! It's not that hard.
  Here are the steps:

  • use @font-face to declare the font family
    @font-face {
     font-family: myFirstFont;
     src: url(sansation_light.ttf);
  • use font-family to use the font
    div {
     font-family: myFirstFont;

Reference: Browser Support For Font Formats


HTML Color Picker

  This is the most useful website for front end developer to pick the color from images. I always forget the color name when I trying to add it to my webpage. This website helps me find the correct color name and the color code. The best part is I can pick colors from whatever image I have by using this website. The picker is very easy to use. Of course, it is free.

GIF Maker

Ezgif (GIF Maker) is a very nice online GIF file maker. It also provides crop tool, resize tool and optimizer. This is one of the best tool I like to use. I can get smaller file once converting the video to gif file. Just few months ago, they increased maximum allowed file size for free version. You can upload 20MB GIF file and 80MB for video. In addition, you can update your account to upload even larger files.

GIF Maker

Div Table

Recently, we like to use div instead of table as webpage structure. There are two main reason: First, div is more semantically correct in most cases. Second, div is more flexible and easier for developer to style. Since we use responsive design much more than before, div is a better choice for us to show the table. This website will help us to create a table by using div tag automaticlly. It works like charming.

div table

The Color Scheme Designer

This is tool for designer to design the web. You can choose one basic color for your website, and the color scheme designer will give you a palette which has more color. All the color it gives you will very suitable with your basic color. In addition, you can choose more than one basic color and add complementary for matching your requirements. I like using this tool because it's hard for me to choose those matching colors

The Color Scheme Designer

Bootstrap Navbar Online Generator

Bootstrap is the most popular framework for responsive design. But you need to consider several lines of code for changing navbar color. This website is an online navbar generator. You can easily choose what color you want and it will generate style code for you. It includes CSS, SCSS, SASS and LESS code. You can choose whatever you want. Very Simple. 

Bootstrap Navbar Online Generator

Campaign Monitor

This website provide an email generator. It provides both free version and premium version.  This is my favorite responsive-design email generator. I also found some other email generators from 10 Best Free Responsive Email Template Builders. Please check this website for more information about other online email generators.

campaign monitor

Go and Play with it! It is FREE !!!


Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.