Adobe Design Premium CS5 software offers you complete creative freedom without sacrificing precision or quality, whether working in print, web, interactive, or mobile media.

In this tutorial, you can learn to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

1. HTML 5

2. Basic Structure

3. Marking Up the Navigation

4. Marking Up the Introduction

5. Marking Up the Main Content Area

6. Styling with CSS 3

7. Styling the Navigation

8. Styling the Introduction

9. Styling the Content Area and Sidebar

10. Styling the Blog Post

11. Zebra-striping the Comments

12. The Final Design

HTML5 CSS3 Standard page

Compatibility

The page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only rendering engine that supports all of the CSS 3 techniques we have used. Firefox 3 has some problems applying rounded corners to our flower image and it doesn’t support background-size, but besides that the layout works. I’ve chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work. You could also define some more rules and get everything working across major browsers, but all of this is outside the scope of the tutorial.

Conclusion

When HTML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to build websites. We’ll finally be able to stop using floats for layout (which they were never meant to be used for), and we will spend considerably less time writing javascript to scale our background images or zebra-stripe our tables. Hopefully we will use all this extra time to study some long-neglected areas of web design, like front end optimization and proper information architecture.