Join the DZone community and get the full member experience.
Join For FreeThis 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.
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.
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.
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.
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.
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.
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.
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.
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.
Opinions expressed by DZone contributors are their own.
Comments