Firebug tutorial video

Firebug is a free extension for the Firefox web browser that allows you to inspect, edit, analyze, and debug any website. It has a truly awesome set of features that includes:

  1. mouse over page elements to visualize invisible attributes like height, width, padding, and margins
  2. inspect html, css, javascript for any element
  3. edit css, html and view changes in real time
  4. find height and width of any element
  5. turn off and on individual CSS styles to see the effects
  6. find exact line numbers and names of stylesheets referenced by CSS
  7. lots, lots more

Every single web developer I know uses firebug on a daily or near daily basis. Whenever I get an email from one of you asking why this part or that part of your blog looks funny, I almost always turn on Firebug to quickly determine what the issue is, and usually can test a fix without ever leaving Firebug.

But Firebug is also great for non-developers who like to hack at their code. If you’re just trying to make a few small changes and don’t know much about HTML or CSS, Firebug can be a lifesaver. It allows you to try out all sorts of little changes to your websites code, without actually making those changes. If you get things working in firebug, you can just go and edit the actual files in the same way.

A lot of photographers do tinker with their own websites, and I think that very very few of them know about this invaluable tool. I made the following tutorial video to help you get a quick overview of the basics of installing and using Firebug. Let me know if this was helpful!


This entry was posted on Monday, April 21st, 2008 and is filed under Pimp my Blog, Screencast Tutorials, Search Engine Optimization. You can leave a response, or trackback from your own site.

4 Responses to “Firebug tutorial video”

  1. On April 28th, 2008 at 8:38 pm christine said:

    wow, I had no idea this was out there; Jared, I’m having so much fun learning from you, I wonder if maybe I should abandon the photography gig and spend my days writing poetry in code???? :)

  2. On May 5th, 2008 at 1:32 pm J. Paul said:

    Hi Jared,

    I have been spending the last month or so trying to get my arms around CSS. I have been in pain in so doing :<). Your tutorial on Firebug is sensational. Great job!!

    Paul

  3. On May 15th, 2008 at 9:46 am how to do html code said:

    [...] of any website. A tremendous tool for learning about website coding, and for debugging problem ahttp://www.professionalphotographertheme.com/tips/firebug-tutorial-video/MySpace Layouts, HTML Codes, Free Web Hosting/Web Design TutorialsWhat do I need to make a web page? [...]

  4. On May 15th, 2008 at 10:39 am html coding said:

    [...] [...]

Leave a Reply