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

Course#: BSWD1021

About this Course

Course Type Course Code Duration
Web Development BSWD1021 5 Days

This training course trains students in the core technologies of modern responsive web design: HTML5, CSS3, and JavaScript.

HTML is used for semantic markup, CSS3 defines presentation, and JavaScript implements behavior. Many web sites use the jQuery JavaScript library to simplify coding.

Why Attend this Course?

The course shows students how to apply these technologies together, combined with the popular jQuery utility framework, to create rich web sites that adapt to a wide range of client devices, using the techniques of Responsive Web Design.

In this five day training class students explore these crucial technologies. It starts with HTML, continues with CSS and concludes with JavaScript fundamentals, jQuery and Responsive Web Design.  The class includes numerous hands-on labs allowing students to use all of these technologies together to build web sites.

What Makes this Course Stand Apart?

This is a highly interactive Hands on courses with the options of the Accelerator Plus1 Workshop.

Lot of demos, practical exercises and samples. Very strong presentation skill of the trainer. Good balance between theory and practice application.

What you will Learn?

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

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 web site design.

Audience

Developers, Web Designers.

Prerequisites

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

Course Outline

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

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

What next- How do I arrange a group course or book a public place.?

We are hear to to help so please utilise our live chat team

Call to speak to your account manager or a consultant on 0345 467 9557 or email sales@brightts.com

We are all technical with a wealth of Learning & Development experience so can talk you through any specific requirements or the details of one of our courses.

0

Start typing and press Enter to search