What is Firebug?

Firebug is an awesome web development tool!

Why would I use it?✓ To find errors in your web page

✓ Experiment with and preview changes without breaking your site

✓ Make simple updates yourself without having to pay a developer

What can it do?Inspect

View the HTML source on the fly

What can it do?Inspect

Inspect HTML tags and CSS properties

What can it do?Inspect

Edit HTML and CSS and see those changes instantly

What can it do?Layout

Visualise your page layout with Box Model shading

What can it do?Layout

Visualise breakdown of each box in the Box Model

What can it do?Layout

View rulers and guides for pixel perfection layout

That’s not all...Log - Log events to the console

Profile - Measure site performance

Debug - Provides a powerful debugger

Analyse - Monitor network activity

Where can I get it?

http://getfirebug.com

You can also get a lite version for Chrome

http://getfirebug.com/releases/lite/chrome/

Enabling Firebug

The Firebug panel will open at the bottom of the browser

WTF is this Box Model?Every element on yourpage is a box that consists of Width, Height, Padding, Border & Margin

Your new best Friends!

Click the HTML tag and the element will be highlightedPadding is purple Margins are yellow

The Quick Info boxGives you all the important info at a quick glance

If it gets in the way, just drag it

If you don’t want it, hide it

Editing your HTMLClick the HTML attributes or text to change them

Use the Tab key to move to the next attribute

Editing your CSSClick a property to change it

When a Property is struck out, it means it’s been overridden by another style

Editing your CSS

Cycle through propertiesIncrement or decrement numbersIncrement or decrement by ten with Shift key

Use the Up/Down arrow keys to...

Adding to your CSS

Double-clicking the white areaEditing the last value and hitting TabRight-clicking and selecting "New Property..."

Add new Properties by...

Demo

Useful LinksFirebug FAQ’s - http://getfirebug.com/wiki/index.php/FAQFirebug Documentation - http://getfirebug.com/wiki/index.php/Main_Page

Handy online Color Picker - http://www.colorpicker.comThe CSS Box Model explained - http://css-tricks.com/the-css-box-modelList of CSS properties - http://reference.sitepoint.com/css/propertyrefFont families - http://line25.com/articles/semi-web-safe-fonts-to-spice-up-your-web-designs

Font sizing - http://css-tricks.com/css-font-sizeWordPress and CSS - http://codex.wordpress.org/CSS

Questions?

Thank You!http://maddisondesigns.com@maddisondesigns