jQuery Basics

jQuery Basics covers why you'd want to use jQuery, what it is and how to include it in your projects. You'll build several projects over the course to give you the confidence to integrate jQuery in your own projects and add that level of flair and interactivity to any site you work on.

Introduction to jQuery

In this stage we'll cover the whys, whats and hows of jQuery. You'll learn why you would want to use jQuery, what jQuery is and how to include it in your projects.

• jQuery Basics Overview0:54
• Why jQuery? A Brief History of Front-end Development2:27
• What is Unobtrusive JavaScript?2:38
• What is jQuery?9:05
• Hiding and Showing Elements With jQuery3 objectives
• What is the DOM?5:32
• jQuery Documentation: What Does it Mean?7:55
• Ways to Include jQuery in a Project9:52
• Include jQuery in a Project1 objective

Creating a Spoiler Revealer

Have you ever had something spoilt by an online article? It doesn't have to be like that. Learn how to create a spoiler revealer on your site with jQuery.

• Preparation3:45
• Plan2:29
• Perform: Part 14:18
• Using append()1 objective
• Perform: Part 23:31
• Using click()2 objectives
• Perform: Part 32:47
• Using remove()2 objectives
• Perfect5:06
• Review5 questions

Creating a Simple Lightbox

Image galleries don't need to be plain and boring. Instead of sending users to a dead end that they have to get back from, learn how to create a lightbox overlay for an image gallery with jQuery.

• Preparation4:18
• Plan3:21
• Perform: Part 17:50
• Preventing the Default Behavior and Using attr()2 objectives
• Perform: Part 26:59
• Creating and Appending Detached DOM elements1 objective
• Perform: Part 37:10
• Adding New Attribute Values with attr()1 objective
• Perform: Part 48:19
• A Better Caption1 objective
• Perfect0:20
• Fixing the Simple Lightbox2 objectives

Creating a Mobile Drop Down Menu

Desktop navigation isn't optimized for the mobile screen. We'll turn a traditional menu in to a mobile friendly one by creating a simple drop down menu with jQuery.

• Preparation3:30
• Plan5:56
• Perform: Part 18:06
• Using each()1 objective
• Setting a value1 objective
• Perform: Part 22:48
• Getting a value1 objective
• Perform: Part 311:58
• Using parent(), hasClass() and prop()2 objectives
• Perfect4:10
• Using change()2 objectives

Creating a Password Confirmation Form

Giving useful feedback to users when they need it gives a better user experience. Learn how to use keyboard events in jQuery to compare passwords in two fields and show hints if they don't match.

• Preparation3:12
• Plan2:42
• Perform: Part 19:33
• Using next()1 objective
• Perform: Part 29:06
• Using focus() and keyup()1 objective
• Perfect11:15
• Improving the form validation2 objectives

Creating a Simple Drawing Application

HTML5 came with an array of new elements such as the canvas element. Learn how to use mouse events with jQuery to create a simple drawing application.

• Preparation4:25
• Plan6:20
• Perform: Part 17:37
• Using siblings(), removeClass() and addClass()3 objectives
• Perform: Part 29:00
• Using toggle()1 objective
• Perform: Part 39:17
• Using on()1 objective
• Perform: Part 45:59
• How to select a plain DOM element2 questions
• Perform: Part 59:58
• Mouse Events3 questions
• Perfect2:28
• More Mouse Events1 question