Dieter Petereit July 9th, 2013

HTML5up: 14 Totally Free and Modern Templates Made With HTML5

If you happen to be looking for ready-made website-templates you need not search for long. Google brings up a bunch of sites, here at Noupe we don't abandon you on that search either. When it comes to Google findings, chances are, you will, in most cases, not really be satisfied by the available quality of code or layout. In these case, read: in any case, you should visit the new service HTML5up. What you will find here are really elegant and modern templates for contemporary websites based entirely on HTML5 and CSS3, with a bit of JavaScript, obviously. These templates are not only entirely beautiful, they are also completely free. html5up1-w550-h600 All Templates Overview

HTML5up: Templates for a Variety of Usecases

Looking for free templates is a tedious task. Most of the average free ones are based on a classical standard layout. Templates created by the same developer often only differ in details - colors, fonts, nothing game-changing. This is about all you could expect. These templates by HTML5up instead differ widely from each other. They take care of the fact that a blog on photography needs a different design than a magazine-style news-site. At the time of writing, fourteen different templates - some for text-heavy, some for image-laden sites - are available. The portfolio of templates is growing slowly, but constantly. So, bookmark the page and check back once a month. Every template has been created using the latest standards of CSS3 and HTML5. You'll find professional visual effects as well as state of the art gallery functionality. All the templates are responsive, thus working fine on smartphones and tablets. html5up2-w550-h600 Template Demo All templates are free to be used obeying Creative Commons Attributions. You can use and modify them for private and commercial projects alike, as long as you keep a link back to HTML5up in place.

HTML5up: Demo and Download

Each template has its own demo page. This demo also allows to estimate how the template will look on smartphones and tablets. Thoroughly test everything from there and see if the given template suits your needs. If you decide to use a template, download the corresponding .zip. Images from the demo pages are included in the download and are also part of the deal. The demos might not seem to work for you. This is just an issue of the implementation of the demo as iframes. Webkit browsers will show everything as should be, while other browsers will seem problematic. In this case, simply use a Webkit or download the packages and open the index.html. All templates generally work in all modern browsers, their iframe demos don't. External libraries, such as jQuery and html5shiv, are part of the package. Templates are all based on the brand-new frontend framework skel.js. All you need to do is start. I already did...

Related Links

  • Spiffy HTML5 site templates | HTML5up
  • The underlying frontend framework |Skel.js

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.


  1. Thanks, it’s great that there are html5 templates, ready for use, as according to all modern researchers, mobile internet traffic and sales grow even faster than traditional. That’s why when you make a site you for sure need responsive design, and here you have possibilities according to your budget – either use free html5 template (good for hobby site) or start looking for html5 development

  2. HTML5 certainly scores above Flash. Although we have to work on both, i personally feel HTML5 is more useful in many cases.

  3. not working in ff22
    chrome OK
    desktop version look to much like mobile
    aren’t lettering and information architecture tought anymore in schools?
    still nice initiative

  4. Pingback: Com’ une fin de semaine #53 - J'ai un pote dans la com' - Conseil en communication et création graphique

Leave a Reply

Your email address will not be published. Required fields are marked *