9 Unique HTML5 Website Tutorials

DZone 's Guide to

9 Unique HTML5 Website Tutorials

· Web Dev Zone ·
Free Resource

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.

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


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}