HTML5 Apps with jQuery

With the rise of the mobile web, Javascript has proven itself to be a serious programming language for cross-platform app development. Geared towards novice developers and technical designers interested in building modern Javascript applications, this course teaches students how to navigate and utilize the many technologies that share the name HTML5. You will start the week with a crash course in core browser technologies (DOM, CSS, Javascript) and build a simple HTML5 app. As you dive into jQuery, AJAX, and a range of HTML5 APIs, you will code add-on components for your app, including features like data visualization, responsive layouts, and rich media. This hands-on instruction places special emphasis on debugging, modular software design, and other best practices for the web.

UPCOMING CLASSES

Date Course Instructor Total Price Status

BNR West, California

Jul 28 -
Aug 1
Instructor(s): Aquino
$ 4,050

Atlanta, Georgia

May 12 -
May 16
Instructor(s): Aquino
$ 4,050
Jun 9 -
Jun 13
Instructor(s): Gandee
$ 4,050

What You'll Learn

Upon completion of HTML5 Apps with jQuery, the student will be able to:

  • Understand JavaScript objects, arrays, and functions
  • Bind to DOM events
  • Work with JavaScript's prototypal inheritance
  • Traverse and modify the DOM with jQuery
  • Use advanced CSS selectors
  • Access remote resources with AJAX
  • Write clean AJAX callbacks with jQuery's Deferred objects
  • Create lightweight animations
  • Protect data and organize code using the Module Pattern
  • Implement a Single-Page app
  • Create View objects that use DOM templates
  • Debug code effectively
  • Avoid cross-browser pitfalls
  • Handle network errors
  • Create and validate HTML5 forms
  • Synchronize data with remote web services
  • Test and profile code
  • Use CSS3 Media Queries for Responsive Design
  • Access Geolocation data
  • Create data visualizations with Canvas and SVG
  • Store data using localStorage and sessionStorage
  • Model application data using JavaScript objects

HTML5 Apps with jQuery SYLLABUS

Section Content
HTML5 Apps with jQueryOpen
LotteryApp
Develop a simple HTML5 App
Document Object Model
Learn what the DOM is and its relationship to HTML
Basic CSS and CSS Selectors
The basics of the box model, simple styling, and understanding ways of addressing rendered DOM elements
Introducing the DOM API
Creating, removing, and manipulating DOM elements with JavaScript
Functions I
Creating and using functions, anonymous functions, and arguments
Closures and Callbacks
Capturing variables and effective use of the callback pattern
Objects
A look at objects, properties, and arrays
DOM Traversal and Events
Moving around the DOM Tree and responding to clicks and keypresses
Introducing jQuery
Leverage CSS Selectors and the callback pattern for responding to user interaction using the jQuery library
Debugging Fundamentals
How to use the console, breakpoints, the call stack, and other tools for understanding what happens when code runs in the browser
HTML5 Forms
How and when to use the new HTML5 Form elements. Validate user input, provide user feedback, and capture data
Storage APIs
Storing JSON data in the browser using the localStorage and sessionStorage APIs
AJAX
Covers the various methods for communicating with remote web services asynchronously using jQuery's Deferred object. Handle remote data, server errors, and network timeouts
Web Services
Look at common best-practices used by RESTful web services. How to tell the difference between a good web API and a bad one.
Modules
How to group functionality into objects and how to protect implementation details using the Module Pattern
Functions II
An in-depth look at function application and context. Focuses on best-practices when using constructors, closures, and anonymous functions
Inheritance
How to work with, and not against, JavaScript's powerful prototypal inheritance
Mixins
How to create and use mixins to apply behavior to different kinds of objects without resorting to complicated inheritance chains
The MVC Pattern
A clean and simple approach to an often misunderstood design pattern
Templating
Covers logicless templating with the Handlebars library
Animation Basics
Applying visual behaviors to your views. Examining jQuery animations and CSS3 animations
MVCS: A variation of MVC
Storing and querying data locally
Data Synchronization
Synchronizing local data with a remote web service. Undo/redo with data versioning
Add-on Modules
A further exploration of HTML5 APIs by creating add-on modules
Geolocation
Making the app location-aware
Data Visualization
Introducing Canvas API and SVG
Mobile and Responsive Design
Using CSS3 Media Queries to adapt the UI to a variety of different screen sizes and pixel densities. How to profile the size and speed of your app
Setup
Overview of modern front end web development. Begin working with web documents using Chrome and a text editor

Requirements

Students should have a basic understanding of object-oriented programming. Experience with a programming language is expected, though it does not have to be JavaScript. Working knowledge of HTML and CSS will be very helpful, but is not required. Students may want to read Head First HTML and CSS for an overview of these technologies.

How to prepare your device for our class

1. If you have no prior JavaScript experience, go through the first eight chapters of Eloquent JavaScript. These chapters cover core JavaScript programming, and is a good way to get used to JavaScript syntax.


2. If you have no prior CSS experience, read this brief introduction. It is several years old, but it will give you a sense of how visual styles are applied to web pages/applications.


3. Download or update to the most recent version of Chrome.


4. If you do not already have one installed, download a text editor for your platform. Here are some free ones:


Mac OS X: Text Wrangler
Linux: GEdit
Windows: Notepad++


5. Students who would like hands-on experience with remote debugging for specific mobile browsers will need the following items.


For Safari on iOS, you will need:

  • an iPhone, iPod, or iPad with iOS6
  • a Mac running OS X updated with Safari 6
  • a USB cable to connect your mobile device to your Mac

For Chrome for Android:

  • an Android device with Google Chrome browser
  • a Mac, Windows, or Linux computer with the Android SDK installed
  • a USB cable to connect your mobile device to your computer

Advice from the nerds

Preparing in advance will save lots of class time!

IMPORTANT TELEPHONE NUMBERS

For information or to enroll in a class in United States: (770) 817-6373