HTML5

Offline/Storage

Local Storage


Local Storage with jStorage


IndexedDB


WebSQL


Application Cache

CACHE MANIFEST
# version 1.0.0

CACHE:
/img/person.jpg
/js/main.js
/js/jquery.js

# Resources that need a network connection
NETWORK:
*

# offline.jpg will be served in place of all images in img/large/
FALLBACK:
img/large/ img/offline.jpg
window.applicationCache.update(); // force browser to update the cache

Web Workers


Geolocation


Semantic Tags

Semantic Tags

http://www.w3schools.com/html/html5_new_elements.asp

HTML4


HTML5


HTML4


HTML5


Use an HTML5 shim/shiv for backward compatibility

Modernizr has one built in

New Elements

Typeahead Textbox


Details Tag


Progress Tag


Form Elements


Video/Audio


Canvas

Canvas 2D - Basics


Canvas 2D - Shapes with paths


Canvas 2D - Text/Image


Canvas 2D - Animation


CSS3

CSS3 - nth selectors


CSS3 - not selectors


CSS3 - ellipsis


CSS3 - rounded corners/shadow


CSS3 - text shadow

Hello Armenia


CSS3 - background


CSS3 - opacity


Graceful Degradation
and
Progressive Enhancement

Modernizr

A JavaScript library that detects HTML5 and CSS3 features in the user’s browser

HTML5 Boilerplate

learn it | use it

HTML5 Boilerplate


Responsive Design

CSS3 Media - Basic


CSS3 Media - Layout


Try Twitter Bootstrap

Credits

Rouben Meschian

rmeschian@gmail.com