8351  Reviews star_rate star_rate star_rate star_rate star_half

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

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...

Read More
By Request
$2,720 USD
Duration 5 days
Course Code WA2402
Available Formats Classroom

Overview

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. 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.

Skills Gained

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.

Who Can Benefit

  • Developers, Web Designers.

Prerequisites

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

Course Details

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 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
  • 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
  • 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
  • Using Google App Engine to Resize Images
  • 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

  • What Is Bootstrap
  • Keywords from package.json
  • Bootstrap History
  • Responsive Web Development
  • Responsive Grid Layout
  • Reusable GUI Components
  • JavaScript
  • The Mobile First Philosophy
  • Why RWD Matters
  • Responsive Page Views
  • SASS
  • Getting Bootstrap
  • Bootstrap Content Delivery Network
  • Other Setup Options
  • The Bootstrap Core Files
  • To Min or Not to Min
  • 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
  • Application Icons
  • Summary

Chapter 31. Bootstrap Miscellaneous Topics

  • Bootstrap Components
  • Bootstrap Components Web Page
  • Integrating Bootstrap Components with jQuery
  • Identifying the Required Version of jQuery
  • Customizing Bootstrap
  • Customizing Sass variables
  • More Customization
  • 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 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
Read Less

Schedule

Upcoming Course Dates

There are currently no scheduled dates for this course. If you are interested in this course, contact us with the form below.

Contact Information

FAQ

Does the course schedule include a Lunchbreak?

Classes typically include a 1-hour lunch break around midday. However, the exact break times and duration can vary depending on the specific class. Your instructor will provide detailed information at the start of the course.

What languages are used to deliver training?

Most courses are conducted in English, unless otherwise specified. Some courses will have the word "FRENCH" marked in red beside the scheduled date(s) indicating the language of instruction.

What does GTR stand for?

GTR stands for Guaranteed to Run; if you see a course with this status, it means this event is confirmed to run. View our GTR page to see our full list of Guaranteed to Run courses.

Does Ascendient Learning deliver group training?

Yes, we provide training for groups, individuals and private on sites. View our group training page for more information.

What does vendor-authorized training mean?

As a vendor-authorized training partner, we offer a curriculum that our partners have vetted. We use the same course materials and facilitate the same labs as our vendor-delivered training. These courses are considered the gold standard and, as such, are priced accordingly.

Is the training too basic, or will you go deep into technology?

It depends on your requirements, your role in your company, and your depth of knowledge. The good news about many of our learning paths, you can start from the fundamentals to highly specialized training.

How up-to-date are your courses and support materials?

We continuously work with our vendors to evaluate and refresh course material to reflect the latest training courses and best practices.

Are your instructors seasoned trainers who have deep knowledge of the training topic?

Ascendient Learning instructors have an average of 27 years of practical IT experience and have also served as consultants for an average of 15 years. To stay current, instructors spend at least 25 percent of their time learning new, emerging technologies and courses.

Do you provide hands-on training and exercises in an actual lab environment?

Lab access is dependent on the vendor and the type of training you sign up for. However, many of our top vendors will provide lab access to students to test and practice. The course description will specify lab access.

Will you customize the training for our company’s specific needs and goals?

We will work with you to identify training needs and areas of growth.  We offer a variety of training methods, such as private group training, on-site of your choice, and virtually. We provide courses and certifications that are aligned with your business goals.

How do I get started with certification?

Getting started on a certification pathway depends on your goals and the vendor you choose to get certified in. Many vendors offer entry-level IT certification to advanced IT certification that can boost your career. To get access to certification vouchers and discounts, please contact info@ascendientlearning.com.

Will I get access to content after I complete a course?

You will get access to the PDF of course books and guides, but access to the recording and slides will depend on the vendor and type of training you receive.

How do I request a W9 for Ascendient Learning?

View our filing status and how to request a W9.

Reviews

It is very good and very simple instructions. almost to much hand holding.

The training was very good to understand the concepts and how to set up things .

The technical data in the AWS Solutions Architect course was very thorough.

Very good couse and again we would like to see more videos on removing FRUs

ExitCertified gave me some good trainings and I got to learn through doing labs.