Pet Shop Progress - Firebug rules!

Argh!

That's pretty much my first impression with how things are going. There is some progress but things are surprisingly slow. I find myself getting a bit mixed up about what's what when it comes to classes and IDs and where all my CSS formatting is located for each element. Today, I spent forever trying to make a simple line of text go up a bit with absolutely no success. Fortunately, I got a quick tutorial on Firebug and I think things might be easier from here on out.

Here's what I learned:

You can turn on Firebug, select "inspect", and click pretty much anywhere on your webpage. Firebug will then highlight the element (useful for seeing size and margins) and show you where it is in the HTML source. Then if you look in the right hand panel, it will show you all the different CSS formatting that has been applied. The neat part is that you can turn off and on the various formats right there and immediately see how it changes the display. This is great for tracking down where your problems might be. You can also adjust various sizes simply by using up and down arrow keys (especially helpful for figuring out box sizes). New formats can even be added and you can see the results instantly without the whole procedure of writing, saving, uploading, and refreshing. None of it will be saved into your files, so you still have to go back to your originals and write it there too. The benefit is that you are testing in Firebug without cluttering up your HTML and CSS files with code that may not necessarily work.