jQuery Mastery and Plugins
4.3 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
391 students enrolled
Wishlisted Wishlist

Please confirm that you want to add jQuery Mastery and Plugins to your Wishlist.

Add to Wishlist

jQuery Mastery and Plugins

Manipulate web interfaces with ease, build your own plugin, and more...
4.3 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
391 students enrolled
Created by Tom Rutka
Last updated 7/2016
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Make a Website Interactive
  • Learn jQuery animations
  • Manipulate the web Document Object Model
  • Learn about the Protoype model
  • Publish Your Own Plugin
  • Interactive Menus using Keyboard shortcuts
  • AJAX methods for getting data
View Curriculum
  • Computer

UPDATE: Discount Coupon on my blog RunAstartup !!

Over 4 hours of succinct video tutorials + source code!

Want to make a website interactive but don't know where to start? Maybe javascript intimidates you... With jQuery you can jumpstart your user interaction skills easily.

For designers or developers who want to manipulate the web - this is for you!

Learn the basics of jQuery, get the proper resources, and start making projects. User Interaction and Experience is more popular than ever and designers are high in demand!

jQuery is the most popular framework because of it's flexibility and cross-browser compatibility. Forget about writing extra code for every specific browser, jQuery does it for you. What used to require 30 lines of code in javascript can be done in 3.

What else... Why should you take this course?

Well you might have already seen introductions and felt overwhelmed with the amount of functions, selectors, filters, etc... I agree, there's a lot, but honestly you're not going to need to know all of them. 80%% of the time you're going to use selectors by id and class name, then attach event listeners to them.

Would you rather waste time finding every selector available or start manipulating HTML and CSS in a way that makes sense. This is what this course provides.

Current Projects include:

  • Input tag validation
  • Expanding Collapsing Elements
  • Optical Flare Animation
  • Including custom jQuery files into WordPress
  • Publishing your own jQuery Plugin
  • Mouse detection and Key Press Listeners
  • Changing View for Responsive Design
  • Asynchronous Page Loading with AJAX

(If you have questions or concerns, send me a message :)

Who is the target audience?
  • Anybody that wants to make their website interactive
  • Designers
  • Developers
Compare to Other jQuery Courses
Curriculum For This Course
23 Lectures
Setting Up
2 Lectures 13:14
You will need software to develop jQuery scripts and web browsers with plug-ins for debugging. 

Sublime Text is a new popular code editor http://sublimetext.com

Google Chrome http://google.com/chrome http://google.com/chrome includes debugging tools by default or you can use Firefox and download Firebug for some different features. http://mozilla.org/firefox
Preview 06:34

Learn where you should place your jQuery code and how to link external scripts.

Then find out the anatomy of a jQuery call.
jQuery Script Placement & Anatomy
jQuery Basics
2 Lectures 16:21
Learn about the focus() and blur() event listeners.  Also addClass() and RemoveClass()

Download the source code Jquery Basics zip (file).  Start with index1.html
Preview 07:42

Make your DIVs expandable and collapsible with the slideToggle() function.

Expanding and Collapsing Elements
Creating and Animating an Optical Flare
6 Lectures 43:39
FIrst download the source code for this section.  It is the file named flaredemo (file)

I provided HTML and CSS to for this project, so open the index1.html file to begin.

We will use jQuery to create HTML elements. You can also use the included cheat sheet for quick reference.
Preview 04:10

Learn how to apply CSS styles using the css() method and chain them together.
Setting CSS Styles and Chaining Functions

Find out how to get an element's position and width.  Then see alternative methods to get the measurements in relation to the document body with regard for margins.
Getting Element Positions and Width

Here you will bind a function to the mouse click of an HTML button.  This is known as an event listener because the web element (button) listens to a specific event (mouse click) to fire a function (animate).
Adding an Event Listener and Animate Functions

When an HTML element has an ID attribute it should be unique so we will use a counter to do that.

Also since an HTML element is generated on-the-fly, we will remove it from the DOM once the animation is finished.
Generating Unique IDs and Removing Elements

Take advantage of animate() function's optional parameters to change the speed of your animation and nesting the function to further animations.
Additional Animation Parameters and Nesting
Integrating a Custom Script into WordPress
1 Lecture 11:24
1. Upload your script to your theme directory /wp-content/themes/your-theme/js/
2. Open the functions.php file in your theme directory /wp-content/themes/your-theme/functions.php
3. Create custom function: function adding_scripts() { }; where you will include lines 3-4
3. Register the script file: wp_register_script('your-script-name', 'script-file-url', 'jquery');
4. Output the script to :  wp_enqueue_script('your-jquery-name');

5. Execute: add_action('wp_enqueue_scripts', 'adding_scripts');

Edit Theme Functions File to Add the Script
AJAX - Asynchronous Javascript XML
1 Lecture 13:45

For AJAX functionality you will need to run your code in on a server.

If you don't have a local server environment set up, you can do it with WAMP for windows available here:


or for the Macintosh you can use MAMP available here:


Preview 13:45
Advanced Utilities
2 Lectures 25:38
Utility Functions for Less Code

The noConflict Method for Other Javascript Libraries
Change View Menu with Mouse or Keyboard
5 Lectures 01:02:03

Generating Elements and Mouse Detection for Displaying the Menu

Change View Functions - Resizing Elements with Animation

Here's the official and most comprehensive reference for keyboard event properties. W3C Website

Another reference for the Keyboard event is available on Mozilla Website

Advanced Event Listener Binding with Targeting and Switch Cases

Keyup and Keydown Event Listeners for Keyboard Shortcuts
Course Summary
1 Lecture 00:00
Outline of Your Accomplishments
4 pages
Authoring Your Own Plugin and Publishing It (Expired)
3 Lectures 38:58

Learn how to take the function from the previous lesson (section 3) and adapt it to be a plugin. Although, knowing the previous lesson is recommended, it is not required to create a plugin.
Two important things you will learn in this lesson is:

  • Prototype
  • Extend

Start with the file plugin.html

Using Prototyping and Extend to Make the Plugin (Expired)

Preparing the Files Needed for Publishing (Expired)

Ensure you've completed the previous lecture to prepare the files.

You'll need GitHub software on your computer and be registered on the website github.com

Using GitHub for Registration (Expired)
About the Instructor
Tom Rutka
4.1 Average rating
90 Reviews
5,510 Students
3 Courses
Software Engineer + Instructor

Tom Rutka is a front end engineer in silicon valley specializing in improving usability, performance, click-through conversions, and optimization. His code can be found everywhere from jQuery plugins, to courseware, to early stage startups.