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

Course Outline

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

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
• The autofocus and oninput Attributes
• HTML5 CSS Pseudo-Classes
• Summary

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

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

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

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

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

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

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

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 Strict Mode
• Summary

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

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

13. 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

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

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

16. Style Class Manipulation

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

17. DOM Manipulation

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

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

19. Utility Functions

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

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

21. Advanced Ajax

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

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

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

24. Plugins

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

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

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

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

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
• Using Google App Engine to Resize Images
• The Picture Element
• The srcset Attribute
• More on the srcset Attribute
• Examples of the srcset Attribute
• What is Picturefill?
• Using Picturefill
• Summary

29. Bootstrap Overview

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

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
• Application Icons
• Summary

31. Bootstrap Miscellaneous Topics

• Bootstrap Components
• Bootstrap Components Web Page
• Integrating Bootstrap Components with jQuery
• Identifying the Required Version of jQuery
• Customizing Bootstrap
• Customizing Sass variables
• More Customization
• 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 the Picture element
• Lab 27. Getting Started With Bootstrap
• Lab 28. Simple Components
• Lab 29. Integrating jQuery with Bootstrap Components
• Lab 30. Mobile Web Testing With Chrome