1.
What is Firebug?
“ Firebug integrates with Firefox to put a
wealth of web development tools at
your fingertips while you browse. You
can edit, debug, and monitor CSS,
”
HTML, and JavaScript live in any web
page.

2.
Put simply...
Firebug is an awesome website
administrators secret weapon!

3.
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

4.
What can it do?
Inspect
View the HTML source
on the fly

5.
What can it do?
Inspect
Inspect HTML tags
and CSS properties

6.
What can it do?
Inspect
Edit HTML and CSS
and see those
changes instantly

7.
What can it do?
Layout
Visualise your page
layout with Box Model
shading

8.
What can it do?
Layout
Visualise breakdown
of each box in the
Box Model

9.
What can it do?
Layout
View rulers and
guides for pixel
perfection layout

10.
That’s not all...
Log - Log events to the console
Profile - Measure site performance
Debug - Provides a powerful debugger
Analyse - Monitor network activity

11.
Where can I get it?
http://getfirebug.com
You can also get a lite version for Chrome
http://getfirebug.com/releases/lite/chrome/

12.
Enabling Firebug
The Firebug panel will open at the bottom of the browser

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

14.
Firebug’s Box Model
Get a visual breakdown of
each box in the Box Model
It shows you the width and
height of the innermost box,
along with the size of the
padding, border & margin

15.
Where’s the code?
The Inspect button lets you select any element
on your page using your mouse

16.
Your new best Friends!
The HTML panel displays the generated HTML
The Style panel displays the CSS styles for the
currently selected tag

17.
Selecting your HTML
Click the HTML tag and the element will be highlighted
Padding is purple Margins are yellow

18.
The Quick Info box
Gives 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

19.
Hiding Quick Info
If you don’t want the Quick Info box, simply hide it

20.
Editing your HTML
Click the HTML
attributes or text to
change them
Use the Tab key to
move to the next
attribute

21.
Editing your HTML
You can also use the Edit button to change the HTML
HTML & CSS changes appear as you type
Messed things up? Just refresh the browser window

22.
Editing your CSS
Click a property to change it
When a Property is struck out, it means it’s
been overridden by another style

23.
Editing your CSS
Use the Up/Down arrow keys
to...
Cycle through properties
Increment or decrement numbers
Increment or decrement by ten with Shift key

24.
Editing your CSS
Preview images and colours
Disable CSS properties by clicking the icon next to it

25.
Adding to your CSS
Add new Properties by...
Double-clicking the white area
Editing the last value and hitting Tab
Right-clicking and selecting "New Property..."

26.
Useful CSS Styles
Text Color
color: #hexcode;
color: #123456;
Important points:
Each property needs to end in a semi-colon ( ; )
Use American English (color NOT colour. center NOT centre)

27.
Useful CSS Styles
Padding
padding: top right bottom left;
padding: 10px 0 20px 0;
padding-left: length;
padding-right: length;
padding-top: length;
padding-bottom: length;
padding-right: 10px; padding-bottom: 10px;

28.
Useful CSS Styles
Margin
margin: top right bottom left;
margin: 10px 0 20px 0;
margin-left: length;
margin-right: length;
margin-top: length;
margin-bottom: length;
margin-left: 5px; margin-bottom: 5px;

29.
Useful CSS Styles
Background Color
background: color image repeat attachment position;
background: #fff url(image.jpg) no-repeat fixed left top;
background-color: color;
background-image: url(path/filename.ext);
background-repeat: repeat;
background-position: position;
background-attachment: scroll;
background-color: #abc123;

30.
Useful CSS Styles
Borders
border: width style color;
border: 2px solid #2233FF;
border-left: width style color;
border-right: width style color;
border-top: width style color;
border-bottom: width style color;
border-left: 1px dotted #000; border-right: none;

31.
Useful CSS Styles
Type
font: style variant weight font-size/line-height font-
family;
font: bold 15px/18px Georgia, "Times New Roman", Times, serif;
font-family: family-name;
font-size: size;
font-weight: weight;
font-style: style;
font-size: 16px; font-weight: bold; font-style: italic;

32.
Common Questions
How do I change the background colour?
How do I change the menu colour?
How do I change my font or heading sizes?
All of these are easy, using Firebug!

33.
Demo

34.
Useful Links
Firebug FAQ’s - http://getfirebug.com/wiki/index.php/FAQ
Firebug Documentation - http://getfirebug.com/wiki/index.php/Main_Page
Handy online Color Picker - http://www.colorpicker.com
The CSS Box Model explained - http://css-tricks.com/the-css-box-model
List of CSS properties - http://reference.sitepoint.com/css/propertyref
Font families - http://line25.com/articles/semi-web-safe-fonts-to-spice-up-your-web-
designs
Font sizing - http://css-tricks.com/css-font-size
WordPress and CSS - http://codex.wordpress.org/CSS

35.
Questions?

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