Course Code: 19183

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

Class Dates:
1/1/0001
Length:
5 Days
Cost:
$2495.00
Class Time:
Technology:
Developer
Delivery:
Instructor-Led Training, Virtual Instructor-Led Training

Overview

  • Course Overview
  • 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.

    Response Web Design training continues to be in demand. Web Age offers support for all your Response Web Design training needs. Sign up today for one of our instructor led Response Web Design training.

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

    The Response Web Design 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.
  • Audience
  • Developers, Web Designers.

    What you will learn

    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

Prerequisites

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

Course Details

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 9. Introduction to JavaScript
  • What JavaScript Is, What JavaScript Is Not
  • Not All JavaScripts are Created Equal ...
  • ECMAScript Language and Specification
  • What JavaScript Can and 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?
  • 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
  • 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
  • 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
  • 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, Prototype
  • Immediately Invoked Function Expression (IIFE)
  • Inheritance in JavaScript
  • The Prototype Chain
  • Traversing Prototype Property Hierarchy
  • Prototype Chain
  • 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
  • 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
  • 16. Style Class Manipulation
  • Two Options, Specifying Style Properties
  • Setting Style Properties
  • .addClass() / .removeClass()
  • Defining a Stylesheet, Setting & Getting Dimensions
  • Attributes
  • 17. DOM Manipulation
  • The $ Function Revisited
  • Getters and Setters, The text() Element Method
  • Appending DOM Elements
  • Removing DOM Elements
  • Performance
  • 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
  • 19. Utility Functions
  • The jQuery Object Revisited
  • Functions May Have Methods
  • A jQuery Utility Function: $.trim(), $.each()
  • Example jQuery Utility Functions
  • 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
  • .
  • 21. Advanced Ajax
  • 22. Parsing JSON
  • 23. Animations and Effects with jQuery and jQuery UI
  • 24. Plugins
  • 25. Introduction to Responsive Web Design
  • 26. CSS 3 and Responsive Web Design
  • 27. Responsive Web Page Layout
  • 28. Responsive Images
  • 29. Bootstrap Overview
  • 30. Using Bootstrap
  • 31. Bootstrap Miscellaneous Topics
  • 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 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