06/05/2023 - 06/09/2023
10:00 AM - 06:00 PM
Online Virtual Class
USD $2,930.00
Enroll
07/03/2023 - 07/07/2023
10:00 AM - 06:00 PM
Online Virtual Class
USD $2,930.00
Enroll
07/24/2023 - 07/28/2023
10:00 AM - 06:00 PM
Online Virtual Class
USD $2,930.00
Enroll

Topics

 

The course covers the following key areas of Responsive Mobile Web Design:

  • HTML Fundamentals
  • New Features of HTML5
  • CSS Fundamentals
  • CSS Media Queries
  • Selectors and Pseudo-Selectors
  • Layouts
  • Core JavaScript
  • The JavaScript Object Model
  • Closures
  • Dependency Management
  • How to use jQuery Mobile
  • The jQuery Function and Wrapped Sets
  • DOM and Style Manipulation
  • AJAX

What you will learn

 

Students will complete several lab exercises to apply the techniques covered in discussion and printed materials. After completing this class developers will be able to apply current best practices to responsive mobile web design.


Audience

 

Mobile Developers, Developers, Web Designers.


Prerequisites

 

Some basic HTML experience is required.  Knowledge of an object-oriented programming language is helpful but not required.


Duration

  Five days
Download Sample Labs Lab Setup Guide

Outline for Mobile Web Design with HTML5, CSS3, JavaScript and jQuery Mobile Training

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

Lab Exercises

Lab 1. Create a Basic HTML5 Layout
Lab 2. New HTML5 Semantic Elements
Lab 3. Add More Semantic Value to Your Page with HTML5
Lab 4. Improve Your Forms Using HTML5
Lab 5. Drawing Using the Canvas Element
Lab 6. Dynamic Drawing Using the Canvas Element
Lab 7. Intro to CSS3
Lab 8. Applying Basic Styles
Lab 9. Modify Text Styles
Lab 10. Control Element Spacing with Box Properties
Lab 11. Media Queries and Responsive Design
Lab 12. Intro to JavaScript
Lab 13. Basic JavaScript Syntax
Lab 14. JavaScript Functions
Lab 15. Arrays in JavaScript
Lab 16. Objects in JavaScript
Lab 17. Getting Started with jQuery Mobile
Lab 18. Exploring Mobile UI Patterns
Lab 19. More on Selectors
Lab 20. Dynamic Style Class Assignment
Lab 21. DOM Manipulation
Lab 22. Lists
Lab 23. Buttons
Lab 24. Forms
Lab 25. Geolocation
Lab 26. Getting Started With Bootstrap
Lab 27. Simple Components