You can use the Firebug Lite bookmarklet in class. Due to our security settings you won’t be able to drag the bookmarklet to the Favorites/Bookmarks bar as described on the Firebug Lite Web page. Instead use the following instructions to add Firebug lite to your Favorites.

1. Visit http://getfirebug.com/lite.html
2. Scroll down the page until you see the link that says Firebug Lite
3. Right click the Firebug Lite link and select Add to Favorites… from the menu
4. Click yes to the security alert
5. Select the Favorites folder and click OK

To start Firebug Lite in Internet Explorer

1. Open the Web page you want to analyze
2. Click Favorites > Firebug Lite

Firebug Tutorials

• Build Better Pages With Firebug
• Firebug Tutorial: Getting Started
• HTML/CSS/Javascript in Firefox
• How to Test CSS Rules with Firebug
• How to use Firebug for CSS
• Live CSS Editing and Debugging with Firebug

I would also recommend FireScope, a new reference add-on from SitePoint that integrates with Firebug. This add-on is not currently installed on the classroom computers; feel free to install it on your workstation.

FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

These are sites that showcase CSS design. Take a look at some of the sites, the source code (XHTML) and the CSS. Remember that you can use the web developer toolbar in Firefox to view the CSS (click the CSS button and select View CSS)

CSS Zen Garden – http://www.csszengarden.com/
CSS Beauty – http://www.cssbeauty.com/
Stylegala – http://www.stylegala.com/
CSS Drive – http://www.cssdrive.com/
CSS Vault – http://cssvault.com/

One of the great things about Firefox is the ability to customize and extend the browser to suit your needs with extensions.

Extensions are small add-ons that add new functionality to Firefox. They can add anything from a toolbar button to a completely new feature. They allow the browser to be customized to fit the personal needs of each user if they need additional features, while keeping Firefox small to download. source: Mozilla Update Page

Extensions are easy to install. I have created a Flash demo for installing Firefox Extensions (Flash SWF 1,701kb). I would recommend viewing this tutorial in full screen mode by pressing F11.

There are numerous free Firefox extensions designed specifically for web developers. There are extensions validate HTML, XHTML, CSS, and accessibility, to troubleshoot CSS, to measure elements on a page, and to determine colors on a page. Here are a some of my favorites:

1. Web Developer Toolbar – The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. Click View > Toolbars to turn on and off the web developer toolbar.
2. Aardvark – Start Aardvark by right-clicking on the page and choosing “Start Aardvark” from the menu. The extension will run until you leave, refresh, or stop it by pressing “Q” for quit. As you move the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. This is a very helpful extension when you’re designing a page with CSS.
3. Firebug – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. To access this extension click View > Firebug or press F12.
4. HTML Validator – HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page by clicking View > Page Source.
5. X-Ray - Lets you see HTML/XHTML tags on a page without viewing the source code. Once installed, right-click the page and select X-Ray, all tags on the page will be displayed on the web page you are viewing.
6. MeasureIt – Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
7. DevBoi – a handy HTML/XHTML, CSS, JavaScript, and DOM reference. This is very useful when you’re learning HTML/XHTML and CSS. There is even an additional PHP reference. If you find yourself having to lookup CSS properties and XHTML elements and tags frequently you should get this extension. Click View > Sidebar > DevBoi to access the reference.
8. ColorZilla – With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Colorzilla will appear at the bottom of the browser window in the status bar area.
9. Extended Statusbar – A Statusbar with Speed, Percentage, Time and loaded size. The extended status bar will appear at the bottom of the browser window in the status bar area.
10. LinkChecker – Check webpage links at a glance with simple color coding. Click Tools > Check Page Links to run the extension.
11. FireFTP – FireFTP is a free, secure, cross-platform FTP client. Click Tools > FireFTP to access the extension.
12. Xinha Here – A cool extension for adding a WYSIWYG HTML editor interface to any textarea box on a web page form. Install the extension and restart Firefox. Right-click the textarea box you want to add HTML code to and select Xinha here! from the menu. A new window will open with a WYSIWYG HTML editor that allows you to format your message with HTML code.
13. IE Tab – Right click a link and select View this Page in IE Tab.
14. OperaView Adds View This Page in Opera to the page context menu and item Open Link Target in Opera to the link context menu. So if you would like to quick view page in Opera, just right click somewhere on the page and choose new menu item.
15. Clear Cache Button – Adds a clear cache toolbar button. After installing the extension, find the clear cache button in the toolbar customization panel by right clicking one of the existing toolbars and selecting customize.
16. MR Tech Local Install – The primary goal of this extension is to provide the tools needed to install and manage extensions and themes locally. This isn’t really a web developer tool, but it’s so handy. I found this especially useful for managing extensions. The nicest features for me is the ability to make older extensions compatible with newer versions of Firefox and the ability to install extensions that aren’t compatible with your current version of Firefox. You may need to install this extension if you have compatibility issues or errors installing any of the extensions mentioned above.

These extensions are already installed on the classroom computers. You may not want to install all of these extensions at home, but I would highly recommend that you install the top seven. The web developer toolbar and Aardvark are essential and the other five extensions are extremely useful.

firefox, extensions, browser, tutorial, install, web, developer, design

del.icio.us – the del.icio.us extension for Firefox offers everything you need to seamlessly integrate the del.icio.us service with your Firefox browser. This is very handy if you use del.icio.us to keep track of your favorite web sites.

SessionSaver – I love this extension! SessionSaver restores your browser -exactly- as you left it, every startup, every time, even if your browser crashes! I love this extension because I usually have numerous windows open at the end of the day that I want to continue to review; instead of having to bookmark all of the pages, they’re automatically saved by this extension. If you have upgraded to Firefox version 1.5 you can get the updated extension at the developer’s site.

Select Search – select any text on a web page, right click and from the menu you can search Google Maps, compare prices, shop, search jobs, read product reviews, look up definitions and acronyms, search health information, find movies and TV shows, look up music, and more. This is a very handy extension.

IE Tab – this is a great tool for web developers, since you can easily see how your webpage displayed in IE with just one click and then switch back to Firefox.

OperaView – open pages in Opera from Firefox context menus.

Viamatic foXpose – click on the icon in the status bar to display a single page which includes captures of all the open browser windows. Handy!

For more Firefox tools, Finding the Good Stuff lists some of my favorite web developer extensions.

Some older Firefox extensions will not work with version 1.5, but I have read numerous blog posts with fixes for this issue. Check Scattered for instructions on how to modify Firefox 1.5 to work with all extensions.

Emily Chang – eHub – an extensive list of web applications, services, resources, blogs or sites with a focus on next generation web (web 2.0), social software, blogging, Ajax, Ruby on Rails, location mapping, open source, folksonomy, design and digital media sharing.

For you Scott Kelby fans there is now PhotoshopTV! You can now view Photoshop tutorials on your computer or iPod at http://www.photoshopguys.com/.

I came across a couple of tips for speeding up Firefox:

Firefox Speed Tip
Speeding Up Firefox the Right Way

Do you want to share photos online, edit photos, create calendars, collaborate online, etc.? I want to is a page of handy web site utilities.

I wanted to bring to your attention a job search site called PageBites. PageBites.com allows you to search the Web for job openings and/or résumés. You can also post your résumé and/or job opening on our site. Ralph stopped by and posted some info on this job search site, but I’m afraid that you might miss it buried in the comments. I really liked this job search tool; RSS feeds are available for searches, the interface is clean and simple, and you can get job listings from numerous sources all in one place. You can also easily post your own resume.

MyPimp, the online calendar thing, is an online personal information manager. It offers the following organizational tools:

• Online calendar and todo list – never forget where you need to be or what you have to do
• Alerts – be reminded of important events via alerts sent directly to your cell phone or email
• Group calendars – join a group for your classes at school or create a group for a club, project team, or group of friends
• Address book – link up with friends and colleagues so you always have each other’s contact information
• Free – take advantage of our hundreds of hours of hard work!

Vertical scrolling tables from CSS Playground…Pretty slick, as are the rest of the CSS Playground demonstrations.

TJKDesign presents, One clean HTML markup, many layouts…, a demonstration of one XHTML file and numerous layouts using CSS.

Breaking the Web Wide Open! (complete story) by Marc Canter is an article that describes and discusses the current and future open technologies used on the web. I think this is worth a read.

RobotJohnny.com has some free “toyware” fonts for download. These are some fun fonts.

Del.icio.us – Del.icio.us is a social bookmarking system. What exactly does that mean? Instead of using Favorites in IE or Bookmarks in Firefox, your bookmarks are stored online and available to other Del.icio.us users and web surfers in general. Del.icio.us is organized with tags; rather than putting a bookmark in a folder, users use relevant words or tags to describe the web site content. For example, if you were to add a del.icio.us bookmark for this site you might use tags like: web, xhtml, css, tutorials, design, etc.

Del.icio.us bookmarks are available everywhere, since they aren’t stored on your own computer. In addition to being able to search and browse your own bookmarks by tags, you can also do the same with other members bookmarks. Del.icio.us bookmarks can also be integrated easily into your web site; in the menu to the right I am displaying my most recent Del.icio.us bookmarks.

After signing up for a Del.icio.us account, install the Firefox bookmarklet found on the Del.icio.us About page. You will then be able to easily add sites to your Del.icio.us account via the Firefox bookmark toolbar.

Technorati – is a blog search engine that also employs the use of tags to organize and find content. Technorati displays the hour’s top searches on its homepage.

Sage, RSS and other Goodies – Learn to embrace and love RSS! Use tools like GooRSS, PubSub, Bloglines, blo.gs, Feedster, or any other news aggregator or RSS tool.

Use Google’s new blog search to find current, relevant information on web development.

There are a lot of great search tools available for Firefox. These tools come in the form of extensions. You can learn about Firefox, its usage, and installing extensions in my tutorial Using Mozilla Firefox.

Here are some extensions that I find useful:

Web Developer Toolbar
ColorZilla
HTML Validator
Aardvark
EditCSS
Spellbound
Sage
Paste and Go
Tabbed Browser Preferences
Google Preview
Link Checker
IEView

Here are a few of the extension resources that I have mentioned in recent posts:

Essential List and Resources on Firefox Extensions from Lifehacker
Extending Firefox for Web Developers

While were installing Firefox extensions, let’s also get the Internet Explorer Developer Toolbar.

Top 7 Tricks For Getting an Interview includes some interesting suggestions for how to get an interview. Since most of you are currently looking for employment, you may want to take a look.

JavaScript Fading Tooltips – CSS and JavaScript to create hyperlink mouseover tooltips. Pretty slick!

Do you enjoy reading (outside of class)? Try What Should I Read Next?. Type in the author and title of the last book that you read and you will receive reader recommendations for your next book. Of course you can use this for technical books tool.

PHP/MySQL Tutorial – For students who nearing completion of their XHTML books and are interested in learning about PHP/MySQL.

David just mentioned to me yesterday that he was looking for shopping cart solutions. SitePoint has a new article Put your Money where your Mouse Is: 6 Payment Gateways Reviewed.

Copy URL+ extension enables you to copy to the clipboard the current document’s address along with additional information such as the document’s title, the current selection or both. Speaking of extensions, we will take a look at the extensions mirror today and install some useful Firefox extensions on our systems.

Special: Lifehacker’s guide to weblog comments – I think these are great guidelines for commenting in blogs and on message boards.

I have a personal request. I am trying to setup a Mac at home so I can do web testing, etc., I ordered a part to allow me to hookup my PC monitor to the Mac, but I can’t seem to get it to work. If anyone in class is a Mac/PC guru, I sure would appreciate some help.

Always remember to play!

Speaking of cheat sheets, Code by Matt, has cheat sheets for Photoshop, Illustrator, CSS, PHP, Dreamweaver, htacess, and more.

Great article at 43 folders on Writing sensible email messages. 43 folders is a personal productivity blog by Merlin Mann with a lot of excellent tips!

Typesetter – oh I love this new typeface comparison tool! You can select three typefaces, sizes, colors, etc., and they will display on the screen so that you can select the best font for your web pages. Be sure to bookmark this valuable resource!

Essential List and Resources on Firefox Extensions from Lifehacker. These extensions would fall into the category of personal productivity rather than web developer. I use many of these extensions and they’re great!

The Opera web browser is now free. That’s $$$ free and ad free!

Microsoft is now offering the Internet Explorer Developer Toolbar (beta) – Here is info on the toolbar from the Microsoft site:

Overview
The IE Developer Toolbar provides several features for deeply exploring and understanding Web pages.

1. Explore and modify the document object model (DOM) of a web page.
2. Locate and select specific elements on a web page through a variety of techniques.
3. Selectively disable Internet Explorer settings.
4. View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
5. Outline tables, table cells, images, or selected tags.
6. Validate HTML, CSS, WAI, and RSS web feed links.
7. Display image dimensions, file sizes, path information, and alternate (ALT) text.
8. Immediately resize the browser window to 800×600 or a custom size.
9. Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
10. Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
11. Display a fully featured design ruler to help accurately align objects on your pages.

We will install and check this new toolbar out in class this afternoon.

Please don’t forget to vote in the Macromedia vs. Adobe poll that’s running in the forum.