30 Exceptionally Designed HTML 5 Websites


A constant evolution in the use of new technologies and programming languages is continually evolving across the web, when Paul Irish’s HTML5 Boilerplate project was first introduced it served as an exceptional starting point for creating websites of any type. The HTML5 Boilerplate provided an incredibly useful set of CSS, JavaScript, image, and HTML files which enabled users to kickstart their HTML5-powered web applications.

html5 boilerplate
 

Evolution of The Web

HTML5 introduces many cutting edge features which enable web developers and designers alike in creating web applications, mobile development and responsive websites that Rock! HTML5 is making the web platform more powerful within a number of different areas, ranging from semantics, connectivity, 3D graphics, and so much more, which will enable you in creating rich powerful web content.
 
The great thing about the HTML5 Boilerplate is that the source is openly available under a public domain license and one can use it and integrate it into their own projects in any way which suits their needs.
 
html5 awesome-er
 
While HTML5 is often compared to Flash and is seen by some as a Flash replacement, the two technologies are very different and only a very small part of HTML5 is thought of as the so called Flash replacement.

 

[zilla_toggle title=”INTRODUCTION TO HTML 5″ state=”closed”]

[/zilla_toggle]

 

HTML5 + INITIALIZR x Modernizr = AWESUMNESS

Initializr is an HTML5 templates generator which will help you get started with a new project based on HTML5 Boilerplate. It generates a clean customizable template with just what you need to start!
 
html5 initializr
 
Initializr can help you kick-start the development of your new projects. It generates templates based on HTML5 Boilerplate by allowing you to choose which parts you want or don’t want from it. A responsive template has also been added to start from a basic design instead of a blank page, which will enable you to create awesome responsive HTML5 websites without having to spend months coding from scratch.
 

Modernizr : Front-End Development Done Right

 
Taking advantage of cool new web technologies can be great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.
 
modernizr
 
Modernizr is a JavaScript library which detects HTML5 and CSS3 features in the user’s browser. Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the htmlelement for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.
 
HTML5 is the ubiquitous platform for the web. Whether you’re a mobile web developer, an enterprise with specific business needs, or a serious game dev looking to explore the web as a new platform, HTML5 has something for you! With Initializer and HTML5 you can go onto creating Rockable Websites as the ones featured below. All of these sites such as Dropr ( our personal favorite )were built using HTML5, and now YOURS can be as well!
 
html5 sites
 
[zilla_button url=”http://www.html5rocks.com/en/resources” style=”grey” size=”large” type=”square” target=”_blank”] HTML5 RESOURCES [/zilla_button]
 
 

1. Ramayana

f-i_com_google_ramayana
 
[zilla_button url=”http://www.f-i.com/google/ramayana/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

2. Evolution of the Web

evolutionoftheweb_com
 
[zilla_button url=”http://www.evolutionoftheweb.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

3. Penutmouse

peanutmouse_eu
 
[zilla_button url=”http://www.peanutmouse.eu/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

4. Kinetic V5

Kinetic-V5_com
 
[zilla_button url=”http://www.kinetic.com.sg/main.html” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

5. The Searchthings

thesearethings_com
 
[zilla_button url=”http://www.thesearethings.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

6. Luhesetea

Luhsetea
 
[zilla_button url=”http://www.luhsetea.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

7. Lastchart

lastchart_com
 
[zilla_button url=”http://www.lastchart.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

8. Lambooja

lambooja_com_br
 
[zilla_button url=”http://www.lambooja.com.br/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

9. Net Lash Project

netlashproject
 
[zilla_button url=”http://www.netlashproject.be/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

10. Jibe Visuals

jibevisuals_com
 
[zilla_button url=”http://www.jibevisuals.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

11. Media Monks

mediamonks_com
 
[zilla_button url=”http://www.mediamonks.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

12. Digital Hands

digitalhands_net
 
[zilla_button url=”http://www.digitalhands.net/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

13. Jumpman

nike_com_jumpman
 
[zilla_button url=”http://www.nike.com/jumpman23/aj2012/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

14. Superheight Studio

supereightstudio_com
 
[zilla_button url=”http://www.supereightstudio.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

15. Anna Safroncik

annasafroncik_it
 
[zilla_button url=”http://annasafroncik.it/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

16. Shoplocket

shoplocket_com
 
[zilla_button url=”https://www.shoplocket.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

17. Cloud Castel Group

cloudcastlegroup_com
 
[zilla_button url=”http://cloudcastlegroup.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

18. Reputation Radar

reputationradar_it
 
[zilla_button url=”http://www.reputationradar.it/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

19. Slavery Footprints

slaveryfootprints_org
 
[zilla_button url=”http://slaveryfootprint.org/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

20. Julien Renvoye

julienrenvoye_com
 
[zilla_button url=”http://www.julienrenvoye.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

21. Carol Vello

carolrivello_com
 
[zilla_button url=”http://www.carolrivello.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

22. Stop at Never

stopatnever_com
 
[zilla_button url=”http://www.stopatnever.com/#!/intro” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

23. Beer Camp 2012

beercamp-2012_com
 
[zilla_button url=”http://2012.beercamp.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

24. Its Time for Skype

itstimefor_skype_com
 
[zilla_button url=”http://itstimefor.skype.com/#home” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

25. Soul Wire

soul-wire_co_uk
 
[zilla_button url=”http://soulwire.co.uk/hello” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

26. Matteo Cian Farani

matteocianfarani_com
 
[zilla_button url=”http://www.matteocianfarani.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

27. Birrificio irpino

birrificioirpino_it
 
[zilla_button url=”http://www.birrificioirpino.it/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

28. Wired Mind

wiredmind
 
[zilla_button url=”http://www.wired.co.uk/mind/#/?date=2012-05-18&state=1″ style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

29. Angry Birds Space

angrybirds_com
 
[zilla_button url=”http://space.angrybirds.com/launch/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

30. Big Noise

bignoise_com
 
[zilla_button url=”http://www.bignoise.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

Get Our Feeds Delivered To Your Inbox

Like This Post

  1 Like

AUTHOR INFO

Tech Gaming Geek trapped inside Tron.

Feedback 1 Comment

  1. 30 Exceptionally Designed HTML 5 Websites : Dezign Matterz…


Leave a Reply