A useful tool for understanding web sites

One of the coolest tools I know of for helping students understand how CSS works (among other things) is something called the Web Developer’s Toolbar. It’s also helpful for anyone who’s working on a web site. In fact, I’d say it’s almost indispensable.

The WDT is an extension to the Firefox web browser that allows you to find out pretty much anything you want to about a web page. I’m especially enamored of the CSS drop-down menu (pictured above, click the thumbnail for a larger view). If you select “Edit CSS”, a sidebar will appear in your browser showing the Cascading Style Sheet for the page you are viewing. What’s great is that you can change anything in the CSS sidebar and it will show up in the browser screen as you make the change.

This is a great tool for helping anyone understand how various CSS selectors work. Even if you have very little knowledge of CSS, using this tool will help you understand how you can make one simple change in a CSS stylesheet (like changing the text-align selector from “right” to “center,” or changing the font-size selector from 78% to 90%) and change the look of the entire page.

There are a lot of other great tools in the toolbar, like a tool that will show the path information for all the images on a page, or outline the images in red. If you have Firefox, and you are at all interested in web site design or development, this is a must-have toolbar. It works in Flock and Firefox.

Start Slide Show with PicLens Lite