jQuery Training Course

Course Summary

Our Web Development with jQuery course teaches you how to tap into the power of jQuery to build extremely rich, yet elegant web UIs using one of the most simple and popular cross-browser JavaScript libraries out there.

Not only will you learn by doing, but you'll have a lot of fun along the way because jQuery is all about instant gratification!




 

Duration [top]

3 days.

Objectives [top]

By attending this course you will:

  • Understand what's so good about jQuery - Google, IBM, Netflix, and even Microsoft are all using it!
  • Be able to add support for jQuery into your own UIs - and let Google host it for you
  • Get how jQuery works: DOM selection, decoration, enchancing
  • Be able to use jQuery's effects, animation, scrolling, and resizing capabilities
  • Build lightboxes, slideshows, and manipulate images - all in JavaScript!
  • Be able to render pro-looking panels, menus (including drop-down), accordions, tabs, tooltips UI widgets in your apps
  • Learn about jQuery's AJAX facilities and create amazing interactive applications
  • Be able to enhance your forms with hints, autosuggestions, client-side validation, star ratings, and more!
  • Learn about jQuery's controls, including date pickers, sliders, progress bar, sorting, and drag'n'drop
  • Be able to create/manage lists, trees, and tables - again all in JavaScript
  • Understand jQuery's plugins, themes, and other advanced concepts, including best-practices

Audience [top]

Web Development with jQuery training course is for you if you are a web developer who wants to build best-of-breed web UIs with the simplicity and elegance of jQuery.

Prerequisites [top]

To get the most benefit from this training you absolutely need to be comfortable with basic JavaScript, HTML, and CSS. Don't worry, you don't need to be a guru (but you will be after this course!) to take your client-side programming skills to the next level.

Familiarity with XML, and basic server-side programming (e.g. PHP, Java, Perl, Python) is recommended, but not required.

Instructors [top]

Photo

Adam Breindel brings over 10 years of successes working with cutting-edge technology for small startups as well as major players in the travel, media/entertainment, financial, productivity, and consulting industries.

In addition to web sites, GUI applications, and mobile device software, Adam has also built high-volume middleware for one of the world's largest banks, and produced a new, modern integration to a 1960s-vintage mainframe app for one of the world's largest airlines.

Adam focuses on designing and coding systems in a way that yields predictable results, leverages best practices and high-productivity tools, minimizes excess code, and is fun to do. He has also spoken at tech conferences, written articles and skill assessments, and produced an open source tool for software development. Adam has enjoyed teaching large and small groups, covering topics from nuts-and-bolts Java programming to merging ideal process with real-world constraints in an organization.

More about Adam Breindel...
Photo

James Lafferty has been a web developer for eight years, specializing in PHP, JavaScript and CSS. Previously, he has done development work for Nikon, IDG and Safeway, as well as many other clients. He has taught at Yahoo!, eBay and Stanford University, and currently works at Endicia, a Newell Rubbermaid Brand specializing in postage technologies. At Endicia, James places a strong emphasis on communicating best practices to junior developers, Agile methodologies and producing high quality JavaScript, HTML and CSS code.

More about James Lafferty...
Photo

Jeremy never expected nor planned on becoming a hardcore programmer, much less a computer language polyglot, but that is where his varied career has taken him. Much more interested in the technical side of things, he's worked on projects from MUDs to mapping APIs to a browser front end for corporate file sharing. Jeremy likes to learn new technology by diving in, writing a lot of bugs, and then debugging everything to get a thorough understanding of how things work. There's nothing better than finding out just what a platform is capable of, and where the boundaries still exist. Jeremy's current favorite languages are JavaScript, Python, and Lua.

When he's not teaching, he's probably rock climbing with his son, writing code for that game that maybe-someday will be published, or reading yet another classic novel that he should have read in school but didn't.

More about Jeremy Osborne...

Outline [top]

Overview of jQuery

  • What's jQuery and what's so good about it?
  • Who is usng it?
  • Cross-browser compatibility
  • jQuery UI and Plugins

Getting Started with jQuery

  • Downloading and including jQuery
  • Google and Microsoft CDN
  • Developer vs. Production versions (compressed vs uncompressed)
  • jQuery namespace and jQuery '$' alias
  • Revisiting HTML DOM
  • Debugging jQuery problems
  • Accessibility concerns

Using jQuery

  • Making sure that the page is ready
  • Selections using CSS3
    • Filters
    • Multiple item selectors
    • Best practices
  • Decorating with CSS
    • Changing styles
    • Adding/removing classes
  • Effects with jQuery (e.g. hiding, revealing, and toggling elements)
    • Basic Animations
    • Callback functions
  • Event handlers
  • Adding and removing HTML elements
  • Modifying content

Advanced Animations

  • Animating with CSS
  • Color animation
  • Easing
  • Bouncy Content Panes
  • Animation Queues
  • Chaining Actions
  • Animating Navigation
  • jQuery User Interface (UI) Library

Handling User Scolling

  • The scroll event
  • Floating navigation
  • Scrolling the document
  • Customizing scroll bars

Handling Resizing

  • The resize event
  • Layout switcher
  • Resizable elements (textarea, plane splitter)

Images and Slideshows

  • Building our own lightbox
  • Using ColorBox plugin
  • Cropping images with jCrop plugin
  • Slideshows
    • Faders (cross, rollover)
    • Timers
    • Using Cycle plugin
    • Scrolling
    • Thumbnails
    • Customizing events that trigger scrolling

Menus

  • Expandable and collapsible menus
  • Open-closed indicators
  • Expand on hover
    • Hover intents
  • Drop-down menus
  • Accordion menus
    • Simple
    • Multi-level
    • jQuery UI Accordion

Tabs

  • Basic tabs
  • jQuery UI tabs
  • Tab options and controls

Panels and Panes

  • Slide-downs
  • Sliding overlay

Tooltips

  • Simple
  • Advanced (using sprites)

Ajax with jQuery

  • Overview of Ajax
  • Loading content asynchronously
  • Fetching JSON data
  • jQuery's .ajax facilities
    • Common settings
    • GET and POST requests
    • Ajax Events
    • Consuming XML
    • Sending HTML form data
  • Loading external scripts dynamically
  • Interactive Ajax
  • Spinners and progress indicators
  • Endless scrolling

Forms

  • Simple form validation
  • The submit event
  • Validation plugin
  • Form hints
  • Checkbox checker
  • Inline editing
  • Autocomplete
  • Star rating input

Controls

  • Date picker
    • Date validation
  • Sliders
  • Drag and drop
  • Sorting with jQuery UI's sortable
  • Progress bar

Dialogs and Notifications

  • Simple modal dialog
  • jQuery UI dialog
  • Growl-style notifications
  • 1-up notification

jQuery Widgets

  • Lists
    • jQuery UI selectables
    • Sorting
    • Swapping list elements
    • Searching
    • Selecting
  • Trees
    • Expandable/collapsable trees
    • Event delegation
  • Tables
    • Fixed headers
    • Repeating headers
    • Data grids
    • Pagination
    • Row editing
    • DataTables plugin
    • Selecting rows and columns

Advanced Concepts

  • Best Practices
    • Clean code
    • Comments
    • Map objects
    • Namespacing
    • Scoping
    • Client-side templating
    • Why browser-sniffing should be avoided
    • Feature detection
  • Plugins
  • Extending jQuery
  • Creating your own selectors
  • Events
  • The special event
  • Coexisting with other JavaScript libraries (like prototype.js)
  • Queing and dequeuing animations
  • Themes
  • Parting thoughts


Student Testimonials [top]

Training was a great experience. Laurent really knew his stuff, but admitted that he didn't know everything (Very refreshing & reassuring). All in all, i came away with quite a few things that will help me in the future. Thanks!!!

Valmon - Publishers Clearing House

Joe Alman is very knowledgeable; well presented the course; maintained the course at optimum pace. Well prepared and provided useful course material.

Shyam - Network Solutions, LLC

Laurent was an excellent instructor. There is a difference between someone who is an expert on a particular subject and someone who can help people learn and grasp the concepts. Fortunately, Laurent is both! Great instructor and great class. Learned a lot and feel like I am ready to tackle jquery.

Scott - Pasco School District

I thought the initial javascript training was very helpful.

Wayne - Network Solutions LLC

I went in with some experience with jQuery, but most of my understanding hodge-podge and rough around the edges. This course helped me to cement the foundations and taught me stuff I didn't know I didn't know.

Shamyl - APCO Worldwide

All great!!! You ROCK!!!

Ricardo - Samtec

I was REALLY impressed that Ken Jones, the instructor is really an industry veteran--not just a kid who has been doing this for a few years. He can do this stuff in his sleep! Not only that, but he is really skilled at teaching and is personable. I felt that I got personalized attention when I needed it, and left feeling like I was armed with a new skill set!

Mary - Self Employed