#01 Welcome to the Learning jQuery Course

Running Time: 8:04

Welcome!

The goal of this course is to take you, you beautiful front end developer you, from someone with very little or no jQuery or JavaScript knowledge and up you to someone who is quite comfortable working with and writing …

Watch the Screencast

#02 File Setup / Linking Up jQuery

Running Time: 6:49

In this screencast I cover the absolute bare minimum setup for utilizing jQuery on a “real” website. We have an index.html file with the basic HTML5 structure stubbed out. jQuery is included as a <script></script> and then we perform a …

Watch the Screencast

#03 Select and Do

Running Time: 7:59

One way to think of jQuery is the “Select and Do” library. jQuery is particularly good at selecting elements on the page (stuff in the DOM) and then doing something. Select and do. Select and do.…

Watch the Screencast

#05 All About DOM Ready

Running Time: 8:15

We’ve talked a good bit about selectors. A jQuery selector like $(“h1”) will select all <h1></h1> elements on the page. But what about… when it doesn’t? Here’s an example of when that selector would fail:…

Watch the Screencast

#07 Do!

Running Time: 15:57

As we’ve talked about, jQuery can be thought of as a “select and do” library. We’ve talked about selecting quite a bit, so now let’s talk about some doings. Remember that pattern basically looks like this:…

Watch the Screencast

#09 Getters and Setters

Running Time: 6:27

The concept of getters and setters in JavaScript is just one of those things you should understand. They are nice in jQuery because the API is so consistent that once you get it, you can pretty much just guess how …

Watch the Screencast

#10 Explicit vs Implicit Iteration

Running Time: 11:42

Another concept video! This is “just one of those thing” you need to understand in jQuery. It is actually a bit unique to jQuery, in that other popular JavaScript libraries in the past have not done it this way.…

Watch the Screencast

#11 Animating with jQuery

Running Time: 15:54

If you first dabbled with jQuery many years ago, it might have been it’s ability to do animation. That was perhaps one of jQuery’s first big draws. These days, CSS can do animation as well with fairly decent browser support …

Watch the Screencast

#12 Callback Functions

Running Time: 5:35

Everybody’s favorite: concept video time! Callbacks are an important concept in JavaScript. They are functions that are called when an action has completed running. Then lend structure and timing to our code.

Take for example the animation we used in …

Watch the Screencast

#13 Intro To Events

Running Time: 24:53

Handling events is another one of those big reasons to use jQuery. There are some cross browser differences in how to do, which jQuery normalizes into one simple API, while enforcing some best practices.

There is essentially one method you …

Watch the Screencast

#14 Custom Events

Running Time: 11:50

Since we just talked about events, now is a good time to mention custom events. All the events that we’ve talked about so far are “real” events so to speak. Events that originate in the DOM based on real things …

Watch the Screencast

#15 Chaining

Running Time: 8:27

We’ve talked a number of times now about little touches in the jQuery API that are really quite nice. Everything is well considered and refined. Chaining definitely falls into that category. Once you start using it and understand it, it …

Watch the Screencast

#16 Intro To Ajax

Running Time: 13:15

Ajax ranks pretty high up there on the biggest reasons to use jQuery. Not only does jQuery fix the cross-browser issues, it makes the syntax very easy to use and understand.

In this video we take a stab at explain …

Watch the Screencast

#17 POSTing with Ajax

Running Time: 9:20

We talked about GET in the last video but didn’t give POST enough attention. So I thought we’d do that here. The big difference with POST is that you nearly always need to pass along data with the request. That …

Watch the Screencast

#18 Ajax and JSON

Running Time: 7:39

There is a good chance that out in the “real world”, the #1 thing you use Ajax for is sending and receiving JSON data. And for good reason. JSON doesn’t presume any visual structure like HTML does. It’s just raw …

Watch the Screencast

#19 It’s Just JavaScript

Running Time: 13:30

One thing I want to make absolutely clear in this series is that none of us should be anti vanilla JavaScript. “Vanilla” meaning “raw” or “native” JavaScript. JavaScript that runs in the browser without any frameworks or libraries or anything …

Watch the Screencast

#21 Just Change Classes!

Running Time: 16:19

If you learn any major bit of front end architecture philosophy from this series, learn this one. Just change classes. In this screencast we start going down a major rabbit hole of JavaScript only to stop, catch ourselves, and use …

Watch the Screencast

#22 The Need for Templating

Running Time: 12:35

Templating is an important part of working with JavaScript applications. It’s fairly common that data is available to you, but not in a format that is ready display on screen. That is commonly (but not always) data in the JSON …

Watch the Screencast

#23 Templating with Handlebars

Running Time: 12:25

We left off in the last video with a bit of a tangled mess. All in one block of JavaScript we were mixing data retrieval, display and business logic, and templating. In this video we’re going to start breaking those …

Watch the Screencast

#25 Getting Organized!

Running Time: 8:40

We’ve done a pretty good job so far of getting organized. Getting our HTML broken out in a template was a big step. We’re longer muddying the waters so to speak. Our different bits of functionally in JavaScript are broken …

Watch the Screencast

#26 Using a jQuery Plugin from the Wild

Running Time: 21:02

Everyone has seen a super cool jQuery plugin out there on the wild, wild internet right? Perhaps you only became interested in actually learning more about jQuery and JavaScript by finding a jQuery plugin and trying to use it on …

Watch the Screencast

#27 Building a Simple jQuery Plugin

Running Time: 11:40

Now that we’ve looked at using jQuery plugins, it is absolutely worth understanding how to build them as well. We already briefly touched on the fact that you can extend the native jQuery object if you want to. Just like:…

Watch the Screencast

#29 Getting Production Ready

Running Time: 20:53

We’re going to bring it back out to a normal text editor in this screencast, just as we started. In a “real world” situation, these things are true:

  1. You want to break up your JavaScript into as many small files
Watch the Screencast

#30 Series Wrapup

Running Time: 2:11

You made it!

Thanks so much for taking the course. I hope you’ve learned enough about jQuery and JavaScript that your confidence level in it has risen and you know there is nothing to be afraid of.

Remember, the jQuery

Watch the Screencast