Getting to grips with firebug

1,275 views

Published on

Presented at the Melbourne WordPress Meetup.

Quite often, in the WordPress forums and the like, people post simple questions about how they can change the colour of a link or menu item, or change the background colour of something.

To new users HTML and CSS looks like voodoo. This presentation will try and demystify some of the common HTML and CSS tweaks people ask for and demonstrate how users can perform some basic site debugging and styling using the browser add-on, Firebug.

It will also cover how Firebug can be used to find specific css styles as well and how to test basic changes within the browser before making those changes permanent.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,275
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Getting to grips with firebug

  1. 1. What is Firebug?Firebug is an awesome web development tool!
  2. 2. 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
  3. 3. What can it do? InspectView the HTML sourceon the fly
  4. 4. What can it do? InspectInspect HTML tagsand CSS properties
  5. 5. What can it do? InspectEdit HTML and CSSand see those changesinstantly
  6. 6. What can it do? LayoutVisualise your pagelayout with Box Modelshading
  7. 7. What can it do? LayoutVisualise breakdownof each box in the BoxModel
  8. 8. What can it do? LayoutView rulers andguides for pixelperfection layout
  9. 9. That’s not all...Log - Log events to the consoleProfile - Measure site performanceDebug - Provides a powerful debuggerAnalyse - Monitor network activity
  10. 10. Where can I get it?http://getfirebug.com You can also get a lite version for Chromehttp://getfirebug.com/releases/lite/chrome/
  11. 11. Enabling FirebugThe Firebug panel will open at the bottom of the browser
  12. 12. WTF is this Box Model?Every element on yourpage is a box that consists ofWidth, Height, Padding,Border & Margin
  13. 13. Your new best Friends!Click the HTML tag and the element will be highlighted Padding is purple Margins are yellow
  14. 14. 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
  15. 15. Editing your HTML Click the HTML attributes or text to change them Use the Tab key to move to the next attribute
  16. 16. Editing your CSS Click a property to change itWhen a Property is struck out, it means it’s been overridden by another style
  17. 17. Editing your CSSUse the Up/Down arrow keys to... Cycle through properties Increment or decrement numbers Increment or decrement by ten with Shift key
  18. 18. Adding to your CSSAdd new Properties by... Double-clicking the white area Editing the last value and hitting Tab Right-clicking and selecting "New Property..."
  19. 19. Demo
  20. 20. Useful LinksFirebug FAQ’s - http://getfirebug.com/wiki/index.php/FAQFirebug Documentation - http://getfirebug.com/wiki/index.php/Main_PageHandy 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-designsFont sizing - http://css-tricks.com/css-font-sizeWordPress and CSS - http://codex.wordpress.org/CSS
  21. 21. Questions?
  22. 22. Thank You! http://maddisondesigns.com @maddisondesigns

×