Getting Started With HTML & CSS Using Firebug

HTML & CSS are the the building blocks of websites on the Internet.

If you want to get started with learning HTML and CSS, a book like Head First HTML with CSS & XHTML will get you to a flying start really quickly.

My wife and I both used the Head First book to build the basics and then we used a fantastic free tool – a Firefox extension called Firebug to become well versed in HTML and CSS.

In fact, even after a few years of building websites we find Firebug indispensable in our web development work. And no wonder Firebug is the most popular web development tool for Firefox.

Firebug lets you inspect web pages and see the HTML and CSS behind it. You can make real time changes and see how the web pages change. This is an incredible way of tinkering and learning new things especially in CSS.

Just install the Firebug extension, and right click on any part of the web page and click on Inspect element. You will instantly see the web site code with the part you clicked on highlighted in the code. On the right side panel you will see the CSS code associated with the element.

Firebug also has an excellent JavaScript debugger. You can send messages directly to the console from your webpage through JavaScript.

Plus, you can add Firebug Firefox extensions that further extend Firebug’s functionality. Of which, Codeburner for Firebug is an excellent starter resource for beginners. It adds HTML and CSS reference material right inside Firebug.

Firebug Features

• Inspect HTML and modify style and layout in real time
• Use the most advanced JavaScript debugger available for any browser
• Accurately analyze network usage and performance
• Extend Firebug and add features to make Firebug even more powerful
• Get the information you need to get it done with Firebug

With HTML 5 and CSS 3 bringing a lot of new exciting features to building web sites, this could be a great time for you to get in on this fun area. Be it for serious work or just as a hobby, Firebug will put you on a fast track to building your own web sites.

Get Firebug

With the release of Firebug 1.5, GetFirebug.com has gotten a nice redesign and a brand new look.