Animation with JavaScript and jQuery

This course is part of JavaScript for Beginners Specialization

Instructor: William Mead

Access provided by Reliance

11,073 already enrolled

4 modules

Gain insight into a topic and learn the fundamentals.

127 reviews

Beginner level

No prior experience required

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

127 reviews

Beginner level

No prior experience required

1 week to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

What you'll learn

Introduces learners to the popular jQuery library and explores the syntactical differences between JavaScript and jQuery using small projects.

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the JavaScript for Beginners Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 4 modules in this course

With the general introduction of JavaScript in the first course, this course will focus on JavaScript libraries, specifically jQuery. The scripts will be geared toward Document Object Model (DOM) manipulation. Learners will describe the top JavaScript libraries and differentiate which would work best to implement and accelerate development of web page animation.

Course objectives include being introduced to the end product of the course – a landing page style website using jQuery elements to manipulate HTML documents and enhance user experience. Diving deeper into the landing page that will be created and break it out into individual jQuery projects. jQuery events and effects will be covered while exploring more jQuery’s relationship with HTML documents. Finally, a focus on plugins and continue to breakdown jQuery's ability to manipulate HTML and CSS.

In this module, you will be introduced to jQuery and basic jQuery syntax and we will compare it to JavaScript syntax. You will be able to plug-in the jQuery library and discuss the history of jQuery and its relationship to JavaScript. You'll also use some of the selectors and filters available in jQuery to access DOM elements. You will be able to create an interactive element that could be used on a website and be able to identify and fix coding and logic problems while working on a project. You will be able to demonstrate proficiency with both JavaScript and jQuery for accessing and manipulating elements on a web page.

What's included

21 videos8 readings1 assignment2 discussion prompts

21 videos Total 91 minutes

Welcome to this Course! 1 minute
Module Introduction 1 minute
Introduction to jQuery 8 minutes
jQuery Libraries 6 minutes
Plugging Into jQuery Libraries 6 minutes
Basic jQuery Syntax 6 minutes
Using jQuery to Access Elements 9 minutes
jQuery Events 6 minutes
Introduction to Folding Sidebar Menus Using JS 5 minutes
Challenge 1 Solution 3 minutes
Challenge 2 Solution 7 minutes
Challenge 3 Solution 3 minutes
Challenge 4 Solution 2 minutes
Challenge 5 Solution 3 minutes
Challenge 6 Solution 3 minutes
Challenge 7 Solution 3 minutes
Challenge 8 Solution 4 minutes
Introduction to jQuery Sidebar Folding Navigation 5 minutes
Getting the Next UL 5 minutes
The Whole Script 6 minutes
JavaScript and jQuery Challenges Intro 2 minutes

8 readings Total 80 minutes

A Note From UC Davis 10 minutes
Start Files: Introduction to jQuery 10 minutes
PDF of Presentation 10 minutes
Start Files: Folding Sidebar Menus with JavaScript 10 minutes
PDF of Presentation 10 minutes
Start Files: Folding Sidebar Menus with jQuery 10 minutes
PDF of Presentation 10 minutes
JavaScript and jQuery Challenge Activities 10 minutes

1 assignment Total 30 minutes

Module 1 Quiz 30 minutes

2 discussion prompts Total 20 minutes

Learning Goals 10 minutes
Module 1 Reflection 10 minutes

In this module, you will be introduced to the jQuery effects library, helper functions, animations and callback functions. You will be able to use features in jQuery to animate elements on a web page. You will be able to use the callback functions to trigger a function when an animation is completed. You will be able to create a tabbed interface in both JavaScript and jQuery.

What's included

21 videos7 readings1 assignment1 discussion prompt

21 videos Total 117 minutes

Module Introduction 1 minute
Introduction to the jQuery Effects Library 4 minutes
Example 1 Continued 5 minutes
Example 2 6 minutes
Example 2: Plugin Architecture 9 minutes
Example 3: Fading Buttons 4 minutes
Example 3: Fade To 4 minutes
Example 4: Custom Animations - Part 1 4 minutes
Example 4: Custom Animations - Part 2 6 minutes
Doing All Animations at Once 7 minutes
Introduction to Tabbed Interface Using jQuery 5 minutes
Styling the Anchor Tags 6 minutes
Tab Styling and Colors 6 minutes
Clicking and Fading Tabs 5 minutes
Whole Script 8 minutes
Getting the CSS Ready 6 minutes
Making the Tabs Work 7 minutes
New Tab and Old Tab 7 minutes
Handling the Switch 5 minutes
Fixing a Bug 6 minutes
Cleaning Up the Code 7 minutes

7 readings Total 80 minutes

Start Files: Introduction to the jQuery Effects Library 10 minutes
Additional Resources 20 minutes
PDF of Presentation 10 minutes
Start Files: Creating a Tabbed Interface with jQuery 10 minutes
PDF of Presentation 10 minutes
Start Files: Creating a Tabbed Interface with JavaScript 10 minutes
PDF of Presentation 10 minutes

1 assignment Total 30 minutes

Module 2 Quiz 30 minutes

1 discussion prompt Total 10 minutes

Module 2 Reflection 10 minutes

In this module, you will be able to use the jQuery syntax and the built-in effects library to create image sliders that could be integrated into web pages. You will also be able to compare the jQuery syntax to the JavaScript syntax by building a similar image slider using only plain JavaScript syntax and using CSS to perform the animation.

What's included

18 videos5 readings1 assignment1 discussion prompt

18 videos Total 102 minutes

Module Introduction 1 minute
Basic Slider 6 minutes
Making the Script General 6 minutes
Window Load Function 7 minutes
Click Handler for Next Button 8 minutes
Next Click Handler with If Statement 3 minutes
Challenge Solution 5 minutes
Strategy for Version 2 4 minutes
Cloning the Unordered List 5 minutes
Setting the Left Position 5 minutes
Adding a Callback Function 8 minutes
Previous Button Click Handler - Part 1 7 minutes
Previous Button Click Handler - Part 2 5 minutes
Slider Using JavaScript 6 minutes
CSS for Slides and Adding Variables 8 minutes
Adding More Variables 6 minutes
Event Handler for the Next Button 7 minutes
Solution for the Previous Button Challenge 4 minutes

5 readings Total 50 minutes

Start Files: jQuery Image Sliders 10 minutes
PDF of Presentation 10 minutes
PDF of Presentation 10 minutes
Start Files: JavaScript Image Sliders 10 minutes
PDF of Presentation 10 minutes

1 assignment Total 30 minutes

Module 3 Quiz 30 minutes

1 discussion prompt Total 10 minutes

Module 3 Reflection 10 minutes

In this module, you will be introduced to the use of timers and recursion in JavaScript and use these techniques to make interface elements that run on a timer. You practice using jQuery syntax and recursion to build a simple content rotator that could be used as an interface element on any web page.