Amateur’s Guide To Customizing Website Design With FireBug

Ads by Google

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.

Introduction:

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.

firebug-css-properties.gif

HTML Tab:

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.

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Google Chrome Mastery
Google Chrome Mastery
33 Members
Mozilla Firefox Fans
Mozilla Firefox Fans
30 Members
Best Mobile Browsers
Best Mobile Browsers
25 Members
Safari Browser Tips
Safari Browser Tips
17 Members
Internet Explorer (IE) Tips
Internet Explorer (IE) Tips
4 Members
Ads by Google
Comments (36)
  • stellar website design

    This is a great reference for website design.

  • Chris

    Very interesting tool.

  • Islamabad

    Great article and thanks for sharing. Good guide for all developers

  • web

    I’m new to this tool, but i think it is really great

  • Website Designer Katy TX

    Firebug is a great tool. I have been using it for a while now and have other plugins that work great with it. SenSEO is a great search engine optimization tool that complements Firebug. Also YSlow is a great tool to check on how fast your website loads that works with Firebug.

    Firefox is by far the best browser on the market.

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.