Moving from just doing web design mocks in Photoshop to actually hand-coding HTML and CSS can be an extremely difficult and somewhat daunting task when you’re first starting out.
Fortunately for those of you just getting started, Firefox offers some amazing free Add-Ons that allow you to get a better look at the source code of your favorite sites as well trouble shoot some of your own front-end mark up.
The three Firefox add-ons that I find most useful are Firebug, Web Developer and ColorZilla.
Firebug allows you to click throughout the page layout and look at any portion of the mark up as well the the styles applied to each element. This can be extremely useful when you want to see how the developer accomplished a certain attribute or if you are trying to identify a section of code that might be buried inside a larger file structure.
Web Developer has some features similar to Firebug but it also has a lot of cool hidden tools that can be a real time-saver including showing image dimensions, resizing your viewport & window, as well as auto-filling forms for QAT (quality assurance testing). It also allows you to quickly measure or identify portions of your layout structure with it’s ruler and outline tools.
Last and certainly not least I would recommend trying out ColorZilla for color inspection. ColorZilla allows you to drop sample any color on the page and depending on your user preferences copy the hex-code with or without the “#” hashtag, RGB and even HSL percentages. I most commonly use this to identify colors that I like then copy and paste the combination into my Photoshop Document.
While there are many amazing Firefox Add-Ons, these are the three main tools that I use on a day to day basis while doing front-end web development. New tools and Add-Ons come out everyday so make sure to try them out to help decide what will help speed up or improve your work-flow.
Did I fail to mention a Add-On that you absolutely couldn’t work without? Make sure to post a comment and let me know! I am always on the look out for new Firefox Add-Ons that can improve my front-end web development skills.