HTML5 and CSS3

with Dustin Tauer


Course Description: With the advent of multimedia on web pages it became clear that the standard HTML 4 was no longer sufficient for web page development. Enter HTML 5 and CCS 3 in connection with jScript. 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 CCS 3 Transitions, local storage of user preferences, history management, drawing and animating graphics with Web GL.



7+ hours of media runtime

Introduction

  • Overview
  • More Descriptive Markup
  • Better Interfaces with CSS3
  • Backward Compatibility
  • Demo: Feature Support
  • Demo: HTML5test.com

Structural Tags and Attributes

  • New Structural Tags
  • New Doctype
  • New Element Tags
  • Demo: Webpage with new Tags

Custom Data Attributes

  • Custom Data Attributes
  • Pop-up Window
  • Demo: Custom Data Attribute

HTML5 Form Input Types

  • New Input Types
  • Virtual Keyboards
  • Demo: Input Types
  • Demo: E-Mail Box
  • Demo: Range Box
  • Demo: Date Box
  • Demo: Search Box

User Friendly Web Forms

  • Additional Attributes
  • Autocomplete Attribute
  • Demo: Placeholder
  • Demo: Autofocus
  • Demo: Autocomplete

Advanced Form Validation

  • HTML5 Web Forms
  • Required Attribute
  • Pattern Attribute
  • Demo: Form Validation
  • Demo: Patterm Attribute
  • Demo: Valid E-Mail
  • Demo: Error Notification

Embedding Audio and Video

  • Overview
  • Codecs
  • Container Formats
  • Audio Tag
  • Video Limitations
  • Demo: Embedding Audio
  • Demo: Embedding Video

Pseudo Classes

  • Overview
  • nth-of-type Pseudo Class
  • nth-child Pseudo Class
  • Other CSS3 Pseudo Classes
  • Demo: Pseudo Classes

Multi Column Layouts

  • Overview
  • Browser-Specfic Prefix
  • Demo: Multiple Columns

Media Queries

  • Overview
  • CSS3 Media Queries
  • HTML4 Media Queries
  • Device-Specific Conditions
  • Separate Style Sheets
  • Demo: Media Query

Rounded Corners

  • Rounded Corners
  • Demo: Rounded Corners

Adding Shadows

  • Overview
  • Gradients
  • Transformations
  • Demo: Drop Shadow
  • Demo: Transformations
  • Demo: Gradient

Using Real Fonts

  • Overview
  • Fonts Module
  • Defining the Font
  • Demo: Attach Fonts

CSS3 Transitions

  • Transition Properties
  • Transition Timing Property
  • Demo: Transitions

Native Drag and Drop

  • Overview
  • Drag and Drop Events
  • Demo: Drag and Drop

Drawing on the Canvas

  • Canvas Element
  • Demo: Drawing on a Canvas

Advanced Canvas Drawing

  • Demo: HTML5 Canvas
  • Demo: Additional Elements
  • Demo: New Design
  • Demo: Cut Out

Saving Preferences

  • localStorage
  • localStorage Values
  • Demo: Save Values
  • Demo: localStorage Settings
  • Demo: Fonts Changes
  • Demo: Load Settings

Session Storage

  • Overview
  • Demo: Session Storage
  • Demo: apply_to_page
  • Demo: Access Settings
  • Demo: Call Settings

Web SQL Storage

  • Persisting Data
  • Web SQL Storage
  • Examples of Web SQL Storage
  • Demo: Web SQL Feature
  • Demo: Java Script Errors
  • Demo: CRUD

Web SQL Storage Continued

  • Demo: SQL Table
  • Demo: Insert
  • Demo: Update UI
  • Demo: Update or Delete

Web SQL Storage Conclusion

  • Demo: Update or Delete
  • Demo: Click Event Notes List
  • Demo: Fix Java Error
  • Demo: Hide and Refresh

History Management

  • History Management API
  • Demo: History Management API
  • Demo: History Object

Geolocation

  • Geolocation Overview
  • Demo: Geolocation Mapping

Drawing With Web GL

  • WebGL Overview
  • Initialize WebGL
  • Demo: Drawing With WebGL

Shaders and Buffers

  • Shaders Overview
  • Buffers Overview
  • Demo: Initialize Shaders
  • Demo: Initialize Buffers

Displaying and Animating

  • Draw the Scene
  • Animate in WebGL
  • Demo: Setup Viewport
  • Demo: Initialize Perspective
  • Demo: Apply Translation
  • Demo: Apply Rotation
  • Demo: Set Buffers
  • Demo: Draw Arrays
  • Demo: Test and Debug
  • Demo: Adjust and Add Animation

Get our entire learning library

ONLY

$99
.99
per year

Visual Studio, ASP.NET, SQL, SharePoint and more...
  • 3,400+ video tutorials
  • Microsoft MVP's and experts
  • Future video releases FREE
  • 100% money-back guarantee


Not ready to buy? Try now