HTML5 : How to start learning HTML5 (easy and fast)

How to start learning HTML5
(easy and fast)
By Bhathiya perera

Can I see some code please ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
This is here to say that its HTML5

Things you should know.
HTML5Shiv/HTML5Shim
Respond.js
Modernizer
You should understand what these do, or you will be in trouble. Once you understand what these
are used for you can start using a prebuilt template (like html5-boilerplate).

HTML5Shiv and HTML5Shim
HTML5Shiv == HTML5Shim, It’s the same thing.
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and
provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
URL : https://code.google.com/p/html5shiv/

Respond.js
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to
enable responsive web designs (http://alistapart.com/article/responsive-web-design) in browsers
that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under.
URL : https://github.com/scottjehl/Respond

Modernizer
It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
It is a way to stop using browser specific code.
URL : http://modernizr.com/
Modernizer ships with HTML5Shiv. So you don’t need to include both. But you still need Respond.js

Can I start coding now ?
Not yet, It’s better to get a complete template first.
Head on to http://html5boilerplate.com/ or to http://www.initializr.com/ these websites give
you a prebuild or custom-build templates for your new HTML5 project.
 What’s Included here
HTML5Shiv/HTML5Shim or Modernizer
Respond.js
Bootstrap (maybe!)
And some other cool stuff (Apple touch icons).

Tutorials ?
http://www.html5rocks.com/en/ - A cool project by Google.
http://www.webplatform.org/
http://www.w3.org/community/webed/
https://developer.mozilla.org/en-US/docs/Web
http://webdesign.tutsplus.com/
http://tutorialzine.com/
http://msdn.microsoft.com – search for ‘html5’
http://www.awwwards.com/ (Not a tutorial site but really cool)

Front-end Frameworks (Responsive
CSS3)
http://getbootstrap.com/ - Twitter Bootstrap, http://bootswatch.com/ - Themes
http://foundation.zurb.com/ - Foundation
http://firezenk.github.io/zimit/ - Zimit Framework
http://purecss.io/ - Pure (This one is really small !)
http://ink.sapo.pt/ - INK

JavaScript MV* frameworks (For Web
Applications)
http://www.angularjs.org/ - AngularJS (by Google)
http://canjs.com/ - CanJS
http://backbonejs.org/ - Backbone.js
http://emberjs.com/ - Ember.js
http://todomvc.com/ - This website will help you select a suitable framework.
This is not HTML5 or CSS3 but will come in handy when you want to build a HTML5 web
application.

HTML5 : How to start learning HTML5 (easy and fast)

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to HTML5 : How to start learning HTML5 (easy and fast)

Similar to HTML5 : How to start learning HTML5 (easy and fast) (20)

Recently uploaded

Recently uploaded (20)

HTML5 : How to start learning HTML5 (easy and fast)