Awesome web tools to simplify front-end development

by Jean. 17 Comments -

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

Colllor


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

JSconsole


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

→ visit JSconsole

CleanCSS


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

Dabblet


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

Screenqueri.es


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 Screenqueri.es, and you should too!

→ visit Screenqueri.es

Moqups


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

Minus


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

  • http://lloc.de/ realloc

    Awesome! Thanks for sharing this.

  • http://www.kimzigr.com kimzigr

    complete and useful. if you use this tools?

  • http://www.paulund.co.uk Paul

    I use 0to255, it’s a great tool to find similar colors.

  • http://www.codeconquest.com/ Charles @ CodeConquest.com

    Hi Jean-Baptiste, great collection. I’m a big fan of dabblet.com and often use it. The form builder is an especially good find – I might use it on my website.

  • http://faqwebdevelopment.blogspot.in/ Purushotham

    Awesome resources for fronted development
    I Loved Moqups and Screenqueri.es thanks for sharing

  • http://matiit.jogger.pl matiit

    Moqups is great. Didn’t know that :)

  • Ivan Nikulin

    But what about http://jsfiddle.net/? I think it is far ahead of dabblet and for sure one of the greatest web site to test your js, css, and html. Especially if you are using libraries like jQuery, Backbonejs, YUI and so on.

  • http://dougal.co Dougal

    Nice. Form builder looks very handy.

  • Stephan Lück

    very nice list, but i missing here codepen

  • http://www.sdgwebdesign.com SDGSteve

    Great selection, I could really use Colllor at the moment working out a web design I’ve been stuck on, thanks for posting so much.

  • http://www.gotpebkac.com Clem

    Should be noted that CleanCSS (which is the same thing as lots of other CSS minifiers, same template, same engine), does not work properly when you try to minify some CSS 3. Problems occur with expressions such as media queries.

    I discovered other great tools, especially the form generator. Thanks very much for that.

  • http://www.xakbox.com xakbox

    Screenqueries & Moqups most useful and important for me, thanks for sharing, like those super tools.

  • http://techgyo.com Shrinivas

    Great collection of useful tools.. Form Builder is really easy to use..

  • http://inspiredmagz.com/ Jason

    These tools helps to reduce the job o coding. So everyone can develop the front end easily. Form builder is the tool that I like the most. I think all these tools are free to use to.

  • http://www.creepygaming.net Luce

    Finally an easy way to add custom fonts! I owe you one for real!

  • http://nurwanto.net HeriNXI

    just read it, great tools.

  • http://giupbanlamdep.com Thach Pham

    Very nice collection. I always use Moqups to design a wireframe for my project.