Learn your way! Get started

HTML5 and CSS3

with expert Dustin Tauer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack
  • Power Pack Plus

Release date Release date 11/18/2011
Level Level Beginner
Runtime Runtime 6h 59m
Closed captioning Closed captioning Included
Transcript Transcript Included
eBooks / courseware eBooks / courseware Included
Hands-on labs Hands-on labs Included
Sample code Sample code Included
Exams Exams Included


Enterprise Solutions
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

With the advent of multimedia on web pages it became clear that the standard HTML4 was no longer sufficient for web page development. Enter HTML5 and CSS3 in connection with JavaScript. This course covers the changes to HTML that now can embed audio and video playing without using a plug in. The course will also cover many new features such as Structural Tags, Input Field Types, and Canvas Elements. The course also includes the new CSS3 Transitions, local storage of user preferences, history management, drawing and animating graphics with WebGL.

Prerequisites

This course assumes you have prior experience with HTML4, CSS and JavaScript.

Learning Paths

This course will help you prepare for the following certifications and exams:
MCSD: SharePoint Applications
MCSD: Web Applications
70-480: Programming in HTML5 with JavaScript and CSS3

This course is part of the following LearnNowOnline SuccessPaths™:
Web Development Fundamentals

Meet the expert

Dustin Tauer Dustin Tauer is an Adobe Certified Master Instructor and has a degree in Informational Systems and Technology. He currently teaches development classes focusing on technologies like HTML, CSS, JavaScript, Flash, and Flex. When he’s not training, he’s working on development projects ranging from mobile applications to rich internet applications to instructor-led curriculum.


Course outline



What is New in HTML5

Introduction (11:06)
  • Introduction (01:05)
  • Overview (00:48)
  • More Descriptive Markup (01:10)
  • Better Interfaces with CSS3 (01:14)
  • Backward Compatibility (01:23)
  • Demo: Feature Support (02:35)
  • Demo: HTML5test.com (02:32)
  • Summary (00:17)
Structural Tags and Attributes (18:39)
  • Introduction (00:32)
  • New Structural Tags (01:52)
  • New Doctype (00:24)
  • New Element Tags (02:49)
  • Demo: Webpage with new Tags (12:40)
  • Summary (00:21)
Custom Data Attributes (15:14)
  • Introduction (00:37)
  • Custom Data Attributes (00:42)
  • Pop-up Window (01:41)
  • Demo: Custom Data Attribute (11:56)
  • Summary (00:16)
HTML5 Form Input Types (11:59)
  • Introduction (00:41)
  • New Input Types (01:47)
  • Virtual Keyboards (00:57)
  • Demo: Input Types (03:19)
  • Demo: E-Mail Box (01:17)
  • Demo: Range Box (00:56)
  • Demo: Date Box (01:38)
  • Demo: Search Box (01:07)
  • Summary (00:14)

Forms, Audio, Video and Pseudo Classes

User Friendly Web Forms (08:47)
  • Introduction (00:37)
  • Additional Attributes (01:10)
  • Autocomplete Attribute (00:50)
  • Demo: Placeholder (03:32)
  • Demo: Autofocus (01:04)
  • Demo: Autocomplete (01:14)
  • Summary (00:17)
Advanced Form Validation (17:31)
  • Introduction (00:42)
  • HTML5 Web Forms (00:26)
  • Required Attribute (00:36)
  • Pattern Attribute (01:47)
  • Demo: Form Validation (03:12)
  • Demo: Patterm Attribute (03:45)
  • Demo: Valid E-Mail (03:44)
  • Demo: Error Notification (02:48)
  • Summary (00:27)
Embedding Audio and Video (16:00)
  • Introduction (00:47)
  • Overview (01:18)
  • Codecs (00:55)
  • Container Formats (01:07)
  • Audio Tag (01:37)
  • Video Limitations (01:49)
  • Demo: Embedding Audio (04:56)
  • Demo: Embedding Video (03:02)
  • Summary (00:26)
Pseudo Classes (18:03)
  • Introduction (00:41)
  • Overview (00:35)
  • nth-of-type Pseudo Class (00:32)
  • nth-child Pseudo Class (01:29)
  • Other CSS3 Pseudo Classes (01:05)
  • Demo: Pseudo Classes (13:22)
  • Summary (00:16)

CSS3 Design

Multi Column Layouts (06:56)
  • Introduction (00:32)
  • Overview (00:29)
  • Browser-Specfic Prefix (00:57)
  • Demo: Multiple Columns (04:40)
  • Summary (00:16)
Media Queries (10:37)
  • Introduction (00:47)
  • Overview (00:21)
  • CSS3 Media Queries (00:50)
  • HTML4 Media Queries (01:05)
  • Device-Specific Conditions (00:41)
  • Separate Style Sheets (00:44)
  • Demo: Media Query (05:43)
  • Summary (00:23)
Rounded Corners (06:19)
  • Introduction (00:32)
  • Rounded Corners (00:58)
  • Demo: Rounded Corners (04:30)
  • Summary (00:18)
Adding Shadows (12:41)
  • Introduction (00:46)
  • Overview (01:31)
  • Gradients (01:14)
  • Transformations (00:40)
  • Demo: Drop Shadow (02:15)
  • Demo: Transformations (01:52)
  • Demo: Gradient (03:59)
  • Summary (00:22)
Using Real Fonts (06:53)
  • Introduction (00:43)
  • Overview (00:38)
  • Fonts Module (01:22)
  • Defining the Font (01:06)
  • Demo: Attach Fonts (02:39)
  • Summary (00:22)
CSS3 Transitions (10:33)
  • Introduction (00:50)
  • Transition Properties (01:58)
  • Transition Timing Property (01:08)
  • Demo: Transitions (06:20)
  • Summary (00:14)
Native Drag and Drop (10:01)
  • Introduction (00:30)
  • Overview (00:18)
  • Drag and Drop Events (01:11)
  • Demo: Drag and Drop (07:40)
  • Summary (00:20)

Drawing, Saving Preferences and Storage

Drawing on the Canvas (14:03)
  • Introduction (00:32)
  • Canvas Element (01:38)
  • Demo: Drawing on a Canvas (11:36)
  • Summary (00:16)
Advanced Canvas Drawing (17:43)
  • Introduction (00:36)
  • Demo: HTML5 Canvas (06:57)
  • Demo: Additional Elements (03:37)
  • Demo: New Design (03:00)
  • Demo: Cut Out (03:15)
  • Summary (00:15)
Saving Preferences (18:41)
  • Introduction (00:46)
  • localStorage (00:29)
  • localStorage Values (01:07)
  • Demo: Save Values (03:16)
  • Demo: localStorage Settings (06:49)
  • Demo: Fonts Changes (01:35)
  • Demo: Load Settings (04:19)
  • Summary (00:17)
Session Storage (16:01)
  • Introduction (00:44)
  • Overview (00:48)
  • Demo: Session Storage (05:20)
  • Demo: apply_to_page (03:06)
  • Demo: Access Settings (04:00)
  • Demo: Call Settings (01:40)
  • Summary (00:20)

Web SQL Storage

Web SQL Storage (20:44)
  • Introduction (00:44)
  • Persisting Data (00:40)
  • Web SQL Storage (00:32)
  • Examples of Web SQL Storage (03:33)
  • Demo: Web SQL Feature (09:21)
  • Demo: Java Script Errors (02:55)
  • Demo: CRUD (02:36)
  • Summary (00:20)
Web SQL Storage Continued (26:39)
  • Introduction (00:30)
  • Demo: SQL Table (01:24)
  • Demo: Insert (07:00)
  • Demo: Update UI (07:55)
  • Demo: Update or Delete (09:29)
  • Summary (00:18)
Web SQL Storage Conclusion (14:06)
  • Introduction (00:31)
  • Demo: Update or Delete (00:58)
  • Demo: Click Event Notes List (06:57)
  • Demo: Fix Java Error (01:18)
  • Demo: Hide and Refresh (04:05)
  • Summary (00:14)

History, Geo Location, WebGL

History Management (24:38)
  • Introduction (00:55)
  • History Management API (02:37)
  • Demo: History Management API (11:04)
  • Demo: History Object (09:46)
  • Summary (00:14)
Geolocation (22:06)
  • Introduction (00:41)
  • Geolocation Overview (02:09)
  • Demo: Geolocation Mapping (18:50)
  • Summary (00:25)
Drawing With Web GL (10:54)
  • Introduction (00:38)
  • WebGL Overview (01:43)
  • Initialize WebGL (01:14)
  • Demo: Drawing With WebGL (06:57)
  • Summary (00:19)

Graphics with WebGL

Shaders and Buffers (26:34)
  • Introduction (00:35)
  • Shaders Overview (00:52)
  • Buffers Overview (00:40)
  • Demo: Initialize Shaders (10:21)
  • Demo: Initialize Buffers (13:42)
  • Summary (00:21)
Displaying and Animating (25:50)
  • Introduction (00:40)
  • Draw the Scene (01:45)
  • Animate in WebGL (00:58)
  • Demo: Setup Viewport (02:25)
  • Demo: Initialize Perspective (01:08)
  • Demo: Apply Translation (01:20)
  • Demo: Apply Rotation (01:18)
  • Demo: Set Buffers (03:31)
  • Demo: Draw Arrays (01:23)
  • Demo: Test and Debug (03:30)
  • Demo: Adjust and Add Animation (07:12)
  • Summary (00:35)