Getting started with HTML5 & CSS3

There are some very nice websites out there that you can find that are built in HTML5 and CSS3 that you can check out the source code of, or read some books about it.

The one thing you'll notice is the compatibility of HTML5 and CSS3 across all areas of the browser. You can probably all guess which of the browsers don't support HTML5 and CSS3 to their full potential, if at all, but you can actually look to newer versions of Firefox to support some things, Safari and Google Chrome to support most of the features.

HTML5

One site that I found really useful in relation to HTML5 is a very good one in identifying HTML5 elements used by other sites. You can type in the website you want to check, and the diagram below shows the elements being used. The idea for the website is very clever. It's like the style of the periodic table we all know, but instead of using it for science, we can use this in web design! Here is the link tot this fantastic website - Periodic Table of the Elements.

CSS3

Again, with CSS3 you need to watch out for browsers that don't support the style you want. You can always create alternate styles so anyone not using a CSS3 compliant browser isn't going to find yourself messing up your website that is intended for Firefox/Safari/Chrome and not IE6 (which is more often the case that not). There are websites you can use which create CSS3 if you don't know what specifically you should use. A link to one can be found here - - Css3 Cross browser rule generator. I wouldn't recommend overusing styling that targets browsers like "-moz-" or "-webkit-". There is so much you can do with CSS3 now, instead of having to use loads of images on your website. CSS3 supports gradients, shadows, radius borders, background opacity and the list just goes on!

A little extra

For all of you reading, who are lucky enough to be using Adobe Dreamweaver CS5, there is a nice little HTML5 and CSS3 package you can install which allows the code hinted at. This means that all the notes and styles you don't know too well will now have code hints! Also, those of you using CS4 or even CS3 are going to be happy knowing that Adobe has released this package for both versions.

I hope I pointed you in the right direction on where to look for HTML5 and CSS3 tips and starting point. Any comments or questions, please post below!