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
Core JavaScript
The JavaScript Object Model
Dependency Management
How to use jQuery
The jQuery Function and Wrapped Sets
DOM and Style Manipulation
CSS Media Queries
Responsive Web Design

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.


Developers, Web Designers.


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

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

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

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

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 Compatibility
CSS Rules
New in CSS3

Chapter 6. Applying CSS Styles

Inline Styles
Embedded Styles
External Styles
Combinator Selectors
Universal Selector
Style Classes
Inheriting From a Parent
Declaring !important Styles
CSS Cascade Order

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
Line Height
Multiple Font Values
Text Spacing
Aligning Text

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
CSS 3 – Rounding Border Corners
CSS 3 – Using a Border Image
Border Image Example

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?

Chapter 10. JavaScript Fundamentals

JavaScript Reserved Words
Dynamic Types
JavaScript Strings
Escaping Control Characters
What is False in JavaScript?
The Number Object
Not A Number (NaN) Reserved Keyword
JavaScript Objects
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

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

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

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
Functions are First-Class Objects
Closure Examples
Private Variables with Closures
Immediately Invoked Function Expression (IIFE)
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

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

Chapter 15. Selectors

Background: The Sizzle Selector Engine
Selecting Elements by Attribute
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

Chapter 16. Style Class Manipulation

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

Chapter 17. DOM Manipulation

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

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

Chapter 19. Utility Functions

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

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

Chapter 21. Advanced Ajax

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

Chapter 22. Parsing JSON

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

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

Chapter 24. Plugins

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

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

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

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

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 Src Images Cloud Service Src Diagram
How it Works Src API Src API Details Src API Details Cont’d
Examples of 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

Chapter 29. Bootstrap Overview

Bootstrap History
Current Status
Responsive Web Development
Why it Matters
Download Bootstrap
How it works
Bootstrap Content Development Network
Using Bootstrap
Mobile First
Responsive Grid Layout
Reusable GUI Components

Chapter 30. Using Bootstrap

Including Bootstrap CSS Files
Including Bootstrap JavaScript Files
Viewport Meta Tags
Grid Source
Grid Explained
Navigation (Desktop)
Navigation (Mobile)
Navigation Source
Navigation Explained
Navigation Elements and Styles

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

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 here to help so please utilise our live chat team

Call to speak to your account manager or a consultant on

+44 (0)345 467 9557 or email

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.


Start typing and press Enter to search