Best Tutorials To Step Into HTML5 And CSS3

Here are links which I read to make my WordPress theme which based on HTML5/CSS3. The images are my old theme and new HTML5 based flexible theme.

• Coding A HTML 5 Layout From Scratch – Smashing Magazine

Let me quote some important part.

Facts

Need to know these facts before dive into it.

There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it does not understand it as of yet. This may also apply to other software such as screenreaders and search engines.

Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done.

Progressive Enhancement and Graceful Degradation

These concepts made the HTML5 more attractive.

Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling.

Framework

To use framework is one option when you start to build a web site. I recommend to use a framework especially for beginners because it’s a faster way to launch and you can learn a lot from the framework. I choose Less Framework to build a flexible layout.

• Less Framework

Grid System

This is not related to HTML5/CSS3 but if you wanna make a beautiful web site, 960 grid system may help you.

• 960 Grid System

I made the image for Pixcel Perfect to figure out width etc.

More Resources

My friend Oli told me these links to learn HTML5. Thanks Oli!

Oli’s intro articles

• div, section, article
• header, hgroup, h1-h6
• nav, aside, figure, footer
• HTML 4 and XHTML 1 to HTML5
• Block-level links
• HTML5Doctor he is one of the authors

HTML5 and Firefox

• Mark Pilgrim’s O’Reilly HTML5 book
• Mike Smith’s cut down HTML5 spec
• Check browser support for HTML and CSS
• Mozilla Developer Network wiki: HTML
• Mozilla Developer Network wiki: CSS