jQuery Fundamentals

2-day Basic jQuery Course for Beginners — JQF

jQuery Web Design Training Course Overview

This jQuery course for beginners, is designed to get non-programmers started with using jQuery to progressively enhance and gracefully degrade website and web application user interfaces (UIs).

Unlike a lot of jQuery training, this course gives as much attention to the issues of when and why to use jQuery, as it does to the mechanics of how to use jQuery. So, for example, when jQuery features overlap with those of CSS3, we'll show you how to use jQuery to support feature-incomplete browsers, without duplicating the built-in CSS3 functionality of advanced browsers.

This jQuery course is particularly suitable for front-end web designers taking their first steps into web programming — because:

  • jQuery builds directly upon your existing HTML and CSS knowledge
  • jQuery is narrowly scoped — i.e. web-specific, not general-purpose programming
  • The course devotes more time for incremental learning and practical exercises — than our intensive 1-day basic jQuery course

This course will not turn you into an expert web programmer overnight, but it will give you some very useful everyday design tools and provide a firm conceptual foundation for learning more generic programming skills in future.

Course contents — 1 Introduction and overview

  • What is jQuery?
  • What are the alternatives?
  • Overview of jQuery features
  • Download, install and configure jQuery
  • Getting started — a simple jQuery enabled web page

Course contents — 2 Selecting/extracting content

  • Basic jQuery selectors
  • Form selectors
  • Using filters with selectors
  • jQuery attribute filters
  • jQuery content filters
  • jQuery visibility filters
  • Traversing the page
  • Chaining jQuery statements
  • Bringing it all together

Course contents — 3 Content manipulation

  • Create and insert new content
  • Find and change element attributes
  • jQuery insert functions — append-prepend, after-before, etc.
  • Functions to remove, wrap or replace content
  • Cross-browser CSS styling with jQuery
  • Bringing it all together

Course contents — 4 Event handling

  • Single (cross-browser) jQuery event object
  • jQuery event model — assign handlers to objects by selection
  • The on and off functions — to connect to / disconnect from elements
  • Click, hover, etc — handy event-related functions
  • Common functions on the jQuery event model
  • E.g. data, timeStamp, type, target, pageX and pageY, result, stopPropagation, etc.
  • Using the one method instead of on — for one-off events
  • Trigger and triggerHandler event functions
  • Bringing it all together

Course contents — 5 jQuery Animations & effects

  • Show, hide and toggle matched elements
  • Fade matched elements in, out, and to
  • Slide matched elements up, down, toggle — to hide and reveal
  • Customised animations — using the animate and stop functions
  • Bringing it all together

Course contents — 6 jQuery UI

  • Overview — interactions, widgets and effects
  • Download, install and configure the jQuery UI plugin
  • Interactions — selectable, sortable, draggable, droppable, resizeable
  • Widgets — tabs, slider, progress, accordion, datepicker, dialog
  • Effects — show, hide, toggle, add class, remove class, toggle class, switch class, color animation
  • Using ThemeRoller — build widget themes from off-the-shelf and bespoke components
  • Bringing it all together

Course contents — 7 jQuery workshop

  • Website upgrade project
  • Use jQuery to enhance a pre-built CSS3 website
  • jQuery fallbacks for CSS3 animation in non-supporting browsers
  • Adding UI features that CSS3 does not provide
  • Collapseable sections, tooltips, thumbnailing, slideshow
  • Enhanced form design

Dates for Online courses

Dates for Barcelona

Dates for Milan

Dates for Rome

Dates for Florence

Dates for Frankfurt

Dates for Bologna

Dates for Amsterdam

Dates for Berlin

Dates for Paris

Dates for Cologne

Dates for Brussels

Dates for Dublin

Course Objectives

On completion of this jQuery training course, you should be able to:

  • Understand the proper place of jQuery in web design
  • Use jQuery alongside HTML, CSS, JavaScript and back-end web programming
  • Select, extract, manipulate and insert web content with jQuery
  • Use jQuery selectors, filters and functions appropriately
  • Use the jQuery event object to handle user-driven and data-driven page events
  • Create and manipulate jQuery animations
  • Use the jQuery UI library to create and manage widgets, effects and interactions
  • Use jQuery and jQuery UI to enhance a pre-existing, non-dynamic, website

Target Audience

  • Experienced CSS-based web designers

Training Pre-requisites

The following 2-day WDA training courses — or equivalent knowledge and experience:

Additional knowledge of CSS3 and HTML5 would be helpful, but are not required.

Training Style

This jQuery training course, is instructor-led, but puts more emphasis than usual on hands-on, practical, exercises.

Hands-on practical work may comprise 60%, or more, of class time — depending on the characteristics of your particular training group.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom