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.
387 students enrolled
50% off
Take This Course
  • Lectures 23
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2013 English

Course Description

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 :)

What are the requirements?

  • Computer

What am I going to get from this course?

  • 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

Who is the target audience?

  • Anybody that wants to make their website interactive
  • Designers
  • Developers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Setting Up
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
Learn where you should place your jQuery code and how to link external scripts.

Then find out the anatomy of a jQuery call.
Section 2: jQuery Basics
Learn about the focus() and blur() event listeners.  Also addClass() and RemoveClass()

Download the source code Jquery Basics zip (file).  Start with index1.html

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

Section 3: Creating and Animating an Optical Flare
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.
Learn how to apply CSS styles using the css() method and chain them together.
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.
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).
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.
Take advantage of animate() function's optional parameters to change the speed of your animation and nesting the function to further animations.
Section 4: Integrating a Custom Script into WordPress
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');

Section 5: AJAX - Asynchronous Javascript XML

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:


Section 6: Advanced Utilities
Utility Functions for Less Code
The noConflict Method for Other Javascript Libraries
Section 7: Change View Menu with Mouse or Keyboard
Overview of functionality, HTML and CSS
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

Keyup and Keydown Event Listeners for Keyboard Shortcuts
Section 8: Course Summary
Outline of Your Accomplishments
4 pages
Section 9: Authoring Your Own Plugin and Publishing It (Expired)

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

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Tom Rutka, 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 fone everywhere from jQuery plugins, to courseware, to early stage startups.

Ready to start learning?
Take This Course