20480B: Programming in HTML5 with Javascript and CSS3

20480B: Programming in HTML5 with JavaScript and CSS3

Course Introduction2m
Course Introduction
Module 01 - Overview of HTML and CSS55m
Lesson 1: Overview of HTML
The Structure of an HTML Page
Tags, Elements, Attributes, and Content
Displaying Text in HTML
Displaying Images and Linking Documents in HTML
Gathering User Input by Using Forms in HTML
Demo - Creating a Simple Contact Form
Attaching Scripts to an HTML Page
Lesson 2: Overview of CSS
Overview of CSS Syntax
How CSS Selectors Work
How HTML Inheritance and Cascading Styles Affect Styling
Adding Styles to An HTML Page
Lesson 3: Creating a Web Application by Using Visual Studio 2012
Developing Web Applications by Using Visual Studio 2012
Demo - Creating a Web Site by Using Visual Studio 2012
Using the Internet Explorer F12 Developer Tools
Module 01 Review
Module 02 - Creating and Styling HTML Pages1h 47m
Lesson 1: Creating an HTML5 Page
What's New in HTML5?
Document Structure in HTML5
Text and Images in HTML5
Demo - HTML5 New Features
Demo - Using HTML5 Features in a Simple Contact Form
Lesson 2: Styling an HTML5 Page
Understanding CSS Text Styles
The CSS Box Model
Styling Backgrounds in CSS
Demo - Adding CSS Styles to an HTML Page
Demo - Creating and Styling HTML5 Pages
Module 02 Review
Module 03 - Introduction to JavaScript1h 26m
Lesson 1: Overview of JavaScript
What is JavaScript?
JavaScript Syntax
Variables, Data Types, and Operators
Functions
Conditional Statements
Looping Statements
Using Object Types
Defining Arrays of Objects by Using JSON
Lesson 2: Introduction to the Document Object Model
The Document Object Model
Finding Elements in the DOM
Adding, Removing, and Manipulating Objects in the DOM
Handling Events in the DOM
Lesson 3: Introduction to jQuery
The jQuery Library
Demo - Adding jQuery to a Web Project
Selecting Elements and Traversing the DOM by Using jQuery
Adding, Removing, and Modifying Elements by Using jQuery
Handling Control Events by Using jQuery
Demo - Displaying Data and Handling Events by Using JavaScript
Module 03 Review
Module 04 - Creating Forms to Collect and Validate User Input54m
Lesson 1: Creating HTML5 Forms
Declaring a Form in HTML5
HTML5 Input Types and Elements
HTML5 Input Attributes
Lesson 2: Validating User Input by Using HTML5 Attributes
Principles of Validation
Ensuring that Fields are Not Empty
Validating Numeric Input
Validating Text Input
Styling Fields to Provide Feedback
Lesson 3: Validating User Input by Using JavaScript
Handling Input Events
Validating Input
Ensuring that Fields are Not Empty
Providing Feedback to the User
Demo - Creating a Form and Validating User Input
Module 04 Review
Module 05 - Communicating with a Remote Server36m
Lesson 1: Sending and Receiving Data by Using the XMLHttpRequest Object
How a Browser Retrieves Web Pages
Using the XMLHttpRequest Object to Access Remote Data
Handling HTTP Errors
Consuming the Response
Handling an Asynchronous Response
Transmitting Data with a Request
Lesson 2: Sending and Receiving Data by Using the jQuery Library
Using the jQuery Library to Send Asynchronous Requests
Using the jQuery ajax() Function
Serializing Forms Data by Using jQuery
Demo - Communicating with a Remote Data Source
Module 05 Review
Module 06 - Styling HTML5 by Using CSS31h 10m
Lesson 1: Styling Text by Using CSS3
Fonts and Measurements
Implementing Text Effects
Lesson 2: Styling Block Elements
New Block Properties in CSS3
Block Layout Models
Demo - Switching Between CSS Layout Models
Lesson 3: Pseudo-Classes and Pseudo-Elements
Text Pseudo-Elements\
Link and Form Pseudo-Classes
DOM-Related Pseudo-Classes
Lesson 4: Enhancing Graphical Effects by Using CSS3
Specifying Color Values
Defining Backgrounds and Effects
Implementing Transformations and Graphics
Demo - Styling Text and Block Elements by Using CSS3
Module 06 Review
Module 07 - Creating Objects and Methods by Using JavaScript1h 6m
Lesson 1: Writing Well-Structured JavaScript Code
Scoping and Hoisting
Managing the Global Namespace
Singleton Objects and Global Functions in JavaScript
Lesson 2: Creating Custom Objects
Creating Simple Objects
Using Object Literal Notation
Using Constructors
Using Prototypes
Using the Object.create Method
Lesson 3: Extending Objects
Implementing Encapsulation
Implementing Inheritance by Chaining Prototypes
Adding Functionality to Existing Objects
Demo - Creating Objects
Demo - Creating Custom Objects
Demo - Extending Objects
Module 07 Review
Module 08 - Creating Interactive Pages by Using HTML5 APIs1h 38m
Lesson 1: Interacting with Files
HTML5 File Interfaces
The FileReader Interface
Reading a Text File
Demo - Working with Text Files
Reading a Binary File
Demo - Working with Binary Files
Implementing Drag-and-Drop
Demo - Implementing Drag-and-Drop
Lesson 2: Incorporating Multimedia
Playing Video Content by Using the <video> Tag
Supporting Multiple Video Formats
Interacting with Video in JavaScript Code
Playing Audio Content by Using the <audio> Tag
Demo - Working with Video/Audio
Lesson 3: Reacting to Browser Location and Context
The HTML5 Geolocation API
Requesting Geolocation Information
Processing Geolocation Information
Handling Geolocation Errors
Detecting the Context for a Page
Demo - Geolocation
Lesson 4: Debugging and Profiling a Web Application
Overview of the F12 Developer Tools in Internet Explorer 10
Demo - Using the F12 Developer Tools to Profile a Web Application
Module 08 Review
Module 09 - Adding Offline Support to Web Applications1h 3m
Lesson 1: Reading and Writing Data Locally
Maintaining Session State Information by Using Cookies
Persisting Session Data by Using Session Storage
Persisting Data Across Sessions by Using Local Storage
Handling Storage Events
Storing Structured Data by Using the Indexed Database API
Lesson 2: Adding Offline Support by Using the Application Cache
Configuring the Application Cache
Monitoring with the Application Cache
Triggering Resource Updates by Using the Manifest
Testing for Network Connectivity
Demo - Adding Offline Support to Web Applications
Module 09 Review
Module 10 - Implementing an Adaptive User Interface45m
Lesson 1: Supporting Multiple Form Factors
Why Design an Adaptive User Interface?
Considerations for Supporting Different Types of Device
Lesson 2: Creating an Adaptive User Interface
CSS Media Types
Detecting Device Capabilities by Using Media Queries
Detecting an Older Version of Internet Explorer by Using Conditional Comments
Defining Style Sheets for Printing
Demo - Implementing an Adaptive User Interface
Module 10 Review
Module 11 - Creating Advanced Graphics59m
Lesson 1: Creating Interactive Graphics by Using SVG
What is SVG?
Creating SVG Graphics
Drawing Circles and Ellipses
Drawing Complex Shapes
Specifying Fill Styles and Stroke Styles
Using Gradients and Patterns
Drawing Graphical Text
Transforming SVG Elements
Demo - Using SVG Transformations and Events
Demo - Creating Graphics
Lesson 2: Drawing Graphics by Using the Canvas API
What is the Canvas API?
Using the Canvas API
Drawing Paths
Using Gradients and Patterns
Transforming Shapes
Demo - Performing Transformations by Using the Canvas API
Module 11 Review
Module 12 - Animating the User Interface56m
Lesson 1: Applying CSS Transitions
Applying Simple Transitions by Using CSS
Configuring Transitions
Detecting the End of a Transition
Demo - Using CSS Transitions
Lesson 2: Transforming Elements
Applying Transformations by Using CSS
Applying 2D Transformations
Demo - Performing 2D Transformations
Applying 3D Transformations
Defining Transitions for Transformations
Demo - Performing 3D Transformations
Lesson 3: Applying CSS Keyframe Animations
Defining a Keyframe Animation
Configuring Keyframe Animation Properties
Starting a Keyframe Animation Programmatically
Handling Keyframe Events
Demo - Implementing KeyFrame Animations
Module 12 Review
Module 13 - Implementing Real-time Communication by Using30m
Web Sockets
Lesson 1: Introduction to Web Sockets
The Problem of Web-based Real-time Communications
What is a Web Socket?
Lesson 2: Using the WebSocket API
Connecting to a Server by Using a Web Socket
Sending Messages to a Web Socket
Receiving Messages From a Web Socket
Demo - Performing Real-time Communication by Using Web Sockets
Module 13 Review
Module 14 - Performing Background Processing by Using Web43m
Workers
Lesson 1: Understanding Web Workers
What is a Web Worker?
Why Use a Web Worker?
Web Worker Isolation
Dedicated and Shared Web Workers
Lesson 2: Performing Asynchronous Processing by Using Web Workers
Creating and Terminating a Dedicated Web Worker
Communicating With A Dedicated Web Worker
The Structure of a Web Worker
Creating a Shared Web Worker
Demo - Background Processing Using Web Workers
Module 14 Review
Course Closure

Total Duration: 14h 30m