Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney


Published on

Presentation by Anthony Hortin @maddisondesigns at WordCamp Sydney 2012 #wcsyd

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney

  1. 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. 2. Put simply...Firebug is an awesome websiteadministrators secret weapon!
  3. 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. 4. What can it do? InspectView the HTML sourceon the fly
  5. 5. What can it do? InspectInspect HTML tagsand CSS properties
  6. 6. What can it do? InspectEdit HTML and CSSand see thosechanges instantly
  7. 7. What can it do? LayoutVisualise your pagelayout with Box Modelshading
  8. 8. What can it do? LayoutVisualise breakdownof each box in theBox Model
  9. 9. What can it do? LayoutView rulers andguides for pixelperfection layout
  10. 10. That’s not all...Log - Log events to the consoleProfile - Measure site performanceDebug - Provides a powerful debuggerAnalyse - Monitor network activity
  11. 11. Where can I get it? You can also get a lite version for Chrome
  12. 12. Enabling FirebugThe Firebug panel will open at the bottom of the browser
  13. 13. WTF is this Box Model?Every element on yourpage is a box thatconsists of Width,Height, Padding,Border & Margin
  14. 14. Firebug’s Box ModelGet a visual breakdown ofeach box in the Box ModelIt shows you the width andheight of the innermost box,along with the size of thepadding, border & margin
  15. 15. Where’s the code?The Inspect button lets you select any element on your page using your mouse
  16. 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. 17. Selecting your HTMLClick the HTML tag and the element will be highlighted Padding is purple Margins are yellow
  18. 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. 19. Hiding Quick InfoIf you don’t want the Quick Info box, simply hide it
  20. 20. Editing your HTML Click the HTML attributes or text to change them Use the Tab key to move to the next attribute
  21. 21. Editing your HTMLYou can also use the Edit button to change the HTML HTML & CSS changes appear as you typeMessed things up? Just refresh the browser window
  22. 22. Editing your CSS Click a property to change itWhen a Property is struck out, it means it’s been overridden by another style
  23. 23. Editing your CSSUse the Up/Down arrow keysto... Cycle through properties Increment or decrement numbers Increment or decrement by ten with Shift key
  24. 24. Editing your CSS Preview images and coloursDisable CSS properties by clicking the icon next to it
  25. 25. 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..."
  26. 26. Useful CSS StylesText Colorcolor: #hexcode; color: #123456;Important points:Each property needs to end in a semi-colon ( ; )Use American English (color NOT colour. center NOT centre)
  27. 27. Useful CSS StylesPaddingpadding: 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. 28. Useful CSS StylesMarginmargin: 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. 29. Useful CSS StylesBackground Colorbackground: 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. 30. Useful CSS StylesBordersborder: 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. 31. Useful CSS StylesTypefont: 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. 32. Common QuestionsHow 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. 33. Demo
  34. 34. Useful LinksFirebug FAQ’s - Documentation - online Color Picker - http://www.colorpicker.comThe CSS Box Model explained - of CSS properties - families - sizing - and CSS -
  35. 35. Questions?
  36. 36. Thank You! @maddisondesigns