jQuery in Action: Build 8 jQuery Projects

jQuery from scratch A 100% jQuery Hands-On Course! jQuery Examples, Practice Exercises, Quizzes and 8 jQuery Projects
4.4 (77 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,295 students enrolled
$19
$100
81% off
Take This Course
  • Lectures 90
  • Length 9.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course Description

*** 9.5 hours of content***

***Last Updated on 3rd November 2016: A New Project (Animated Tooltip) is Added***

***Quizzes, Exercises, Hands-On Practices and Unique Projects are Included***

---------------------------------------------------------------------------------------------------------------------------

Do you want to accomplish amazing things by writing just a few lines of code? Do you want to write complicated JavaScript functions easily and quickly? Do you want to create cool visual effects and animations? Do you want to develop impressive games and professional user interfaces easily? Do you want to add nice and unique features to your websites and applications?

Then, join this 100% hands-on jQuery course and ease the pain of web development and increase your productivity as a web developer.

jQuery is a very popular JavaScript library which makes front-end web development easy. As its official tag line says, it is a "Write Less, Do More" JavaScript library. jQuery simplifies JavaScript programming. You can implement a complex functionality in just 5 or 6 lines of jQuery code where it might require 25 or more lines of JavaScript code to implement the same functionality.

---------------------------------------------------------------------------------------------------------------------------

Adrian Willsher says

"This is a great course for beginners learning jQuery. The instructor is clear and has an excellent grasp on everything presented. The practical applications presented in the second half are good. I have already purchased and am looking forward to the instructor's next jQuery course."

Mihai Enuica says

"A very good, useful course, well taught with a interesting jquery projects."

eniyenzima Emmanuel Niyenzima says

"Best jQuery class at udemy!"

Veeranjaneyulu k says

"I don't have any idea about jQuery . After Completing this course, i am able to do my own scripting using jQuery. Thank you for the one of the best course for JQuery. I am excepting more sessions on angular js ,java script."

---------------------------------------------------------------------------------------------------------------------------

 jQuery in Action: Build 8 jQuery Projects course helps you develop unique and nice jQuery projects that you can use in your websites, web applications and mobile applications. You are going to develop unique user interface designs, cool visual effects and animations, nice features for your website and even games in this course using jQuery.

The Course Structure is as follows:

First you will understand what jQuery is and why you should learn jQuery. We will also compare JavaScript and jQuery by implementing a functionality to understand why jQuery is a "Write Less, Do More" library. Then, you will learn how to set up the jQuery development environment and the basic syntax of jQuery. Shhh.....I am also going to share a secret with you which will help you write jQuery code easily.

Then come the jQuery Selectors. Selectors will help you select the elements upon which you need to perform an action. Next is the Events section. The events are the actual action that is performed. Later, you will learn how to use different Effects and Animations to energise your pages. DOM Manipulation and DOM Traversal are two important sections where we discuss how to handle the web page on the fly.

Then comes, the Let's Develop Section where you are going to develop a number of jQuery projects that too from SCRATCH. Trust me, this section is going to boost your confidence as a front-end web developer. Different jQuery Projects available in Let's Develop section are

  1. Accordion
  2. Slide Panel
  3. New Ticker
  4. Photo Zoom In/Zoom Out Effect
  5. Memory Game
  6. Image Slider
  7. Animated Graph
  8. Animated Tooltip

So, what are you waiting for?? Join this wonderful jQuery course NOW and let's get started !!!

What are the requirements?

  • Basic knowledge of HTML, CSS and JavaScript would be helpful

What am I going to get from this course?

  • Learn jQuery from scratch
  • Write complicated JavaScript functions easily, quickly and effectively
  • Create cool visual effects and animations
  • Create impressive games easily
  • Build professional user interfaces
  • Add nice and unique features to websites
  • Build high performing jQuery applications
  • Accomplish amazing things by writing just a few lines of code

What is the target audience?

  • Anyone who wants to learn jQuery from scratch
  • Anyone who wants to improve JavaScript skills
  • Anyone who wants to improve jQuery skills from basics to advanced
  • Web developers and designers who want to improve their productivity

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Be Familiar with jQuery (Introduction to jQuery)
04:11

This is an overview of different projects that you are going to develop as part of this jQuery course.

Article

Get the list of software you need to proceed with this jQuery course. You require only a text editor and browser to proceed.

03:44

Understand what jQuery is and why you should use it.

06:44

Compare JavaScript and jQuery to know how accurate the official tag line of jQuery "Write Less, Do More" is. You will find that you need just 5 or 6 lines of jQuery code where JavaScript required 25 to 30 lines of code to implement the same functionality.

Quiz: Introduction to jQuery
3 questions
Section 2: Be Ready to Start (Basics of jQuery)
10:20

This lecture explains how to setup the jQuery development environment. You can either reference jQuery online or download the required files and reference it locally.

04:05

This lecture explains the basic syntax of jQuery. It helps you a lot as you start writing your jQuery code.

02:48

This lecture explains the importance of $(document).ready() event. This jQuery method makes sure that the DOM is ready before you run the code.

06:10

This lecture shares a very secret tip that will help you write your jQuery code easily and quickly.

Quiz: Basics of jQuery
5 questions
Section 3: Select the Elements upon which to Act (jQuery Selectors)
04:13

This lectures explains the all selector. The symbol * is used to select all the elements on a webpage.

02:01

You will learn how to select elements using the tag name. You just have to specify the tag name within double quotes.

00:52

You will learn how to combine different selectors at a time. Different selectors are to be separated by comma.

02:04

You will learn how to select an element using its id. You need to specify the symbol # just before the id.

00:52

You will learn how to select an element using its class name. You need to specify a . (dot) just before the class name.

03:23

This is a hands-on practice implemented using class selector.

02:00

You will learn how to select the currently active element using this selector. This selector should be specified without double quotes.

06:13

This is a hands-on practice implemented using this and tag name selectors.

05:30

You will learn how to select elements that have a specific attribute, elements that have a specific attribute value and elements that do not have a specific attribute value.

03:22

You will learn how to select elements that have an attribute value that starts with the specified value, that ends with the specified value and that contains the specified value.

05:22

You will learn how to select an element that has an attribute value with the specific word.

07:52

You will learn how to select the first element, last element, even indexed element and odd indexed element.

02:37

You will learn how to select elements with index equal to the specified value, index less than the specified value and index greater than the specified value.

07:15

You will learn to select element that is the first child and also the element that is the last child.

02:28

You will learn how to select the nth child (where n is specified) and also the nth child from last.

03:36

You will learn how to select the first child of specific type, last child of specific type, nth child of specific type and nth child from the last of specific type.

03:29

You will learn how to select an element that is the only child of its parent and also the element that is the only child of specific type.

07:16

You will learn how to select a direct child, descendent, general sibling and adjacent sibling.

07:05

You will learn how to select elements in a form.

12:11

You will learn how to select elements based on their state.

06:32

You will learn how to select elements based on the content.

Quiz: Selectors
4 questions
Exercises: Selectors
Article
Section 4: Let the Actions Happen (jQuery Events)
03:33

This is an introduction to events.

09:55

You will learn about different mouse events.

03:27

You will learn about different keyboard events.

06:54

You will learn how to use focus, blur, focusin and focusout events.

09:20

You will learn how to use change, select and submit events.

05:30

You will learn about different browser events.

11:40

You will learn how to attach event handlers to different elements.

04:10

jQuery allows you to attach more than one method to the same element. You will learn how to do that.

Quiz: Events
3 questions
Exercises: Events
Article
Section 5: Energise Your Pages (jQuery Effects and Animations)
05:54

This is an introduction to effects and you will learn what a callback function is.

04:03

You will learn how to use the basic effects such as hide, show and toggle.

04:18

You will learn how to use fadeIn, fadeOut and fadeToggle events.

01:51

You will learn how to use slideUp, slideDown and slideToggle events

11:05

You will learn how to create animations and effects on your own.

Quiz: Effects
3 questions
Section 6: Handle the DOM (DOM Manipulation)
06:58

Learn how to get or set the HTML value of elements.

03:43

Learn how to get or set the text value of elements.

05:24

Learn how to get or set value for the value attribute of form elements.

05:50

Learn how to set values for attributes and properties.

06:18

Learn how to add content or event new element itself.

02:41

Learn how to remove element from DOM.

03:13

You will learn how to modify the content in a DOM.

11:28

You will learn how to change the style (appearance).

Quiz: DOM Manipulation
4 questions
Exercises: DOM Manipulation
Article
Section 7: Move through the DOM (DOM Traversal)
07:51

You will learn how to use different methods like parent, parents, parentsUntil etc.

05:56

You will learn how to use next, nextAll, prev methods etc.

03:16

You will learn how to use methods such as children and find.

07:25

You will learn how to use different filtering methods such as first, last, eq, filter, not, slice and has.

Quiz: DOM Traversal Methods
6 questions
Section 8: jQuery Plugins
01:53

Learn what a plugin is (in general) and what a jQuery plugin is (in specific)

Find and Make Use of Existing Plugins
03:35
17:51

Learn to create basic jQuery plugins

Advanced Plugin Concepts - Part 1
04:22
Advanced Plugin Concepts - Part 2
10:28
Advanced Plugin Concepts - Part 3
04:18
Advanced Plugin Concepts - Part 4
06:57
Section 9: Let's Develop (Effects, Games and User Interfaces Developed from Scratch)
11:11

Build a professional user interface: Accordion. Implement the basic functionality of accordion using jQuery in this first part.

10:53

Make the accordion look more professional using CSS

03:38

Implement the basic functionality of a slide panel

11:36

Make the slide panel more professional using CSS

11:13

Add a nice and unique feature to your website: News Ticker. Implement the basic functionality of a news ticker.

05:44

Style the news ticker using CSS

10:55

Create a cool visual effect: photo zoom in/zoom out.

11:05

Style the front end of the memory game

13:01

Add images dynamically using jQuery

11:31

Shuffle the position of images so that each time same image appears in different positions

13:41

Implement the actual functionality that checks whether two opened images are matching.

05:11

Implement the Reset Game option

Image Slider or Photo Gallery from Scratch: Part 1
12:16
Image Slider or Photo Gallery from Scratch: Part 2
09:56
Image Slider or Photo Gallery from Scratch: Part 3
10:26
Image Slider or Photo Gallery from Scratch: Part 4
11:26
Image Slider or Photo Gallery from Scratch: Part 5
14:36
03:28

A minor correction in the code to make the IDs unique

11:59

Learn how to create an animated graph easily using jQuery

11:34

Learn how to create an animated graph easily using jQuery

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Crypters Infotech, Career Enhancement Training Solutions

Crypters Infotech is a division of Crypters Infosystems and Solutions Pvt. Ltd IT Company. We offer industry-oriented training that helps even fresh heads to become IT giants. Our professional team of trainers provide high quality training with an outlook towards future. We provide training mainly in web development and mobile app development.

Ready to start learning?
Take This Course