Getting started with HTML5, CSS3 and JavaScript

[Source]

This blog post describes the resources I am using to get started with HTML5, CSS3 and JavaScript and to learn for the Microsoft Certification. I will be updating this post as I advance in my preparation.

Read

• Dive Into HTML5
• Eloquent JavaScript
• W3C – World Wide Web Consortium
  • Standards
  • HTML5 specification
• WHATWG community
  • Web Hypertext Application Technology (WHAT) Specifications
  • HTML Standard
• JavaScript reference

Watch

• Developing in HTML5 with JavaScript and CSS3 Jump Start
• Learning Path: Programming in HTML5 with JavaScript and CSS3 (Microsoft Exam 70-480)

Practice

• Training Guide: Programming in HTML5 with JavaScript and CSS3
• HTML5 Step by Step Practice Files
• Microsoft Official Practice Test powered by MeasureUp
• Ask and answer questions on StackOverflow
• Try your HTML5, CSS3 and JavaScript in jsFiddle

Certifications

• Exam 70-480 – Programming in HTML5 with JavaScript and CSS3

Tips and tricks

I compiled this list of tips and tricks based my study notes using the resources mentioned above.

• You can’t detect “HTML5 support” but you can detect support for individual features like canvas, video, geolocation – http://diveintohtml5.info/detect.html 
• Use Modernizr detection JavaScript library to check if a browser supports a specific HTML5 and CSS3 feature.
• Use Video For Everybody for HTML5 video where available, fallback to QuickTime or Flash in older browsers.
• Use geoPosition.js JavaScript library that provides Geolocation support in older browsers.
• geo-location-javascript framework
• HTML5 Cross Browser Polyfills – A collection of fallbacks for HTML5.
• There is an Almost Standards Mode for Browser Mode additionally to Quirks and Standard.
• Always specify a character encoding on the HTML page to avoid security vulnerabilities.
• HTML5 enabling script – older versions of IE (<IE9) will insert unknown elements into the DOM as empty nodes. Its children will become siblings instead of children. Use this HTML5 shiv to make IE acknowledge the new elements  and be able to style them.
• HTML 5 Outliner – test your pages to make sure that you’re using the heading elements properly. Use the <hgroup> element to wrap two or more related heading elements and by that create a single node in the document.
• You can have multiple <h1> elements in one document if these elements are inside sectioning elements. The <article> element creates a new section so a new node in the document and each section can have its own <h1> element in HTML5.
• Explorercanvas (excanvas.js) – Versions of Internet Explorer before 9.0 do not support the canvas API. Use ExCanvas JS library that implements the canvas API for IE with some limitations.
• Use geolocation.js for Mobile and Desktop Javascript Library for Geolocation Fallback to provide support for Geolocation for old browsers.

Related

• Learning Paths for MCSD: Web Applications