HTML5 and CSS3

New Markup

• AwesomeCo Blog

  See how to use new markup tags to create a semantic blog

• Showing Progress With The Meter Element

  Use the Meter element to show progress towards a goal

• Custom Data Attributes

  Popup Windows with semantic markup

Creating User-Friendly Web Forms

• New Form Fields

  See how new form fields make it easier to describe a user interface

• Autofocus

  See HTML5′s autofocus attribute in action

• Placeholders

  Provide form hints with Placeholders

• In-place editing with Content Editable

  In place editing

Making Better User Interfaces with CSS3

• Styling Tables with Pseudo Classes

  Striping and styling tables is easy with new selectors

• Making Links Printable with :after and :content

  Make URLs show up on printouts

• Creating Multicolumn Layouts

  Lay content out in multiple columns easily

• Developing a mobile layout with Media Queries

  Apply CSS based on screen size

Drawing On The Canvas

• Drawing A Logo

  Use the Canvas to create a simple logo

• Graphing On The Canvas

  Create a bar chart

Audio and Video

Eye Candy

• Rounding Rough Edges

  Rounding corners

• Working with Shadows, Gradients, and Transformations

  Creating a banner with CSS3

• Using Real Fonts

  Use @font-face to define your fonts

Working With Client Side Storage

• Saving Preferences With Local Storage

  Store font size and colors locally

• Storing Data in Client-Side Relational Databases

  Build a note-taking application which stores all data in the browser’s database

• Working offline

  Work with the notes application without an Internet connection.

Playing Nicely With Other APIS

• History

  The AwesomeCo Homepage with back button support

• Geolocation

  Finding your location on a map

• Cross Document Messaging

  Messaging across iFrames

• Websockets

  A simple chat server using WebSockets