How to Build a Vibrant Professional HTML5 Web Design

How to Build a Vibrant Professional HTML5 Web Design

This 2-part tutorial on Design Instruct, our other site, will walk you through the creation of a Photoshop mock-up as well as provide you with a detailed guide on how to convert the design into an HTML5 template.

Final Result

Click the preview image below to go to Part 1 of the tutorial series on Design Instruct (or go to Part 2 instead).

Final Result

Other Things to Do

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

This was published on Dec 10, 2010


Michael Tuck Dec 10 2010

All the more reason for me to learn to more effectively PS, so I can do this kind of thing. :)

Michael Tuck Dec 10 2010

“Learn to more effectively PS”? Sounds like I’m writing with Babelfish. Sorry about that.

Allan Crabtree Dec 11 2010

Fantastic tutorial, love these! :)

krike Dec 12 2010

Nice tutorial, however a bit to colorfull, the footer should only have one simple color. But that’s my opinion of course :)

Curtis Scott Dec 13 2010

Great tutorial, Man that site has grown, you guys have shown some great tutorials in the past, but I think this one is one of the best!

Hijac Dec 27 2010

I love the final effect above. But when I doing this, I just can’t make site like you. Only 80% similarity, maybe I should learn more photoshop tutorial in the future

Victor Castillejos Jan 17 2011

Nice tutorial, nice background effect, thanks

fresh idea on web development. love it!

simacom Apr 18 2011

great tutorial thank you very much

WebInOne Aug 05 2011

Great! I like your tutorial and I read it again and again.

irfan Sep 06 2011

great tutorial.
six revisions why you are not making more web interfaces tutorials and then xhtml to css.

This comment section is closed. Please contact us if you have important new information about this post.