Amateur’s Guide To Customizing Website Design With FireBug

firefox-addon-firebugI have a huge problem with web designers: I am seldom satisfied with what I am offered and can’t express in words what I actually want. Being an Internet marketer I have to launch new sites quite often, so naturally I frequently come across the problem.

So what to do? I can’t afford the time to learn web design and turn into a professional web developer. Besides, I can’t do everything by myself. Luckily, I’ve recently come across a cool web development tool that allows me to tweak CSS on-the-fly and come up with the ultimate version I feel comfortable with.

The tool is a FireFox addon called FireBug and it is so cool that many web developers use FireFox for the only reason that it can be extended with FireBug. It’s an ultimate Firefox addon for web developers. So in this post I am sharing my amateur’s tricks of creating a web site design with FireBug.


Navigate to the site template you want to edit and activate Firebug: use F12 key for quick access.

You will see the tool open in the lower half of your browser window with 6 tabs: “Console”, “HTML”, “CSS”, “Script”, “Dom”, and “Net”. I’ll be talking about two tabs here: “HTML” and “CSS”.

firefox addon for web developer

Ads by Google

CSS Tab:

Edit attributes and attribute values

To change an attribute or the value of an attribute, just click on it, and edit it right in the code. The effect of the change will be immediately visible in the browser window above.

Preview colors and images in CSS

Firebug allows amateurs like myself to better understand the CSS by showing me the preview of each visual property:

Firebug Color preview

Easily figure out exact positioning, padding and margins

The tool provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard – see the effect immediately on the page above and modify the edit if needed.

Let the tool prompt you what property can be used

Highlight the property and use up/down arrow keys on your keyboard to list all allowed CSS properties in alphabetical order.



Learn each box properties on-the-fly (margin, border, padding, and content): open HTML tab + Layout to the right and click “Inspect” in the top bar of the tool window. Now you can navigate throughout the page and observe the following:

  • each page element in the blue frame;
  • the corresponding area in the source code highlighted in blue (HTML tab);
  • the box properties visualized (Layout tab).

Firebug Boxes

Firebug’s Layout tab gives you a visual breakdown of each box in the box model and the width of each edge. Additionally, it shows you the width and height of the innermost box, and the x and y offset of the element relative to its parent.

Edit any property right in the layout tab and see the changes live on a page:

firebug boxes layout

A few helpful tips:

  • Use Control+F12 (or Command+F12 on Mac) to open Firebug in a separate window.
  • Maintain blacklists and whitelists: Firebug lets you keep a list of websites that it should or should not be enabled for. You can browse in two modes – either enable Firebug for all websites except those on the “blacklist”, or disable Firebug for all websites except those on the “whitelist”.
  • Get some more help here: FireFox tutorial in simple words.

So as you have seen with FireBug Firefox addon you can create and customize website designs even if you are absolutely unknowledgeable in web design like myself. Of course, FireBug has much broader possibilities than described above, so I’d love you to share more tips and tricks of this awesome tool.

Leave a Reply

Your email address will not be published. Required fields are marked *