Firefox, Web Development plugins and Joe public – part 1

The general public are often mystified by how a webpage actually works. Sure, you could explain HTML, CSS, Javascript and Server side scripting to them, but you’ll often be faced with a pair of glazed over eyes and a puzzled expression. Normally, this is a sign you’ve said a switch off keyword like ‘parse’, or better still, some seemingly secret code like ‘ISAPI’.

I find that a good visual aid is often enough for people to make the link between what they’ve scribbled on the back of a napkin, and a working proof of a website.

Enter Firefox. Apart from being one of the best browsers out there (alongside Safari and Opera), it has an excellent range of plugins to visually represent the structure and layout of a website.

The main one I use (and use every single day, if not every time I even open Firefox), is the firefox Web Developer addon. If I’m actually showing someone how a website is put together, this is invaluable.

Take this site for instance; one click is all it takes to view the block elements, CSS classes, etc.

See these screenshots for a quick example:

screenshot for Web developer toolbar


Basic block elements

screenshot for Web developer toolbar


CSS Styles in place

screenshot for Web developer toolbar


Block level elements

Next up.. firebug