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>
</h...
Things you should know.
HTML5Shiv/HTML5Shim
Respond.js
Modernizer
You should understand what these do, or you will be i...
HTML5Shiv and HTML5Shim
HTML5Shiv == HTML5Shim, It’s the same thing.
The HTML5 Shiv enables use of HTML5 sectioning elem...
Respond.js
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to
enable res...
Modernizer
It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
It is a way to stop us...
Can I start coding now ?
Not yet, It’s better to get a complete template first.
Head on to http://html5boilerplate.com/ ...
Tutorials ?
http://www.html5rocks.com/en/ - A cool project by Google.
http://www.webplatform.org/
http://www.w3.org/com...
Front-end Frameworks (Responsive
CSS3)
http://getbootstrap.com/ - Twitter Bootstrap, http://bootswatch.com/ - Themes
htt...
JavaScript MV* frameworks (For Web
Applications)
http://www.angularjs.org/ - AngularJS (by Google)
http://canjs.com/ - C...
Upcoming SlideShare
Loading in …5
×

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

599 views

Published on

How to start learning HTML5 (easy and fast)

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
599
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. How to start learning HTML5 (easy and fast) By Bhathiya perera
  2. 2. 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
  3. 3. 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).
  4. 4. 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/
  5. 5. 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
  6. 6. 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
  7. 7. 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).
  8. 8. 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)
  9. 9. 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
  10. 10. 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.

×