Mastering Web Development using HTML5, CSS3 and jQuery

Course Details
Code: TT4600
Tuition (USD): $2,495.00 • Classroom (4 days)
$1,995.00 • Virtual (4 days)
Course Details
GSA (USD): $2,262.47 • Virtual (4 days)

Mastering Web Development using HTML5, CSS3 & jQuery is an in-depth web development / design training course geared for software developers who need to understand what the latest in web technologies, performance, optimization, and user interface design patterns and best practices. This comprehensive course provides a balanced mixture of theory and practical labs designed to take students through HTML5, CSS3 and related technologies. Students who attend this course will leave this course armed with the new skills to design, implement, and deploy robust, flexible, and safe web applications.

Skills Gained

This course provides indoctrination in the practical use of the umbrella of technologies that are on the leading edge of web development. This course is “skills-focused”, designed to train attendees in advanced web development and design skills, coupling the most current, effective techniques with the soundest practices. Throughout the course, students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review.

  • Understand what HTML5 is, what is new, and how it is used within the context of web applications
  • Understand what CSS3 is, what is new, and how it is used within the context of web applications
  • Understand the wide variety of options, tools, and approaches that can be used in conjunction with the web design and implementation
  • What jQuery is and why you should use it
  • How jQuery reduces the amount of code and adds rich functionality to both existing and new web pages
  • Best practices for using jQuery so that it works unobtrusively and performs well
  • jQuery plugins and extensions are available to enhance your applications
  • Concepts, terminology and implementation options for web-based user interface patterns
  • How to apply user interface patterns implementing a complex web development case study

Who Can Benefit

This is an intermediate and beyond level web development course, designed for experienced developers who need to extend their knowledge of web design and development or need to reinforce sound HTML and CSS coding practices, immediately.

Prerequisites

This is a hands-on programming class. Attendees should have previous experience or working knowledge of developing software applications, as well as basic HTML and CSS. Real world programming experience is a must.

Course Details

HTML5

Lesson: HTML5

  • HTML5 Design Principles
  • HTML5 – New Features
  • HTML5 Semantic Tags
  • HTML5 Forms – New Features
  • HTML5 Canvas
  • HTML5 Media
  • Media API Methods and Events

Lesson: HTML5 JavaScript API

  • Drag and Drop API
  • Messaging API
  • Web Storage API
  • Geolocation API

CSS3

Lesson: CSS3 Overview

  • CSS3 New Features
  • CSS3 Browser Support
  • CSS3 Selectors Support
  • CSS3 Properties Support

Lesson: CSS3 Advanced Selectors

  • Attribute Selectors
  • Combinators
  • Pseudo-Class Selectors
  • UI Selectors

Lesson: CSS3 Visual Effects

  • 2D Transformations
  • Transitions
  • Font and Color in CSS3
  • Border and Other Effects

Session: jQuery

Lesson: Why jQuery?

  • JavaScript Evolution
  • Why jQuery?
  • jQuery Usage
  • Downloading jQuery

Lesson: Basic jQuery

  • jQuery: Operational Overview
  • jQuery Capability Overview
  • Basic Selectors
  • Multiple Selector
  • Selecting by Order

Lesson: Manipulating the DOM

  • Attributes vs. Properties
  • CSS Box Model Properties
  • Element Content
  • Manipulating Children
  • Wrapping and Unwrapping
  • Effects (Basic Animation)
  • Effects Queues
  • jQuery Event Methods

Lesson: More On Element Selection

  • Hierarchical Selectors (Combinators)
  • Attribute Selectors
  • Basic vs. Child Filters
  • Filtering Methods
  • Traversing Methods

Session: JavaScript Object Notation (JSON)

Lesson: JSON Objects

  • Arrays
  • Objects
  • Arrays in Objects
  • Objects in Arrays

Lesson: JSON Syntax and Processing

  • JSON Parsers
  • Sending Data
  • JSON vs XML

Lesson: jQuery, JSON, and AJAX

  • jQuery AJAX Utility Methods
  • jQuery and JSON
  • jQuery and Other Data Types

Session: Web Application Performance

Lesson: Download Options

  • User Experience on Page Load
  • Multi-Stage Downloading
  • Predictive Fetching
  • On-Demand Downloading
  • JavaScript and CSS Minification

Lesson: Debugging

  • Internet Explorer Developer Tools
  • FireBug & FireBug Lite
  • Fiddler

Lesson: Optimization

  • DOM Management
  • Cyclic References
  • Reusing DOM Nodes
  • Code Optimization
  • CSS and Reflow Minimization

Session: Web App Design Patterns

Lesson: Responsive Design

  • Responsive and Adaptive
  • Viewports
  • Flexible Grids and Media
  • Media Queries

Lesson: UI Patterns Overview

  • User Interface/Interaction Design Patterns
  • Categories from Yahoo! Design Pattern Library
  • Web Application Design Principles

Lesson: Layout Patterns

  • Page Grids
  • Page Grids Solution

Lesson: Navigation Patterns

  • Accordion
  • Alphanumeric Filter Links
  • Breadcrumbs
  • Item Pagination
  • Search Pagination
  • Module Tabs
  • Navigation Tabs
  • Progress Bar

Lesson: Selection Patterns

  • AutoComplete
  • Calendar Picker
  • Carousel

Lesson: Rich Interaction Patterns

  • Invitations
  • Transitions
  • Drag and Drop
  • Rich Interaction

Session: Mobile Development (Time Permitting)

Lesson: Challenges for Mobile Development

  • What is the Difference?
  • Mobile Web Applications
  • Native Code Generators
  • jQuery Mobile
  • Native Web Runtime (NWR)
  • Design Tools
  • Data and Language Options
  • Security