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

  • 166 views
Uploaded on

How to start learning HTML5 (easy and fast)

How to start learning HTML5 (easy and fast)

More in: Software
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
166
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. How to start learning HTML5 (easy and fast) By Bhathiya perera
  • 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. 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. 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. 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. 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. 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. 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. 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. 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.