Essential Firefox Add-ons for Web Developers

Firefox has some cool add-ons which make the job of website designers much easier. These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

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.
http://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer
The Web Developer extension adds a menu and a toolbar with various web developer tools.
http://addons.mozilla.org/en-US/firefox/addon/60

ColorZilla
Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
https://addons.mozilla.org/en-US/firefox/addon/271

FireShot
FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.
http://addons.mozilla.org/en-US/firefox/addon/5648

Codetech
Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
https://addons.mozilla.org/en-US/firefox/addon/1002

CSS Validator
Validates a page using the W3C CSS Validator.
http://addons.mozilla.org/en-US/firefox/addon/2289

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.
https://addons.mozilla.org/en-US/firefox/addon/249

W3C Offline Page validator
Validates the source of a HTML/XHTML page via the W3C Markup Validation Service using the direct-input form.
https://addons.mozilla.org/en-US/firefox/addon/6006

Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.
https://addons.mozilla.org/en-US/firefox/addon/748

GridFox
Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.
https://addons.mozilla.org/en-US/firefox/addon/4904

HttpFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
https://addons.mozilla.org/en-US/firefox/addon/6647

CSSViewer
A simple CSS property viewer.
http://addons.mozilla.org/en-US/firefox/addon/2104

IE NetRenderer

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and 8 so you can get an idea of whether or not it looks right in IE.
http://addons.mozilla.org/en-US/firefox/addon/6455

Foxy SEO Tool
Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.
https://addons.mozilla.org/en-US/firefox/addon/9440

Basic Tips for SEO

  1. Use Correct Doctype
  2. Use Semantic code while htmlizing your website.
  3. Use Meta Content and Meta Keywords
  4. Use unique page titles
  5. Use SEO friendly page name or URL
  6. Use Alt tags for Images
  7. Use Heading Tags (e.g. H1, H2)
  8. Use Valid HTML and CSS Code (Make your code W3C Standard)
  9. Use Div based coding and avoid using Tables
  10. Make a Detailed Sitemap
  11. Use Breadcrumb
  12. Use Footer links
  13. Use Optimized images and code to make your web site load fast
  14. Use External JavaScript and CSS files
  15. Use a meaningful and helpful 404 error page

Best CSS Directories or Galleries

www.cssbeauty.com
www.cssdrive.com
www.stylegala.com
www.cssmania.com
www.cssremix.com
www.cssvault.com
www.bestwebgallery.com
www.csselite.com
www.screenalicious.com
www.unmatchedstyle.com
www.designlinkdatabase.net
www.screenfluent.com
www.designsnack.com
www.cssheaven.com
www.cssimport.com
www.cssglobe.com
www.cssreboot.com
www.mostinspired.com
www.thebestdesigns.com
www.cssbloom.com
www.csscollection.com
www.csstux.com
www.cssbased.com
www.css-website.com
www.designshack.co.uk
www.ceeses.com
www.cssclip.com
www.my3w.org
www.csshazard.com
www.artnetz.de
www.css-design-yorkshire.com
www.css11.com
www.cssimpress.com
www.e-motionaldesign.com
www.cssprincess.com
www.cssgaleri.com
www.cssblast.ru
www.creative-pakistan.com
www.netzfruehling.de
www.najdizajn.com
www.edustyle.net
www.csssmoothoperator.com
www.coolsitecollection.com
www.cssgalaxy.com
www.per.fectio.net
www.cssflavor.com
www.onepixelarmy.com
www.piepmatzel.de
www.cssbrain.hu
www.w3c-compliance.com
www.stylegrind.com
www.submitcss.com
www.cssgallery.ro
www.cssgreen.com
www.csszengarden.com
www.webcreme.com
www.prowebart.net
www.designexpanse.com
www.csssnap.com
www.menthe-fresh.fr
www.csscoosite.com
www.csscool.cn
www.csstown.com
www.cssleak.com
www.divinecss.com
www.cssloggia.com
www.cssstyle.me
www.cssperk.com
www.cssgallery.com
www.cssshowcases.com
www.cssglance.com
www.cssmix.nl
www.css-design.fr
www.designawardsgallery.com
www.addesignlink.com
www.cssfreshblend.com
www.cssenvy.com
www.nicestylesheet.com
www.wowcss.com
www.css-imagine.com
www.cssfights.com
www.cssluxury.com
www.cssdepot.com
www.csswebsites.nl
www.cssarts.com
www.csscutie.com
www.cssdance.com
www.csskid.com
www.cssbay.com
www.wooki.es
www.beautiful2.com
www.swellcss.com
www.noonewebdesign.com
www.cssvote.com
www.pixelcss.es

You can also submit your site to 150+ CSS Directories to showcase. Here are the two sites who does this job for you.
1. Easy CSS Gallery Listhttp://www.thecssgallerylist.com
2. CSS Galleries Submission Helperhttp://www.meecss.com

HTML 5: the next version of the HTML

World Wide Web Consortium released the first working draft for HTML 5 this year in January. It is a fifth major revision of the HTML we all use every day. When HTML 5 is expressed in XML, it is called XHTML 5. The current version of HTML is 4 which developed in 1999.

Apple, Opera, and the Mozilla Foundation – major browser vendors – came together as a group called Web Hypertext Application Technology Working Group (WhatWG) to build up an updated and upgraded version of HTML. W3C took note of these developments and started its own next-generation HTML effort with many of the same members.

This new version HTML 5 also goes under the name Web Applications 1.0 and it would be immediately familiar to existing HTML programmers. There are no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table. At the same time, we would come across some new and confusing elements. Our div remain, but now HTML includes section, header, footer, and nav as well. em, code, and strong are still present, but so are meter, time, and m. img and embed continue to be used, but now there are video and audio too. However, closer inspection by the html programmer would reveal that these elements aren’t that different. This can also be an effort to make HTML more developer friendly; the datagrid controls seem similar to those of ASP.NET in name and possibly functionality too.

It was explicitly designed to degrade gracefully in browsers that don’t support it. It provides real benefits to programmers today while promising even more for future page visitors.

But remember that HTML 5 is still a draft and this draft may not be finalized for years, work on HTML 5 continues. Perhaps it will be in our browsers in December 2010.

» View draft recommendation