Using Firebug to better understand the web– click on images for full size.
Firebug is a plugin for Firefox that has revolutionized web development. For many it has come to replace the Web Developer plugin for Firefox. Someone who works in internet advertising/media or web development should understand how webpages work. This intro to Firebug will cover some basic and interesting features of the tool. There seems to be too much emphasis on link building plots and SEO gimmicks that make a website into a house of cards. Nothing beats good site design and understanding of the web.
Design with CSS and HTML
Click the inspect element button and hover over the CSS box model or element, when the element is active a blue border will surround it. While the inspect element button is depressed wherever you mouseover on the page will be shown in the code in the firebug window . Now look at the style tab on the right side of the console. You can edit the CSS by clicking on the style rules, there is an autocomplete feature similar to Dreamweaver, you can cycle through the variouse autocomplete suggestions by pressing tab. This is for editing existing style rules on the page. The change appears instantly. Creating a new style rule is a little less intuitive and feature rich. You have to first click on the CSS tab, then click the “edit” button. The css will now be editable similar to a simple text editor, without the autocomplete feature.
Firebug can be used with Dreamweaver and Photoshop in the design and layout of your page, pages can initialy be coded in Dreamweaver then tested and fine tuned in Firebug, so you can edit on the fly, with instant previews in your browser. It can also be used to gather inspiration from other websites, by exploring their design.
Quick Custom Templates
A) Find a template layout that you like.
B) Replace the images to this template with your own images that you create in Photoshop,
C) Change the HTML and CSS in Firebug untill you get your exact look, start with editing color values and your layout with relative positioning and floated divs.
D) Return to step B untill fine tuned
Network Load: Yslow and Net Tab
Yslow is a plugin developed by Yahoo for Firebug, the plugin analyzes your site for 34 best practices (as decided by Yahoo) divided into 7 categories; the page is then given a grade from A to F. A website should load fast for both users and search engines and this plugin helps you optimize your page for speed. YSlow is a combination of a DOM tree crawler and a packet sniffer. The DOM tree contains all the elements that might make up a web page. YSlow has a built-in DOM crawler and also pulls data from the NET panel to monitor different network requests.