Animation with JavaScript and jQuery
Animation with JavaScript and jQuery
This course is part of JavaScript for Beginners Specialization
Instructor: William Mead
11,189 already enrolled
Included with
128 reviews
128 reviews
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
4 assignments
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- 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.
What's included
13 videos5 readings1 assignment2 discussion prompts
13 videos•Total 60 minutes
- Module Introduction•1 minute
- Example Script #1 - Part 1•6 minutes
- Example Script #1 - Part 2•4 minutes
- Example Script #2•3 minutes
- Example Script #3: Recursion•5 minutes
- Converting a Slider•3 minutes
- Putting Slides on a Timer Solution - Part 1•6 minutes
- Putting Slides on a Timer Solution - Part 2•7 minutes
- Project Set-up•7 minutes
- Starting the Script•5 minutes
- The If/Else Statement - Part 1•6 minutes
- The If/Else Statement - Part 2•6 minutes
- Course Summary•1 minute
5 readings•Total 50 minutes
- Start Files: Introduction to Timers & Recursion•10 minutes
- PDF of Presentation•10 minutes
- PDF of Presentation•10 minutes
- Start Files: Recursive Content Rotator•10 minutes
- PDF of Presentation•10 minutes
1 assignment•Total 30 minutes
- Module 4 Quiz•30 minutes
2 discussion prompts•Total 20 minutes
- Module 4 Reflection•10 minutes
- Self-Reflection•10 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Offered by
Explore more from Mobile and Web Development
- Status: Free TrialU
University of California, Davis
Course
Guided Project
- Status: Free TrialU
University of Michigan
Course
Why people choose Coursera for their career
Learner reviews
- 5 stars
84.37%
- 4 stars
12.50%
- 3 stars
2.34%
- 2 stars
0%
- 1 star
0.78%
Showing 3 of 128
Reviewed on Dec 11, 2021
Great intro to JQuery and exploration of different JavaScript functions
Reviewed on Feb 21, 2023
The projects and simultaneously working it in both jquery and javascript is useful.
Reviewed on Jan 25, 2022
I really actually came a big step closer to have usefull javascipt coding skills!
Advance your career with an online degree
Earn a degree from world-class universities - 100% online
Frequently asked questions
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.
More questions
Financial aid available,