Monday, June 21, 2010

15 awesome web services for web designers.

In this post i will share 15 amazing usefull web services for designers which can helps a lot in our daily work. Personally i use some of them regularly. Hope you will cosider it as i am because i found some of them really helpfull . Most of them are free for use. You dont feel the output of this services untill you use by youself. If  you have any other good services in your mind dont hesitate to share it by your valuable comment because i hardly believe that sharing is the great way to fulfill our knowledge.


1. Snipplr
 What: Social snippet repository
Cost: Free
Link: http://snipplr.com
Why: Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers. Did we mention it works with TextMate, too? It’s code 2.0.


2.Domainr

What: Pick a original domain name with other TLDs, in the del.icio.us fashion
Cost: Free
Link: http://domai.nr
Why: Desirable .com domain names are scarcer than profitable investment banks. But Domai.nr makes finding pithy URLs easy by querying 280 top-level domains and another 2,014 second-level ones for domain hacks, turning real English words into unique and memorable Web addresses like del.icio.us, internetfamo.us, gee.ky, and iamthewalr.us. Plus, it’s free. — Wired




3. Are My Sites Up?

What: Check whether your websites are up or not and get noticed when they go down.
Cost: Free for up to 5 sites; $25/$50/$75 per year for premium services.
Link: http://aremysitesup.com
Why: When your websites go down, shouldn’t you be the first to know?
Our free plan will check up to five of your sites at least 25 times per day. You get unlimited email and SMS notifications and we will do our best to tell you WHY your site was down by providing the HTML status error code.

Our premium plans offer significantly more features: Faster site checks, an iPhone application, RSS feeds, Twitter integration, Keyword search, premium-level support, and more!

All for just one dollar per site per year (or cheaper!).



4. Templatr

What: Create a simple design with little or no effort.
Cost: Free
Link: http://templatr.cc
Why: It should should be easy to create an individual Design with the templatr. With a little experimentation you will be able to reach the desired result much more quickly than with endless written explanations.


5. SurFTP

What: Web-based FTP client
Cost: Free
Link: http://surftp.com
Why: Once you are logged in, you will be able to navigate the FTP server, upload files, download files, zip files, unzip files, install software, copy, move and delete, copy or move to a second FTP server, rename and chmod.


6. Bespin
 What: Open, extensible web-based framework for code editing
Cost: Free
Link: https://bespin.mozilla.com
Why: Bespin is a Mozilla Labs experiment that proposes an open, extensible web-based framework for code editing that aims to increase developer productivity, enable compelling user experiences, and promote the use of open standards. [built using HTML5 technology]


7. Genfavicon
 What: Convert images into favicons for your website.
Cost: Free
Link: http://www.genfavicon.com
Why: Genfavicon is a site that features an application that allows you to create an icon out of the image of your choice. Simple select your image, by pasting in the URL address or uploading the image. Then choose which part of the image you wish to make the icon by dragging the mouse and cutting the desired shape. You must then select the size of your icon; 16X16, 32X32, 48X48, 64X64, or 128X128.
Preview what you have chosen and then finalize your icon.
You can then use your icon for your webpage or any other place you would like to put it.
Making your favicon could not be easier, in three quick steps you have made an icon that you can easily paste on your webpage.


8. CSS Sandbox
 What: Experiment with CSS styles in real time
Cost: Free
Link: http://aurelio.net/css-sandbox/
Why:
A toy.
A teacher.
A live demo.
A quick reference.
A web application.

A single HTML page.
The CSS Sandbox can be described by all these sentences.

It’s a simple and quick web toy that lets you explore CSS in real time. Just click and see the effect instantly, no Reload needed. It’s fast and funny!

Once you’re satisfied with the style of the Sandbox, roll your mouse over the handy CODE button. A panel will pop, showing all the necessary CSS code to apply that formatting to your own site.



9. Typetester
What: Compare screen type
Cost: Free
Link: http://www.typetester.org
Why: The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.


10. Wofoo

What: Form builder
Cost: Free for limited number of entries and one form only; from $9.95/month for more intensive usage
Link: http://wufoo.com
Why: Wufoo strives to be the easiest way to collect information over the Internet.
Our HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.


11. BrowserCam
 What: Cross Browser Compatibility Testing Tools
Cost: 24 hours free trial; prices vary from $20 to $1000/month
Link: http://www.browsercam.com
Why: See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.



12. Zoho Suite
 What: Productivity, collaboration and business apps
Cost: Free for personal use; pricing varies depending on the services needed
Link: http://www.zoho.com
Why: While Google Docs seems to be the first product people think of when online office suites come up, the lesser-known Zoho Suite offers more apps and features. See how Zoho stacks up against Google Docs. — LifeHacker


13. Time59
 What: Track time and expenses, handle invoicing and payments.
Cost: Risk-free 30 days trial, $49.95 per year
Link: http://time59.com
Why: Be more organized with less effort. Time59 keeps track of the work you do, gets your invoices out quickly, and manages client payments. Your Time59 account can be accessed from any internet connected computer… at home, at your office, or on the road. Getting started with Time59 is easy. There’s nothing to install, just sign up and you’re ready to go.



14. Mint

What: Web site analytics
Cost: A single site license is $30
Link: http://haveamint.com
Why: Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages and searches can all be taken in at a glance on Mint’s flexible dashboard.


15. CrazyEgg
 What: Supplement your analytics with visuals and actionable data
Cost: Plans start at $9/month
Link: https://crazyegg.com
Why: Analytics only give you a static interpretation of your site visitor’s activities. You may be able to tell how many people have visited your site, or viewed a particular page, but you won’t be able to gauge effectiveness of design elements, link placement or popular areas of your site. If you want to know where people are clicking on your site, and which areas could use improvement, you need Crazy Egg. Crazy Egg helps you visualize your visitors.

Tuesday, June 8, 2010

Top 90+ Fantastic Design Resources Site For Web Designers

While designing a site we need more resources and information to improve our design skill. While you searching for design resources over web you can easily lost and confused with the ever-changing stream of information and advice about design. I’m a big collector and bookmarker of design resources. Here I’ve tried to pull together the best design resources site I’ve found from over the web.Hope this can helps you in your everyday design works.


CSS Galleries
The Best Nature Sites on the Web: CSS Nature Website Gallery
A Frequently Updated Gallery of Sites: CSS Mania
An Organized List of Nice Sites: Most Inspired
CSS Gallery of Quality Sites: CSS Design Yorkshire
A Selection of Only Nature Based Sites: CSS Nature
A Selective List of Well Designed Sites: Web Creme
High Quality CSS Showcase: CSS Tux
Nice CSS Websites: The Designed Tree
A CSS Collection Organized by Category: CSS Elite
More about css


Website Templates
A Few High Quality Wordpress Themes: Evan Eckard
Over 2000 Free Web Templates: OSWD
A Large Selection of Nice Templates: Free Website  Templates
A Large List of Free Templates: Free CSS Templates
Nice Wordpress Templates for Download: Free CSS Templates
A Combination of Free and Pay Templates: Free Templates Online
Affordable, Quality Templates: Templamatic
Free Blog Templates: Blogging Themes

Coders
$50 per page awesome psd to xhtml DROPNCHOP.COM (We recommend them, and use them)
Quality Programming: XHTMLized
Professional Web Slicing: PSD Slicing
Affordable, Quality Coding: PSD2HTML
From Design to Code, Quick and Cheap: Front Enders

Inspiration
A Great Site About Everything Type: I Love Typography
An Incredible Illustrator: Burst of Beaden
A Great Designer and Illustrator: Fully Illustrated
Customizable List of Design Resources: Cork Dump
The Society of Graphic Designers of Canada: GDC
Freelance Advice Blog and Resources: Freelance Switch
Amazing Collection of Logos: Logopond
Stunning Desktop Wallpapers: Desktopography
A Graphic Design Magazine: Computer Arts

Design Blogs
A Frequently Updated Design Blog: Veerle’s Blog
A Design Magazine and Blog: Smashing Magazine
A European Design Blog: Design In Europe
A Unique Nerdy Blog: Design You Trust
The Personal Blog of a Graphic Designer: Larissa Meek
A German Design Blog: David Hellmann
The Blog of a Canadian Geek/Model: Mostly Lisa
A Graphic Design Blog: Bittbox
A Blog About Freelance Graphic Design Advice: Freelance Switch
A Design Blog Full of Resources: You The Designer
A Popular Design Blog: Fazai 38
More design blogs list

Colour Palettes
A Flash Site of User Generated Colour Palettes: Adobe Kuler
Using Colours From Photos: Colr
Colours, Palettes and Patterns: COLOURlovers
A Colour Palette Generated From Your Images: Color Palette Generator
See The Results of Your Palette on a Website: Color Spire
Create and Email Colour Palettes: Color Blender
More Color Tools


Free Font Downloads
Free Fonts and Other Resources: Web Page Publicity
Huge Collection of Free Fonts: Da Font
Nice Selection of Free Fonts: Urban Fonts
Fonts and Other Freebies: Simply The Best Fonts
1001 Free Fonts for Download: 1001 Free Fonts
Over 9000 Free Fonts: Creamundo
A Small List of Free Fonts: Best Free Fonts
More Free Fonts Lists


Paid Font Sites
A Large Selection of Fonts for Purchase: My Fonts
Quality Fonts for Purchase: Veer
Information and Fonts for Purchase: Fonts
Font Resources and Sales: Font Haus

Stock Photos and Vectors
The Best Stock Photo and Vector Website
Quality Photos for Purchase: Shutterstock
Stock Photos and Other Pay Downloads: Veer
Quality, Affordable Vectors for Purchase: Vector Stock
Stock Photos With a Great Selection: Jupiter Images
Stock Photos and Photography Network: Stock Vault
Quality Stock Photos: Corbis
Free Stock Wedding Photos Wedding Photographer Victoria Vancouver BC

Free Photos and Vectors
Submit Vectors or Download Others for Free: Free Vector Art
Tons of Great Free Vectors and Photos: Deviant Art
59 Pages of Free Vector Art: Free Vectors
Quality Vector Downloads: Vector 4 Free
Neat Collection of Free Photos From Around the World: Free Stock Photos
Great Collection of Free Vectors and Resources: You The Designer
Great Free Stock Photos: Free Foto
A List of Free Downloads: Bittbox
700 Free Stock Photos: Free Picture Click

Free Photoshop Downloads
A Couple Free Patterns for Download: Design Spice
Free Photoshop Brushes: Design Fruit
Free Photoshop Actions: Visual Blast
Tons of Free Photoshop Brushes: Brusheezy
A Few Nice Free Photoshop Brushes: Obsidian Dawn
Great Grunge Brushes and Others: Photoshop Brushes
Free Background Patterns for Photoshop: Free BG
Over 150 Free Background Patterns: Squidfingers

Tutorials
The Best Photoshop Tutorials: PSD Tuts
A Talented Photoshop Designer: Abduzeedo
Photoshop Tutorials and Web Design Resources: Web Design Library
Tutorials for Photoshop, Illustrator and More: Tutorial Vault
A Few Neat Illustrator and Photoshop Tutorials: Design Spice
Great Photoshop Tutorials and Downloads: PS Wish
Tutorials for Every Computer Program: Tutorialing

Wednesday, June 2, 2010

10 Awesome CSS3 Features which makes designers dreams come true.

In this post i will share about some CSS3 basic properties. Today is the day for which i am always waiting for. By using this properties we can make some awesome effect instantly with small amount of code such as Border Radius,Box Shadow,Text Shadow,Text Stroke,Linear Gradient, Radial Gradient,Rotate,Reflection,Resize,Outline etc. So here i tried to explaing them in a sort way. Hope it will helps you.


1. Border Radius
Earlier we used to use images to get border radius, which is bit a long procedure and lots of codes are needed to complete this. But now with CSS3 Border Radius Property we can do it in second. View alos css curve button

Code
#border-radius {
width: 200px;
height:100px;
background-color:#398ebe;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Demo
Browser Support : Firefox 3+, Chrome 4+, Safari 3.1+



2. Box Shadow
This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.
Code
#box-shadow {
width: 200px;
height: 150px;
background-color:#398ebe;
-webkit-box-shadow: #244766 5px 5px 10px;
-moz-box-shadow: #244766 10px 10px 10px;
box-shadow: #244766 10px 10px 10px;
}

Demo
Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+



3. Text Shadow
This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code
#text-shadow {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:50px;
color:#398ebe;
text-shadow: #555 3px 3px 3px;
-webkit-text-shadow: #555 3px 3px 3px;
-moz-text-shadow: #555 3px 3px 3px;
box-text: #555 3px 3px 3px;
}

Demo

Browser Support : Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+



4. Text Stroke
This is the new property of CSS3 which gives stroke/outline to Text. Here we will use syntax as text-fill-color for color of text, text-stroke-color which gives color to the stroke and text-stroke-width for width of stroke/outline.

Code
#text-stroke {
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
-webkit-text-fill-color: #398ebe;
-webkit-text-stroke-color: #000000;
-webkit-text-stroke-width: 2px;
}

Demo


Browser Support : Chrome 2+, Safari 4+



5. Linear Gradient
Linear Gradient gives a gradient to any HTML elements. View also css gradient button for more details.
Code
#linear-gradient {
width: 200px;
height: 150px;
/* For Firefox */
background-image: -moz-linear-gradient(top, #83cbf4, #d1ecfa);
/* For Safari/Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1ecfa),color-stop(1, #83cbf4));
}

Demo



Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+



6. Radial Gradient
This CSS3 Property gives a radial gradient to any selected element of XHTMl. Visit Webkit and Gecko for more detail on this property.
Code
#radial-gradient {
width: 200px;
height: 150px;
/* For Firefox */
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #d1ecfa 10%, #83cbf4 70%);
/* For Safari/Chrome */
background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#d1ecfa), to(#83cbf4));
}

Demo




Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+



7. Rotate
This CSS3 Property allows any html element to rotat
Code
#rotate {
width: 200px;
height: 150px;
background-color:#398ebe;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
}

Demo
Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+



8. Reflection
This CSS3 Property allows reflection of text or boxes.

Code
#reflection {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color: #398ebe;
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
}
Demo






Browser Support : Chrome 2+, Safari 4+



9. Resize
This CSS3 Property allows resizing of box on horizontal, vertical and both axis.
Code
#resizing {
width: 200px;
height: 100px;
border:1px solid #398ebe;
overflow: hidden;
resize: both;
}

Demo

Browser Support : Chrome, Safari



10. Outline
When we style any element with outline then we can have a outline specified with offset to that particular element. Suppose we want to have an outline which is 5px away from the element box then we use outline property.
Code
#outline {
width: 200px;
height: 150px;
background-color:#398ebe;
outline: solid 1px #398ebe;
outline-offset: 5px;
}

Demo
Browser Support : Firefox, Chrome, Safari


Tuesday, May 25, 2010

10 Essential Firefox Addons Every Web Designer Should Know

It’s no secret that web designers and developers love Firefox! Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser.
One of the greatest aspects of Firefox is the ability to install add-ons to do just about anything and everything a browser can possibily do. As a web developer this functionality is extremely useful to us.


Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work.

Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using. I compile a list of the 25+ Essential Firefox Add-ons (along with brief descriptions) that every web designer should know about. Be sure and let me know if i missed anything!


01. Web Developer










The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily. It’s a powerful all in one plugin. Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. The Web Developer tool saves you time when playing around with CSS.


02. 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. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.


03. Codetech









Codetech is another wonderful firefox extension which allows you to edit your documents right next to your web pages as you surf. This web page editing tool has the feel of Dreamweaver in a Firefox extension. For a web developer or designer, which offtenly deals with HTML source code, Codetch is a lite version of a application like Adobe Dreamweaver. It has a similar layout, yet less features, but it helps the user to complete its source based tasks.
Author description says it all. It’s the closest you can get to a professional web editing interface in a browser. Install it as an extension today and have a full featured editor right beside your web pages as you surf!


04. Colorzilla









An other one of my favorite Firefox extensions is ColorZilla indeed. ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. In addition to color picker, ColorZilla offers a DOM color analyzer which allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color. ColorZilla also features a online palette viewer that allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. With this beautiful extension you can Zoom the page you are viewing and measure distances between any two points on the page.s


05. 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.

FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.


06. MeasureIt









As someone who creates designs for the Internet, one of the most chellanging job is to create design elements aligned. In that case MeasureIt comes in handy and allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.



07. CSS Validator/HTML Validator









CSS Validator is a Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file. When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.


08. GridFox









One of the most frustrating issues that a web designer undoubtedly encounter when coding grid-based layouts. How can a designer be sure that the grid is maintained from the original mockup to the final coded version? When I coded my first grid-based layout, I found myself regularly taking screenshots of the site and comparing them with my original grid in Photoshop. There had to be an easier way.

GridFox is a great extension that will overlay a grid on a selected website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.



09. CSSViewer









With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.



10. Browser Window Resizer









The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.

If i miss any other addons which you think essential for designer please feel free to share it by your valuable comment.


Tuesday, May 18, 2010

10 excellent and inspirational examples of Horizontal Navigation Menus

I think Navigation Menu is second important part of any site because they Mostly appear right next to the logo. Anybody can attract users by designing unique and nice looking menus. In my previous post of Navigation menus i provide Top 70 CSS Navigation Menu link. From those link you can learn how to create menus for your site. Today i share couple of inspirational Horizontal Navigation Menu design example site where you can see nice and exceptional design of Horizontal Navigation Menus.
Hope you will be inspired by those menu design and create unique and excellent menus for your site.


Benjamin Christie










Single Hop









Tutorial9










kriesi









Loodo









Skialpine









Designerscouch













Twitterevolutions








Boukarabila








Boomawebdesign


Sunday, May 16, 2010

10 Best Color Tools For Web Designers

Right Color for the Right combination is very important while you designing a web page because color play major role to make your web project successful. So sometimes its difficult task for web designer to select decent and beautiful color combination for every design. In that situation color tools can helps you determine matching color or even suggest sets of matching color palette when you are totally clueless.

There are numerous free online tools to help in your decision, so many that it can take time just choosing which tool to choose. Rather than creating a long list of what is available I have chosen 15 best tools which i like most because they are easy to use.



colorexplorer.com













colorotate.org













kuler.adobe.com













colourlovers.com












colorjack.com












pourpre.com












colorschemedesigner.com












colorcombos.com













colorhunter.com













colourgrab.com



Saturday, May 8, 2010

Why You Should Validate Your Website.

It is very inportant to validate your website because it helps in many ways. From making it load right / the same in all browsers to helping you in the SEO area.
What exactly is validation? It's the process of checking the syntax of your HTML code to find places where you've violated the rules of the language. The official rules for writing HTML are defined by the World Wide Web Consortium (W3C).
Those rules include strict definitions stating which HTML and tags are legitimate parts of the language, and how you should structure your HTML and CSS documents.

Here i provide some essential tools for validatign your website :

1. W3C Markup Validation : This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.


2.W3C CSS Validation : This service will validate your CSS. If you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.


3.Feed Validation : This tool will validate all versions of RSS feeds as well as Atom feeds. This will ensure that readers will not have problems while receiving your feed.


4.[Firefox] Web Developer Toolbar : The Web Developer toolbar extension for Firefox has tools to check HTML and CSS validation. You can use this addons on a daily basis.


5.[Browser Independent] W3C Validator Favelets : A quick and easy way to give just about any major browser a way to validate HTML and CSS is by using favelets. Favelets are bookmarked snippets of JavaScript to add extra functionality.

6.Development Editor : Most development editors offer validation tool. Adobe Dreamweaver is my editor of choice and it provides validation tools.


So validating your pages is a wise precaution, particularly if you write the HTML and CSS code by hand. Clean, well-written HTML,CSS is important if you want to ensure a good search engine ranking. It also helps guarantee that your page will be displayed properly on older, or more obscure browsers that are less forgiving.