During this class, we will be using the Web browser Firefox as our main development platform. This approach yields some significant advantages for us:

• Works equally well on both Apple and Windows computers.
• Decent support of HTML standards.
• Free SW can be installed on any computer.
• Add-ons provide HTML editing (via Codetch) and FTP file transfers (via FireFTP), and many other free tools for Web developers.
• Simpler tools and setup than when using GoLive.

I am requiring the use of certain Firefox add-ons, and suggesting others that you will find useful. You can download Firefox itself from here if you don’t already have it.

Required Add-ons for Web Developers in Firefox

• FireFTP : Tools > FireFTP : graphical FTP client for transferring files over the Web.
• Codetch: Tools > Codetch > Float/Tab : a Dreamweaver-ish HTML editor -- really well done (and free).
• FireBug : integrated debugger, inspector for HTML, CSS, DOM, JS
• Web Developer Toolbar : via toolbar or Tools > Web Developer : superb tool for inspecting pages. Includes Cntl-Shift-F for interactive inspection.
• FEBE: backup utility for extensions, settings, profiles.
• View Source Chart : Tools > View Source Chart : shows the color-coded structure of the current document in another window.

Suggested Add-ons

• Colorzilla (click on Eyedropper, bottom-left of FireFox) : samples colors on the fly from anything in the browser window
• MeasureIt (click on Ruler, bottom-left of FireFox) : measure distances between any points in the browser screen.
• IE Tab (right-click on tab or click icon at bottom-right of FireFox) : switches to use Internet Explorer's rendering engine inside a tab in FireFox. Windows only.
• HTML Validator: validator for HTML and CSS
• Font Finder : shows all characteristics of the selected text
• DOM Inspector: shows an expandable outline-oriented view of the elements on a page. (This is not an extension; it must be installed with Firefox – it is an optional part of the installation.)
• Professor X (Tools > Professor-X) : shows meta info about the page, including embedded style info.
• Font Finder (Tools > Font Finder, or off the Right-Click Context Menu) : shows all font-related info about the selected text on the current page.
• MetaTags Sidebar : left sidebar with lots of meta info.
• SearchStatus : display Google and Alexa ranks and other SEO info
• About This Site: various kinds of meta, SEO info about a site
• CSSViewer : Tools > CSSViewer : hovers info about the tag you're over
• Screen Grab! : screen grabber that can save entire window, not just viewport
• NikkelWHOIS : WHOIS button, upper-right in FireFox : lightweight WHOIS to see who owns a domain name
• View Cookies: see what cookies are being set by a site
• View Dependencies: a lot of info about page components

Other Handy Addons

• Palette Grabber: grabs site colors as a Photoshop palette
• StumbleUpon: social networking for rating sites (requires a signup)