1. HTML5 ★ Boilerplate
HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.
After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.
2. Mr. hurley by pvmgarage.com
HTML 5 and CSS3. You may see a live preview of the template and download the archive with all source files.
3. A free HTML5 and CSS3 theme
View Demo | Download Files (.zip)
You can freely use this template for both your private and commercial projects. You’re allowed to remove the credit link in the footer, but please, please leave it there. It allows me continuing creating free templates.
4. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.
5. Coding A HTML 5 Layout From Scratch
View Demo
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. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.
6. Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
View Demo | Download Files (.zip)
You may be wondering where the Photoshop or Fireworks file is. Well, there isn’t one. This is a result of designing in the browser and shows what can be achieved when skipping the Photoshop design phase, saving a lot of time in the process.
7. Cool iPhone App Website in HTML5
8. HTML5 and CSS3 Layout
View Demo | Download Files (.zip)
Since HTML5 and CSS3 aren’t going to be supported in all the browsers, especially not older ones like IE6, we can try and make it work in everything, but it won’t look the same in all of the browsers. For instance, rounded corners wont work in IE or Opera, but it wont affect the usability of that web page. Likewise, the flexible box model only works in Firefox and Webkit.
What we can do is we can set up a failsafe so that the web page will work in every browser correctly, but not in the same way. For instance, I made it so that in Webkit browsers, the page uses the flexible box model. However everywhere else it just switches to the old fashioned way and floats the elements to either side to create columns.
9. HTML5 Starter Pack – a sick freebie
View Demo | Download Files (.zip)
The Starter Pack, as I call it, is a bit different than a template. I built it with one guiding principle: scalability. As a result, you can use this to get started on your portfolio page or the next Facebook.
Of course, the coding part is all HTML5, cross-browser, of course, but I’ve also gone and included a basic Photoshop template to get you started on designing the page. Just to lure you in to it, here’s a list of a few major features of the pack
10. Newsy Multiple Column HTML5 and CSS3 Template
View Demo | Download Files (.zip)
Newsy is a beautiful newspaper / magazine style template with the advanced multiple-column feature that CSS3 now offers. Content flows easily from one column to the next – automatically – without any effort on the part of the author. With it’s paper-textured background, and use of small bits of bright color, this template stands out as both elegant and bold at the same time.
IE won’t recognize the multiple columns, so the articles will look like normal one-column posts, but at least it doesn’t seem broken to IE users.
One Response
i dint like the templates