MRMcGovern.com

Yes that’s right, Firefox, a mere web browser is one of the best tools when it comes to front end web design. No, you can’t just download Firefox, open it, and “BAM” you have a website. Of course you will need to do a lot of designing and programming, but there are tools made specifically for Firefox to help with this. The list below will explain it all.

1) The Web Developer Toolbar
The Web Developer Toolbar allows you to disable different programming languages, or styles within a page, which allows you to see what languages certain page elements are programmed with. You can also find a lot of information about forms and images, edit HTML and CSS, re size the browser window to simulate different screen resolutions and much more. There are also tools like rulers and guides, which are very useful for lining up DIVs and things of that nature. There are just too many features in this add-on to list.

2) Firebug
Firebug allows you to inspect elements of a page and see what HTML and CSS correspond to it. You can also change the coding and styling of certain elements, or the entire page and experience it live right in the browser. This add-on is especially useful for debugging styling issues. There is also much more you can do with this add-on with DOM and scripting, etc. This add-on is a necessity.

3) Colorzilla
This add-on is very simple, but very useful for front end design, especially preliminary design, when you are first getting your color palette set up, and defining some CSS attributes. Colorzilla allows you to select any color on a web page with a tool that is much like the eyedropper or color selector in Photoshop.

4) IE Netrenderer
IE Netrenderer is an important add-on that many web developers, especially those who are starting out may over look. This add-on lets you take a screen shot of your web page in multiple versions of Internet Explorer. This is important to ensure that your website functions across all browsers. This add-on is especially useful on a Mac system because you cannot install Internet Explorer. On a Windows machine, a better solution would be Multiple IEs, which will not take a screen shot, but actually allow you to run multiple versions of Internet Explorer on your system, so you can test your sites with 100% interactivity.

There are many more useful web development tools out there, but these I feel are by far the most useful I’ve seen. I swear by these and use them with every single one of my projects, I suggest you do the same.