Introduction to Responsive Web Development Training

Overview >

This three day class gives students the opportunity to explore responsive web development. It starts with HTML, continues with CSS and concludes with JavaScript fundamentals, and Responsive Web Design. The class includes numerous hands-on labs allowing students to use all of these technologies together to build web sites.

Audience >

Skills Gained >

Prerequisites >

Outline >

Chapter 1. HTML5 Overview 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
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

Summary Chapter 2. Forms 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 Element
The autofocus and oninput Attributes
HTML5 CSS Pseudo-Classes

Summary Chapter 3. Canvas Chapter 3. Canvas

vs.
Browser Support for
Creating the Canvas
Using the Context
Using Color
Painting Gradients
Drawing Paths
Painting Patterns
Transformers

Summary Chapter 4. Introduction to CSS3 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 Chapter 5. Applying CSS Styles

Inline Styles
Embedded Styles
External Styles
Selectors
Combinator Selectors
Universal Selector
Style Classes
Pseudo-Classes
Inheriting From a Parent
CSS Cascade Order

Summary Chapter 6. Styling Text 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 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
Padding
Border
Outline
CSS 3 - Rounding Border Corners
CSS 3 - Using a Border Image
Border Image Example

Summary Chapter 8. Introduction to JavaScript 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 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 the Strict Mode

Summary Chapter 10. JavaScript Functions Chapter 10. JavaScript Functions

Functions Defined
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
The arguments Parameter
Example of Using arguments Parameter

Summary Chapter 11. JavaScript Arrays 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 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
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 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 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 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 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 Chapter 17. 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 18. Using Bootstrap 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 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

Course Dates

Search by:

Show only GTR courses

Page 1, showing results 1-1 out of 1

Location

Duration

Start Date

Price

ONSITE, United States

3 Days

Onsite

$2275

Thinking about Onsite?

If you need training for 3 or more people, you should ask us about onsite training. Putting aside the obvious location benefit, content can be customised to better meet your business objectives and more can be covered than in a public classroom. Its a cost effective option. One on one training can be delivered too, at reasonable rates.

Submit an enquiry from any page on this site, and let us know you are interested in the requirements box, or simply mention it when we contact you.

All $ prices are in USD unless it’s a NZ or AU date

SPVC = Self Paced Virtual Class

LVC = Live Virtual Class