in Design / Development

A Collection Of Great Tools That Will Make A Web Developer’s Life Easier

You may think that a web developer’s life is nothing but honey and milk. They are incredible smart, they are cool, they are creating amazing things and they are paid a lot. You may also think that their job is not as serious as a software developer because after all, what are they really doing? Just a bunch of website so in their working hours there is a lot of happiness and joy.  Well, that is not entirely true because a job is like any other jobs; it has its ups and downs. It’s not only happy happy joy joy especially because you work directly with the client and sometimes the client can prove to be a pain in the…you know what I mean.

Even more, if you are not a freelancer and you work in a company you can find yourself in a very ugly situation filled with extremely tight deadlines or projects which you hate. Well, that’s another story and we should better put it on hold because we are way of topic. This article is about the tools used by web developers so let’s talk about this for a minute. Every web developer has his toolbox, just like a plumber; for every need there’s a solution and that’s exactly what happens in programming. For every job, the developer needs a tool so if you are new in this field then this article might be pretty useful to you because here you can find a list of extremely great tools that will help you work more efficient.



With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.



The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications.



Spur is a fun and easy way to critique web designs in ways you’ve never done before. Just paste a URL (or upload an image) and you’ll be able to use seven different tools to help you find what’s working (and what isn’t!).



Reduce the file size of your photo by up to 5x, while keeping thier original quality and JPEG format.

Site Validator


Site Validator complies with the validation done by the official W3C Validator, and that includes validating HTML5 markup on your sites.



CodePen is an HTML, CSS, and JavaScript code editor right in your browser with instant previews of the code you see and write. It’s great for showing off your work and seeing what amazing things other people are doing with the web.



Brackets is an open source code editor for web designers and front-end developers.



CodeKit helps you build websites faster and better. Its flagship features are listed below and the one-minute teaser video to the right is a good place to start.



Patternizer is an online tool to help you generate CSS3 stripes using an online interface.

CSS3 Click Chart


CSS3 Click Chart is a handy reference tool for CSS3 attributes; I’m sure we’ve all struggled to remember quite what order a CSS box-shadow values are required in at some point, and that’s where CSS3 Click Chart comes in.


Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.