WA2256 Responsive Mobile Web Development with HTML5, CSS3, JavaScript, and jQuery Mobile Training Course Outline

Chapter 1. Introduction to HTML5

• History of HTML5
• HTML5 Standards Body
• New Features of HTML5
• Current Browser Support for HTML5
• Detecting Support for HTML5
• HTML5 vs. Flash
• Replacing Flash with HTML5
• Summary

Chapter 2. The Basics

• What Is HTML5
• HTML5 Goals
• HTML Specs, Past and Present
• How Is HTML5 Different From HTML4?
• HTML5 Is Not Based On SGML
• More Differences
• HTML5 Defines Required Processing For Invalid Documents
• The Doctype Declaration
• Semantic Elements
• The <aside> Element
• Browser Support For HTML5
• Summary

Chapter 3. New Semantic Elements

• Function over Form
• HTML4 Layouts
• HTML5 Semantic Layouts
• Nesting Semantics
• Other New Semantic Elements
• The <time> Element
• WAI-ARIA
• The <ruby> and <rt> Elements
• The <rp> Element
• The <keygen> Element
• Summary

Chapter 4. Forms

• The form Attribute
• The placeholder Attribute
• New Form Field Types
• Forms and Validation
• The required Attribute
• The number input type
• The pattern Attribute
• The range and date input types
• The <datalist> Element
• The autofocus and oninput Attributes
• HTML5 CSS Pseudo-Classes
• Summary

Chapter 5. Canvas

• The <canvas> Element
• <canvas> vs. <svg>
• Browser Support for <canvas>
• Creating the Canvas
• Using the Context
• Using Color
• Painting Gradients
• Drawing Paths
• Painting Patterns
• Transformers
• Summary

Chapter 6. Video and Audio

• HTML5 Video/Audio Overview
• New Elements for Video/Audio
• Using the <audio> Element
• The <video> Element
• Specifying More Than One Audio or Video File
• The poster Attribute
• Other <audio> and <video> Attributes
• JavaScript and Media Elements
• Summary

Chapter 7. Introduction to CSS3

• What is a Style?
• What are Cascading Style Sheets?
• CSS and the Evolution of Web Development
• The CSS Standardization Process
• CSS and HTML
• CSS Compatibility
• CSS Rules
• New in CSS3
• Summary

Chapter 8. Applying CSS Styles

• Inline Styles
• Embedded Styles
• External Styles
• Selectors
• Combinator Selectors
• Universal Selector
• Style Classes
• Pseudo-Classes
• Inheriting From a Parent
• Declaring !important Styles
• CSS Cascade Order
• Summary

Chapter 9. Styling Text

• Web Typography
• Generic Font Families
• Font-Stack and Understudy Fonts
• Web Fonts
• Using Web Fonts
• Font Size
• Font Weight
• Italics and Underlining
• Capitalization
• Line Height
• Multiple Font Values
• Text Spacing
• Aligning Text
• Summary

Chapter 10. Box Model and Effects

• Element Box Model
• Parts of the Box Model
• Setting Width and Height
• IE Box Size Bug
• Controlling Flow in Position
• Hiding Content
• Overflowing Content
• Floating Elements
• Using Float for Multiple Columns
• Margins
• Padding
• Border
• Outline
• CSS 3 - Rounding Border Corners
• CSS 3 - Using a Border Image
• Border Image Example
• Summary

Chapter 11. Responsive Web Design

• What is Responsive Web Design?
• Elements of Responsive Design
• Example of Responsive Design
• Alternatives to Responsive Design
• Progressive Enhancement
• Implementing Progressive Enhancement
• Media Types
• CSS Style "Reset"
• Conditional Styles for Internet Explorer
• Using HTML5Shiv for Older IE Versions
• Optional HTML5Shiv Configuration
• What is the Viewport?
• Adapting the Viewport
• Specifying the Viewport
• Media Queries
• Media Features Used in Media Queries
• Combining Responsive Design Techniques
• Testing Responsive Design
• Summary

Chapter 12. Introduction to JavaScript

• What JavaScript Is
• What JavaScript Is Not
• Not All JavaScripts are Created Equal ...
• ECMAScript Language and Specification
• What JavaScript Can Do
• What JavaScript Can't Do
• JavaScript on the Server-side
• Elements of JavaScript
• Values, Variables and Functions
• Embedded Scripts
• External Scripts
• Browser Dialog Boxes
• What is AJAX?
• Summary

Chapter 13. JavaScript Fundamentals

• Variables
• JavaScript Reserved Words
• Dynamic Types
• JavaScript Strings
• Escaping Control Characters
• What is False in JavaScript?
• Numbers
• The Number Object
• Not A Number (NaN) Reserved Keyword
• JavaScript Objects
• Operators
• Primitive Values vs Objects
• Flow Control
• 'if' Statement
• 'if…else' Statement
• 'switch' Statement
• 'for' Loop
• 'for / in' Loop
• 'while' Loop
• 'do…while' Loop
• Break and Continue
• Labeled Statements
• The undefined and null Keywords
• Checking for undefined and null
• Checking Types with typeof Operator
• Date Object
• Document Object
• Other Useful Objects
• Browser Object Detection
• The eval Function
• Enforcing Strict Mode
• Summary

Chapter 14. JavaScript Functions

• Functions Defined
• Declaring Functions
• Function Arguments
• More on Function Arguments
• Return Values
• Multiple Return Values in ECMAScript 6
• Optional Default Parameter Values
• Emulating Optional Default Parameter Values
• Anonymous Function Expressions
• Functions as a Way to Create Private Scope
• Linking Functions to Page Elements
• Local and Global Variables
• Declaring Object Methods
• The arguments Parameter
• Example of Using arguments Parameter
• Summary

Chapter 15. JavaScript Arrays

• Arrays Defined
• Creating an Array
• The length Array Member
• Traversing an Array
• Appending to an Array
• Deleting Elements
• Inserting Elements
• Other Array Methods
• Accessing Objects as Arrays
• Summary

Chapter 16. Advanced Objects and Functionality in JavaScript

• Basic Objects
• Constructor Function
• More on the Constructor Function
• Object Properties
• Deleting a Property
• Object Properties
• Constructor and Instance Objects
• Constructor Level Properties
• Namespace
• Functions are First-Class Objects
• Closures
• Closure Examples
• Private Variables with Closures
• Immediately Invoked Function Expression (IIFE)
• Prototype
• Inheritance in JavaScript
• The Prototype Chain
• Traversing Prototype Property Hierarchy
• Prototype Chain
• Summary

Chapter 17. The jQuery Mobile Toolkit

• Introduction
• Downloading and Using jQuery Mobile
• The Basics
• Example: A Multi-Page HTML
• The Anatomy of a Page
• Example of Page Segments
• Theming
• Creating a List View
• Decorating List View Rows
• Implement Master Detail Navigation Pattern
• Create a Tabbed View
• Summary

Chapter 18. jQuery Overview

• What Is jQuery?
• Benefits of Using a JavaScript Library
• jQuery Example
• CSS Selectors
• How to Use jQuery
• Practical Usage Notes
• Background – DOM
• Background - DOM Ready Events
• Background - JavaScript Functions
• The jQuery Function Object
• What Does the $() Function Take as Argument?
• The jQuery Function – Case 1
• The jQuery Function - Case 2
• The jQuery Function – Case 3
• The jQuery Function – Case 4
• The jQuery Wrapper
• The jQuery Wrapper as an Array-Like Object
• Note: innerHTML vs. .html()
• jQuery Wrapper Chaining
• API Function Notation
• Handling DOM Ready Event
• Summary

Chapter 19. Selectors

• Background: The Sizzle Selector Engine
• Selecting Elements by Attribute
• Pseudo-Selectors
• Form Pseudo-Selectors
• Faster Selection
• Selecting Elements Using Relationships
• Selecting Elements Using Filters
• More on Chaining: .end()
• Testing Elements
• Is the Selection Empty?
• Saving Selections
• Iterating Through Selected Elements Using .each()
• JavaScript Methods
• JavaScript "this"
• Function Context
• The Function call() Method
• .each() Revisited
• Summary

Chapter 20. Style Class Manipulation

• Two Options
• Specifying Style Properties
• Setting Style Properties
• .addClass() / .removeClass()
• Defining a Stylesheet
• Setting & Getting Dimensions
• Attributes
• Summary

Chapter 21. DOM Manipulation

• The $ Function Revisited
• Getters and Setters
• The text() Element Method
• Appending DOM Elements
• Removing DOM Elements
• Performance
• Summary

Chapter 22. jQuery Mobile List

• jQuery Mobile Lists
• HTML Lists
• jQuery Mobile Lists
• Inset Lists
• Adding Links
• Numbered Lists
• Count Bubbles
• Formatting List Items
• Formatted List Source
• Formatted List Example
• Filters
• Filtered List Source
• Filtered List Example
• Summary

Chapter 23. jQuery Mobile Buttons

• jQuery Mobile Buttons
• Creating Buttons
• Button Appearance
• Enabling and Disabling
• Button Groups
• Horizontal Button Groups
• Inline Buttons
• Highlighting Preferred Choice
• Icons
• Alternate Icon Display
• Summary

Chapter 24. jQuery Mobile Forms

• jQuery Mobile Forms
• A Simple Form
• Form Enhancements
• Labels
• Placeholders
• Client-Side Validation
• The required Attribute
• Patterns
• Another Pattern Example
• Widgets
• More Widgets
• Color
• Date
• Range
• Datalist
• Select
• Checkboxes
• Horizontal Checkboxes
• Radio Buttons
• Submitting Forms
• Summary

Chapter 25. Introduction to AJAX

• What is AJAX?
• A Simple Example
• The Old Way
• The AJAX Way
• Two Key Aspects of AJAX
• What are the Advantages of the AJAX Approach?
• AJAX Technologies
• The Basic AJAX API
• Creating the XMLHttpRequest Object
• The XMLHttpRequest Object Basics
• Complete Example
• The Timeline
• Review Questions
• Review Answers

Chapter 26. jQuery Mobile Themes

• jQuery Mobile Theming System
• CSS3 Roots
• Working with Themes
• Theme Example
• The jQuery Mobile ThemeRoller
• Global Theme Settings
• Download Your Themes
• Contents of the Theme Zip File
• Theme Images
• Editing Your Themes (if needed)
• CSS3 Transitions
• Example of a CSS3 Transition
• jQuery Transitions
• Custom Transitions in jQuery Mobile
• Custom Transitions using CSS
• Summary

Chapter 27. Geolocation

• Geolocation Concepts
• How Does it Work?
• Users Need to Agree!
• Geolocation API
• Functions and Options
• Example
• Success Function
• Error Function
• Options
• watchPosition
• Summary

Chapter 28. Bootstrap Overview

• What is Bootstrap
• Keywords from bower.js
• Bootstrap History
• Responsive Web Development
• Responsive Grid Layout
• Reusable GUI Components
• JavaScript
• The Mobile First Philosophy
• Why RWD Matters
• Responsive Page Views
• Less
• Getting Bootstrap
• Bootstrap Content Delivery Network
• Other Setup Options
• The Bootstrap Core Files
• To Min or Not to Min
• Summary

Chapter 29. Using Bootstrap

• Including Bootstrap CSS Files
• Including Bootstrap JavaScript Files
• Viewport Meta Tags
• Example
• Layouts
• Grid
• Grid Source
• Grid Explained
• Navigation
• Navigation (Desktop)
• Navigation (Mobile)
• Navigation Source
• Navigation Explained
• Navigation Elements and Styles
• Glyphicons
• Summary