HTML5 and CSS3

HTML5

History, Vision & Future of HTML5

  • What Is HTML5?
  • History And Major Actors
  • Vision And Philosophy Behind HTML5
  • Compatibility
  • Future Of HTML5

Getting Started With HTML5

  • The State Of Browser Support
  • Feature Detection
  • Support For Legacy Browsers
  • Developer Tools

Structure of a Web Page

  • HTML5 DOCTYPE
  • Page Encoding
  • New And Updated Elements
  • New Attributes
  • Deprecated Elements And Attributes
  • HTML5 And CSS3
  • Browser Support

Forms and Audio/Video

  • What Are The Needs For Web Applications?
  • Current Solutions
  • New Input Types
  • New Attributes
  • Form Validation
  • Browser Support
  • Video/Audio Codec And Browser Support
  • New Audio/Video Markup
  • Attributes And Methods
  • Understanding Audio/Video Events
  • Customizing Audio/Video Controls

HTML5 Canvas

  • Overview Of Graphics In The Browser
  • Canvas Vs. SVG
  • Accessibility
  • Using A Canvas
  • Context And Coordinates
  • Drawing Shapes
  • Working With Paths
  • Drawing Straight Lines
  • Drawing Circles Or Arcs
  • Drawing Text
  • Drawing Images

HTML5 Geolocation

  • Introduction To Geolocation
  • Privacy Considerations
  • Many Ways To Get User Location
  • Two Main Methods
  • The Position Object
  • Handling Errors
  • The Position Options Object

Drag/Drop and Data Storage

  • Making elements draggeble
  • One way drag
  • Two way drag
  • Problems With The Existing Cookie-based Model
  • Hacks Prior To HTML5
  • New Storage Options
  • Web Storage
  • Web SQL Storage

HTML5 Web Sockets

  • Overview Of Web Communication Options
  • Overview Of Web Sockets API And Protocol
  • Advantages Of Web Sockets
  • Browser Support

CSS3

Overview of CSS3 New Features

  • Image free Visual Effects
  • Box transformations
  • Unique Fonts
  • Powerful Selectors
  • Transitions and Animations
  • Multiple Column Layouts
  • Changing background color
  • Adding pure CSS3 animation

CSS3 Graphics Effects

  • Rounding the Corners
  • Semitransparent Backgrounds
  • Image-free Gradients
  • Image-free Drop Shadows
  • Image-free Text Shadows