Introduction to Responsive Web Development for Mac Training

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. 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 5. 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 6. 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 7. 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 8. 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 9. 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 10. 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 11. 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 12. 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 13. 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 14. 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 15. 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 16. 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 17. 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 18. 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 19. 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. Media Queries and Responsive Design
Lab 13. Responsive Layout
Lab 14. Orientation Responsiveness
Lab 15. Responsive Images with Media Queries
Lab 16. Getting Started With Bootstrap
Lab 17. Simple Components
Lab 18. Integrating jQuery with Bootstrap Components
Lab 19. Mobile Web Testing With Chrome