Here I have compiled the best essentials Add-ons that any Web Designer will need to start designing/coding. These add-ons are for the Firefox and have been used and recommended by many professional developers in the field. Feel free to explore with them as they are very powerful and I can’t imagine completing a web site with out most of the add-ons that make our life 100 times easier.

Firebug

We all know about now that it would be nearly impossible to get that pixel perfect website without the help of our friend Firebug. This add-on has been on my personal list since the childhood of my coding days. A must-have if you are serious about being a web developer. Now you can also use FireBug in IE, Opera, and Safari with Firebug Lite.

The Web Developer Tool

As the name states, this is a tool that can help you validate a website with a click of a button, even easier a shortcut SHFT+CTRL+H (PC) to be exact.

CSSViewer

CSSViewer is a handy tool that will once activated will let you hover over an element and will give you the properties for that specific one.

IE Tab

Ever wished you could just switch to IE without having to fire the actual application? Well that’s possible with IE Tab! This tool will allow you to switch from Firefox to IE with just a right-click. Awesome huh?

YSlow

With YSlow you can enhance you website’s speed. YSlow analyzes your current state of speed that it takes the browser to download, YSlow will then suggest better methods to increase the download speed for that website.

CodeBurner for Firefox

This integration to Firebug’s Add-on will extend the power of Firebug. CodeBurner is simply a helpful resource for HTML and CSS elements. When in need or stuck in not knowing which element you need to use fire up CodeBurner and it will give you a description of what you are looking for. Basically it’s like a dictionary for HTML and CSS. You can’t go wrong with Sitepoint!

ColorZilla

ColorZilla will give you the value in RGB of any thing that is visible with you browser. For those who ever wanted to get the RGB value and don’t want to load up Photoshop this is a quick alternative.

FireFTP

FireFTP is a cross-platform File Transfer Protocol add-on that will let you connect to your server, same as FileZilla.

FirePHP

If you don’t love firebug yet then maybe this will push you more to it. FirePHP is an additional extension to FireBug that will help clear all those headaches PHP is giving you. Load-up FirePHP and begin debugging away.

ScreenGrab

Need to make a tutorial? Perhaps inspired by a website you came across? Now you don’t have to worry about losing that thought. ScreenGrab will allow you to take a screen capture of what the browser is viewing.

You can download the all these extensions that I have collected here.

Related posts:

1. Recreating The Fireworks Icon With Fireworks CS4
2. Websites Using Effective Whitespace
3. Daily Creative Inspiration #67
4. Black & White Week: 45+ Minimal Web Design Examples
5. Well-Constructed And Designed Weblogs

This post is tagged freebies