jQuery

Learn how to make your websites interactive and create animations by using jQuery.
Lessons
0%
Projects
14 available
Quizzes
5 available
Start

enrolled students

estimated course time

required technical level

Unit 1: Introducing jQuery

Lesson: Introduction to jQuery

You know how to create websites, but not how to make them respond to user interaction. For that, we'll be taking advantage of a new tool: jQuery!

Unit 2: jQuery Functions

Lesson: jQuery Functions and Selectors

Now that you know a little jQuery, let's dive into some details: how functions work and how we can select a wider range of HTML elements to manipulate.

Unit 3: Dynamic HTML

Lesson: Modifying HTML Elements

You know how to change the styling of an HTML element using jQuery. But did you know you could change the element itself?

Unit 4: jQuery Events

Lesson: jQuery Events

We've covered a few jQuery events, such as .click() and .hover(). In this lesson, we'll take a closer look at jQuery events and introduce you to even more!

Unit 5: jQuery Effects

Lesson: jQuery Effects

We've covered a few jQuery effects, such as .hide() and .fadeOut(). In this lesson, we'll take a closer look at jQuery effects and introduce you to even more!

Unit 6: jQuery Projects

Project: Bonsai

Make a meme generator using the .keyup event, and .text().

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Pocketbook

Learn to use the .submit event to make an error message appear when form fields are filled incorrectly.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Threadly

In this project you'll help create a commenting service using the .keypress event, .text(), and .appendTo.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Forecast

In this project you'll use click events to help a weather service app display hourly forecasts.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Armando Peréz

In this project you'll learn to add filtering to a portfolio page using .addClass and .removeClass.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: ListEasy

In this project you'll help a task management app made a to-do list interactive using the .submit event to .appendTo() new items and .click event to .remove() items.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Birdman

Build a dropdown menu using a click event and .toggle() animation method.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Feedster

Practice more animation methods using a click event, .toggle() notification bell menu, and .toggleClass +1 button.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Gameboard

Get practice using the click event, .toggle share button, .toggleClass notification bell, and .children() to show details in this project.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: MOVE

In this project you'll use jQuery UI autocomplete.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: SpeakEasy

In this project you'll use Annyang to enhance a task management app with voice commands.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Milford School

Update a sign in page to include drop-down menus and appropriate error messages.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Madison Square Market

In this project, learn to add dropdown menus to a home page.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: MOVE Gear

Learn to add a drop-down menu, and accordion menu to an e-commerce page.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
JQUERY FINAL PROJECT
Exclusive for Pro: JQuery Final Project
Test what you’ve learned in the JavaScript and jQuery by working on upgrading your portfolio page. This project builds off of the final project for the HTML & CSS track, so you’ll continue to build outside Codecademy and come out with a project you can show off.
Upgrade to Codecademy Pro