Introduction to Responsive Web Development with HTML5, CSS3, JavaScript and jQuery

#text-block-8 { margin-bottom:0px; text-align:left; }

#text-block-11 { margin-bottom:0px; text-align:left; }

Chapter 1. HTML5 Overview

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
Current Browser Support for HTML5
Detecting Support for HTML5
New Features of HTML5
The Function over Form Philosophy
Semantic Elements
HTML4 Layouts
HTML5 Semantic Layouts
Nesting Semantics
Replacing Flash with HTML5
Summary

Chapter 2. 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 3. 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 4. 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 5. 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 6. 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 7. 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 8. 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 9. 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 10. 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 the Strict Mode
Summary

Chapter 11. 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 12. 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 13. Advanced Objects and Functionality in JavaScript

Basic Objects
Constructor Function
More on the Constructor Function
Object Properties
Deleting a Property
The instanceof Operator
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
Inheritance Using Prototype
Extending Inherited Behavior
Enhancing Constructors
Improving Constructor Performance
Inheritance with Object.create
The hasOwnProperty Method
Summary

Chapter 14. 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?
What Does the $() Function do?
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
xhtml Note
References
Summary

Chapter 15. 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 16. Style Class Manipulation

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

#text-block-12 { margin-bottom:0px; text-align:left; }

Chapter 17. DOM Manipulation

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

Chapter 18. Events

Event Overview
Old School: Event Handling Using HTML Element Attributes
Unobtrusive JavaScript
Unobtrusive JavaScript Example
Multiple Handlers
Using jQuery Wrapper Event Registration Methods
The .on() Method
Event Propagation
Handlers for Elements Before They Exist!
The Event Object
Triggering Events
Summary

Chapter 19. Utility Functions

The jQuery Object Revisited
Functions May Have Methods
A jQuery Utility Function: $.trim()
$.each()
Example jQuery Utility Functions
Summary

Chapter 20. Ajax

Ajax Overview
The Browser & the Server
The Ajax Request
The Ajax Response
Sending an Ajax Request With jQuery – The General Case
When this code is executed…
Sending an Ajax Request With jQuery – Simpler, Typical Case
Data Types
The .data() method
Summary

Chapter 21. Advanced Ajax

A Form Example
An Ajax Form Example
Serialize()
Get vs. Post
More on Query Strings
ajaxStart() and ajaxError()
Summary

Chapter 22. Parsing JSON

JSON
Reading JSON from the Server Using Ajax
Example file contents
Using the Results
Optimized Version
Getting More From the Response
jqXHR Methods
POST vs. GET
Invalid JSON
Using $.ajaxSetup()
Summary

Chapter 23. Animations and Effects with jQuery and jQuery UI

What is jQuery UI?
Can I do Animations and Effects using jQuery only?
Hiding Elements with jQuery
Using .hide() and .show() in jQuery
Alternating an Element’s Visibility in jQuery
Adjusting the Speed in jQuery
Providing a Handler in jQuery
Using .slideUp() / .slideDown() methods in jQuery
jQuery UI Categories
jQuery UI Interactions: Droppable and Draggable
Droppable and Draggable More Complete Example
jQuery UI Widgets: Datepicker
jQuery UI Widgets: Autocomplete
Summary

Chapter 24. Plugins

What is a Plugin?
Goal
Self-Executing Anonymous Functions
Meeting Our Goal
Prototype Objects
The jQuery Wrapper Class Revisited
Example Plugin
Summary

Chapter 25. Introduction to Responsive Web Design

What is Responsive Web Design?
Mobile Browsers Quirks
Other Mobile Web Considerations
Primary Responsive Design Techniques
Elements of Responsive Design
Example of Responsive Design
Responsive Page Design Schematic
Alternatives to Responsive Design
Summary

Chapter 26. CSS 3 and Responsive Web Design

Progressive Enhancement
Implementing Progressive Enhancement
Media Types
CSS Style “Reset”
Conditional Styles for Internet Explorer
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 27. Responsive Web Page Layout

The Main Layout Types
Responsive Layouts
Popular Layout Patterns
The ‘Mostly Fluid’ Layout Pattern
The ‘Column Drop’ Layout Pattern
The ‘Layout Shifter’ Pattern
Other Layout Techniques
Getting Content Fillers
The Float CSS Property
Combining CSS Styles
The Simple Fluid Layout Example
The Simple Fluid Layout Technique
The Results
Font Size Units
Pixel-Sized vs Em-Sized
Font Size Unit Relationships
Pixels to Em Conversion Formula
Other Considerations
Looking into the Future
Summary

Chapter 28. Responsive Images

Responsive Images
Performance Considerations
Shrinking Images
Traditional Image Handling Techniques
Media Queries Don’t Always Help With Performance
A “Fluid” Pixel
The Device Viewports
CSS Pixels
The Power of Simplicity
Sencha.io Src Images Cloud Service
Sencha.io Src Diagram
How it Works
Sencha.io Src API
Sencha.io Src API Details
Sencha.io Src API Details Cont’d
Examples of Sencha.io Src API
Rolling Out Your Own Cloud Image Manipulation Service
The Picture Element
The srcset Attribute
More on the srcset Attribute
Examples of the srcset Attribute
What is Picturefill?
Using Picturefill
Summary

Chapter 29. Bootstrap Overview

Bootstrap History
Current Status
Responsive Web Development
Responsiveness
Why it Matters
Download Bootstrap
Contents
How it works
Bootstrap Content Development Network
Using Bootstrap
Mobile First
Features
LESS
Responsive Grid Layout
Reusable GUI Components
JavaScript
Summary

Chapter 30. 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

Chapter 31. Bootstrap Miscellaneous Topics

Bootstrap Components
Bootstrap Components Web Page
Embedding Glyphicons in Components
Integrating Bootstrap Components with jQuery
Identifying the Required Version of jQuery
Minimizing Bootstrap’s Download Size
Using the Customizer
Customizer Page Fragment
Compiling and Downloading Customized Bootstrap
Customizing Bootstrap Components
Light Customizations Steps
Summary

Lab Exercises

Lab 1. Create a Basic HTML5 Layout
Lab 2. Improve Your Forms Using HTML5
Lab 3. Drawing Using the Canvas Element
Lab 4. Intro to CSS3
Lab 5. Applying Basic Styles
Lab 6. Modify Text Styles
Lab 7. Control Element Spacing with Box Properties
Lab 8. Intro to JavaScript
Lab 9. Basic JavaScript Syntax
Lab 10. JavaScript Functions
Lab 11. Arrays in JavaScript
Lab 12. Getting Started with jQuery
Lab 13. More on Selectors
Lab 14. Dynamic Style Class Assignment
Lab 15. DOM Manipulation
Lab 16. Form Event Handling
Lab 17. Basic Ajax
Lab 18. Submitting Form Using Ajax
Lab 19. Build a Slide Show Viewer
Lab 20. Build a Drag and Drop Application
Lab 21. Develop a Simple Plugin
Lab 22. Media Queries and Responsive Design
Lab 23. Responsive Layout
Lab 24. Orientation Responsiveness
Lab 25. Responsive Images with Media Queries
Lab 26. Responsive Images with Picturefill
Lab 27. Getting Started With Bootstrap
Lab 28. Simple Components
Lab 29. Integrating jQuery with Bootstrap Components
Lab 30. Mobile Web Testing With Chrome