Animation with JavaScript and jQuery

This course is part of JavaScript for Beginners Specialization

Instructor: William Mead

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

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

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

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

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 videosTotal 90 minutes

Welcome to this Course!0 minutesPreview module
Module Introduction0 minutes
Introduction to jQuery7 minutes
jQuery Libraries6 minutes
Plugging Into jQuery Libraries5 minutes
Basic jQuery Syntax5 minutes
Using jQuery to Access Elements8 minutes
jQuery Events5 minutes
Introduction to Folding Sidebar Menus Using JS4 minutes
Challenge 1 Solution3 minutes
Challenge 2 Solution7 minutes
Challenge 3 Solution2 minutes
Challenge 4 Solution2 minutes
Challenge 5 Solution3 minutes
Challenge 6 Solution2 minutes
Challenge 7 Solution2 minutes
Challenge 8 Solution3 minutes
Introduction to jQuery Sidebar Folding Navigation4 minutes
Getting the Next UL4 minutes
The Whole Script5 minutes
JavaScript and jQuery Challenges Intro1 minute

8 readingsTotal 80 minutes

A Note From UC Davis10 minutes
Start Files: Introduction to jQuery 10 minutes
PDF of Presentation10 minutes
Start Files: Folding Sidebar Menus with JavaScript10 minutes
PDF of Presentation10 minutes
Start Files: Folding Sidebar Menus with jQuery10 minutes
PDF of Presentation10 minutes
JavaScript and jQuery Challenge Activities10 minutes

1 assignmentTotal 30 minutes

Module 1 Quiz30 minutes

2 discussion promptsTotal 20 minutes

Learning Goals10 minutes
Module 1 Reflection10 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 videosTotal 116 minutes

Module Introduction0 minutesPreview module
Introduction to the jQuery Effects Library4 minutes
Example 1 Continued4 minutes
Example 25 minutes
Example 2: Plugin Architecture8 minutes
Example 3: Fading Buttons4 minutes
Example 3: Fade To4 minutes
Example 4: Custom Animations - Part 14 minutes
Example 4: Custom Animations - Part 25 minutes
Doing All Animations at Once6 minutes
Introduction to Tabbed Interface Using jQuery5 minutes
Styling the Anchor Tags5 minutes
Tab Styling and Colors6 minutes
Clicking and Fading Tabs4 minutes
Whole Script7 minutes
Getting the CSS Ready5 minutes
Making the Tabs Work6 minutes
New Tab and Old Tab7 minutes
Handling the Switch4 minutes
Fixing a Bug6 minutes
Cleaning Up the Code7 minutes

7 readingsTotal 80 minutes

Start Files: Introduction to the jQuery Effects Library10 minutes
Additional Resources20 minutes
PDF of Presentation10 minutes
Start Files: Creating a Tabbed Interface with jQuery10 minutes
PDF of Presentation10 minutes
Start Files: Creating a Tabbed Interface with JavaScript10 minutes
PDF of Presentation10 minutes

1 assignmentTotal 30 minutes

Module 2 Quiz30 minutes

1 discussion promptTotal 10 minutes

Module 2 Reflection10 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 videosTotal 101 minutes

Module Introduction0 minutesPreview module
Basic Slider6 minutes
Making the Script General5 minutes
Window Load Function7 minutes
Click Handler for Next Button8 minutes
Next Click Handler with If Statement3 minutes
Challenge Solution5 minutes
Strategy for Version 24 minutes
Cloning the Unordered List4 minutes
Setting the Left Position4 minutes
Adding a Callback Function7 minutes
Previous Button Click Handler - Part 17 minutes
Previous Button Click Handler - Part 25 minutes
Slider Using JavaScript6 minutes
CSS for Slides and Adding Variables8 minutes
Adding More Variables5 minutes
Event Handler for the Next Button7 minutes
Solution for the Previous Button Challenge4 minutes

5 readingsTotal 50 minutes

Start Files: jQuery Image Sliders10 minutes
PDF of Presentation10 minutes
PDF of Presentation10 minutes
Start Files: JavaScript Image Sliders10 minutes
PDF of Presentation10 minutes

1 assignmentTotal 30 minutes

Module 3 Quiz30 minutes

1 discussion promptTotal 10 minutes

Module 3 Reflection10 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.