I'm Dong. I love webdesign and coding. When I was student, I was working as a web designer and a web developer. I now work as an RF engineer in VietNam and run http://webdesign14.com. Dong is a DZone MVB and is not an employee of DZone and has posted 12 posts at DZone. You can read more from them at their website. View Full User Profile

9 Unique HTML5 Website Tutorials

06.14.2011
| 13349 views |
  • submit to reddit

This post showcases nine different HTML5 tutorials that walk you through building a website (from scratch) or converting a website to HTML5.  They will also make it easier for you to understand HTML 5.

 1.Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

building html 5 website tutorials 1

 

View Live Demo

  2.Coding Up a Web Design Concept into HTML & CSS

In this walkthrough we’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

building html 5 website tutorials 2

 

View Live Demo

 

3.Design & Code a Cool iPhone App Website in HTML5

In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects. building html 5 website tutorials 3

View Live Demo

4.Designing a blog with html5

Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog. building html 5 website tutorials 4

View Live Demo

5.Building Web Pages With HTML 5

The problem with both sides of the argument is that very few sites are using HTML 5 in the wild, so the theoretical solutions to its perceived problems remain largely untested. building html 5 website tutorials 9

View Live Demo Part1 Part2 Part3

6.Coding a CSS3 & HTML5 One-Page Website Template

 Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

building html 5 website tutorials 5

View Live Demo

7.Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project.

building html 5 website tutorials 6

View Live Demo

 

8.Create a Grid Based Web Design in HTML5 & CSS3

 Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.

building html 5 website tutorials 7

View Live Demo

9.How to convert WordPress theme to HTML5?

HTML5 offers many improvements and cool features that can be useful while using WordPress.In this tutorial you will learn How to convert WordPress theme to HTML5. building html 5 website tutorials 8

View Live Demo

Published at DZone with permission of Dong Nguyen, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Incircle Media replied on Fri, 2011/06/17 - 3:51am

Hi Dong Nguyen,

 Thanks to share this kind of post. This is really very helpful for guidance. I have visited some of these provided website and these are really helping a lot. I must recomment to visit  http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/ once.

 

Thanks Dong to share.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.