HTML5 Zone is brought to you in partnership with:

My name is Jean-Baptiste Jung and I’m a 29 years old web developer and professional blogger. I was born and raised in Paris, France and I now live in Belgium with my wife and our adorable cat. I first used the internet in 1998, built my first website in 2001 and finally started to work as a professional web developer in 2005. In 2010, I left my job and created my own web development studio. jb is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

Awesome Web Tools to Simplify Front-End Development

  • submit to reddit

As a developer, I really like tools that can help me save time, or just make the whole development process easier. In this article, I have compiled my favorite web tools to simplify front-end web development.

Form builder

Forms are a very important part of any website, but they can also be quite long and complicated to built. This very handy tool will assist and help you to create efficient web forms. A real time saver!

→ visit form builder


Need help with color associations? Here is a useful tool for you. Colllor makes it easier to generate color palettes and variations with just a few clicks.

→ visit colllor


Need to debug your JavaScript code? JSconsole allow easy online debugging of any JS code.

→ visit JSconsole


CleanCSS is a tool that allow you to make your css stylesheet smaller, cleaner and easier to read. Simply set the settings, paste your valid CSS code, and let CleanCSS do the hard work.

→ visit CleanCSS

Mystic Paste

As you probably know if you often read my blog, I really like to collect and share code snippets. Mystic Paste is a very useful pastebin-like website to paste, share and keep your favorite code snippets.

→ visit Mystic Paste


Do you need to test some HTML? Do you want to see what some CSS code can do? Dabblet is one of my favorite web tools for front-end web development. It allows you to see your CSS and HTML code in action. Very useful for testing purposes.

→ visit Dabblet

In 2012, it is very important that your website is responsive and display correctly in either big screens and portable devices. To test how your website looks in various screen resolutions, I use, and you should too!

→ visit


Moqups is an awesome HTML5 App used to create wireframes online. Super useful when you need to create a quick mockup of a website.

→ visit Moqups


Images are indeed a very important media on the web. I often need to be able to stock some image, and also to execute basic tasks as such as resizing or cropping. Minus is definitely my favorite website for all those purposes.

→ visit Minus

Font Face Generator

Do you like to use custom fonts on your website? Font Squirrel font-face generator generate all font formats as well as the CSS code needed for using cross-browser compatible custom fonts on your website. A must have in your bookmarks!

→ visit Font Face Generator

Published at DZone with permission of jb j, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Kehong Liu replied on Sat, 2012/12/15 - 10:41pm

Pretty good resources and very useful, thanks a lot.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.