Best Tutorials To Step Into HTML5 And CSS3

Old

New

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.

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.

Grid System

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

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

992

More Resources

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

Oli’s intro articles

HTML5 and Firefox

What I’ve Learned From My First HTML5 Based WordPress Theme Development

I made a new theme for my blog and I choose HTML5. Visit here if you are subscribing via email or RSS. Nothing special, it still looks quite simple.

To develop something is always the best way to learn new technologies and that’s the reason why I developed the theme. Here are what I’ve learned from the process.

  1. Framework is important to develop HTML5 base web sites.Productive programmers prefer to use well designed frameworks or modules to develop apps. Same thing is happening. In HTML5 era, writing HTML/CSS is not only for web designers. Programmers will come to write HTML/CSS. It’s going to change the development process. I chooseLess Framework 4 for my blog theme. It helps me to write flexible layout to support various resolutions without writing tons of lines of code.
  2. ‘Progressive enhancement’ helps us to live in the future. In a few years ago, I was always working hard to make pixel perfect web design for all available browsers but it doesn’t make sense anymore. No one want to get it except the author. The most important thing is to make compatible design for all available browsers and devices. Please resize the current window to see what will happen.
  3. HTML5 is fun to use. I know it’s not perfect yet but unlike older version of HTML, I feel philosophy. We always need to focus on content itself while writing code to make sure what kind of content will be displayed there. This is how we can write beautiful code.

My first version is not enough. I need to try more to find out better way to use elements or techniques but I’ve learned a lot from this first version.