Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney

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

Put simply...Firebug is an awesome websiteadministrators secret weapon!

Why would I use it?✓ To ﬁnd 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? InspectView the HTML sourceon the ﬂy

What can it do? InspectInspect HTML tagsand CSS properties

What can it do? InspectEdit HTML and CSSand see thosechanges instantly

What can it do? LayoutVisualise your pagelayout with Box Modelshading

What can it do? LayoutVisualise breakdownof each box in theBox Model

What can it do? LayoutView rulers andguides for pixelperfection layout

That’s not all...Log - Log events to the consoleProﬁle - Measure site performanceDebug - Provides a powerful debuggerAnalyse - Monitor network activity

Where can I get it?http://getﬁrebug.com You can also get a lite version for Chromehttp://getﬁrebug.com/releases/lite/chrome/

Enabling FirebugThe Firebug panel will open at the bottom of the browser

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

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

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

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

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

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

Hiding Quick InfoIf you don’t want the Quick Info box, simply hide it

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

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

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

Editing your CSSUse the Up/Down arrow keysto... Cycle through properties Increment or decrement numbers Increment or decrement by ten with Shift key

Editing your CSS Preview images and coloursDisable CSS properties by clicking the icon next to it

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

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)

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;

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;

Useful CSS StylesBackground Colorbackground: color image repeat attachment position; background: #fff url(image.jpg) no-repeat ﬁxed left top;background-color: color;background-image: url(path/ﬁlename.ext);background-repeat: repeat;background-position: position;background-attachment: scroll; background-color: #abc123;

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;

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;

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!

Useful LinksFirebug FAQ’s - http://getﬁrebug.com/wiki/index.php/FAQFirebug Documentation - http://getﬁrebug.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

Questions?

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

http://maddisondesigns.com	157
http://flavors.me	12
http://2012.sydney.wordcamp.org	10
http://jp.flavors.me	2
http://de.flavors.me	2
http://es.flavors.me	1
http://pt.flavors.me	1

Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney

by WordCamp Sydney on Jul 22, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 185

Statistics

Getting to Grips with Firebug - Anthony Hortin - WordCamp Sydney Presentation Transcript