Projects In JavaScript & JQuery

Learn JavaScript and JQuery Building Ten Projects
4.3 (445 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.
8,284 students enrolled Bestselling in JQuery
$19
$50
62% off
Take This Course
  • Lectures 50
  • Length 9 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 10/2014 English

Course Description

JavaScript is the world's most popular language and is widely used in almost all web projects. JQuery has also become hugely popular within few years of its launch. These two technologies are must for any web developer and in order to help you master them in a practical manner we have created this elite course where you will use these technologies to create actual projects and will learn the nuances of their usage in real world.

The following projects have been selected for this course

CH1: Simple JavaScript Quiz

Description: We will start with a fairly simple project of a one page, multiple choice JavaScript quiz. In this projct we will look at some of the essentials when it comes to HTML5, CSS and JavaScript. We will look at event handlers, variables and even 'for loops' and arrays

Features/Technologies: HTML5, CSS3, JavaScript, Variables & Arrays, Loops, Responsive Design

CH2: jQuery Content Slider

Description: jQuery is well known for thigs like image gallerys, sliders, scrollers, etc. We will be building a very clean application which will allow us to click a 'next' button to fade in the next slide and a 'prev' button to go in the reverse direction. We will use the fadeIn() and fadeOut() animation methods to do this

Features/Technologies: HTML5, CSS3, JavaScript, Lists, jQuery selectors, methods like addClass() and removeClass() and animation methods like fadeIn() and fadeOut()

CH3: YouTube Search Engine

Description: In this project we will use the YouTube Data API v3 to build a video search engine. We will use the 'search . list' method to do this. We will also implement 'FancyBox', which is a lightbox script. This will allow use to have the video open on our site instead of being redirected to YouTube.

Features/Technologies: HTML5, CSS3, JavaScript, Youtube Data API v3, jQuery $.get() request, inserting HTML via html() method

CH4: FAQ Accordian Slider

Description: We will build a content accordion. This is great for an FAQ section but ofcourse could be used in many different contexts. We will use the slideToggle() method and some others

Features/Technologies: HTML5, CSS3, JavaScript, jQuery, Lists, jQuery Selectors, jQuery slide methods

CH5: Ajax PHP Shoutbox

This project will implement many technologies to build a shoutbox/chat module. We will build a backend MySQL database and connect via PHP. We will then make a request to another .php file which will insert the data into the correct tables

Features/Technologies: HTML5, CSS3, JavaScript, jQuery, AJAX, PHP, MySQL, PHPMyAdmin

CH6: Apple Style Thumbslider

In this project we will build an image slider much like ones you see on Apple's website and apps. It will use thumbnail banivation as well as autoscroll

Features/Technologies: HTML5, CSS3, JavaScript, jQuery, Custom animate() method

CH7: Create a jQuery Plugin

In this chapter we will actually create a simple jQuery plugin, get it ready and then upload it to the jQuery. com plugin registry. We will also look at using Git and Github. com

Features/Technologies: HTML5, CSS3, JavaScript, jQuery, jQuery plugin conventions, Git, Github, Command line utility

CH8: jQuery Portfolio Gallery

We will build an image gallery with a few features such as categorization, lightbox effect and overlay effect

Features/Technologies: HTML5, CSS3, JavaScript, jQuery, Lightbox2 Plugin

CH9: jQuery Mobile App

This will be our first mobile based app. We will use HTML5 and jQuery Mobile framework. You will learn how to build multi-page templates with jQuery Mobile. We will be building a miletracker app which will allow you to enter run or jog mileage and the date along with the ability to update and delete. localStorage will be used for storing data

Features/Technologies: HTML5, CSS3, JavaScript, jQuery, jQuery Mobile, localStorage api

CH10: Tic Tac Toe

This will be a nice and simple application. It is a very basic tic tac toe game. It will implement a few rules and conditionals for things like not being able to click in the same square twice.

Features/Technologies: HTML5, CSS3, jQuery, JavaScript, Conditionals

What are the requirements?

  • Basic Javascript, HTML and CSS should be known to the student

What am I going to get from this course?

  • Master JavaScript for Web projects
  • Learn the use of JQuery
  • Use JavaScript and jQuery in professional projects
  • Design web projects more effectively and elegantly

What is the target audience?

  • Basic Knowledge of Web programming is Expected. This is not a beginner's course
  • Intermediate Web programmers and developers shall find this course extremely useful

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: Introduction
03:48

Introduction to the course

Section 2: Simple JavaScript Quiz
01:31

Introduction to the Project and code structure

18:26

Basic JavaScript for the Project

11:26

Creating the essential HTML for the project

07:15

Building the CSS for the Project

17:54

Final JavaScript code for the Project

Section 3: jQuery Content Slider
02:15

Introduction to the Project

12:52

JQuery - Basic introduction to the technology.

18:59

Learn to create the HTML and CSS for the project

17:08

The final JavaScript Code for the project

Section 4: Youtube Search Engine
02:50

Introduction to the Project

18:58

Build the HTML and CSS for the Project

14:58

Learn to implement styling and animation

15:21

The Youtube API basics

22:01

Learn to display the results form the API

14:02

Learn to implement Paging and Lightbox

Section 5: FAQ Accordian Slider
02:20

Introduction to the Project

10:17

Implement the Slider HTML in the project

06:44

Learn to build the Slider CSS

10:44

Final JavaScript implementation of the slider

Section 6: Ajax PHP Shoutbox
01:51

Introduction to the Project

18:32

Build the HTML and CSS for the project

06:56

Using the PHP - MySQL backend for the Project

10:23

Implementing the POST request from Ajax

17:14

Implement the DB queries from MySQL

Section 7: Apple Style Thumbslider
01:43

Introduction to the Project

09:54

Building the HTML for the project

14:03

Build the CSS for the Thumbslider

18:03

The final JavaScript code for the Thumbslider

Section 8: Create a jQuery Plugin
02:06

Introduction to the Project

16:29

Let to set up your environment and Git Repository

16:25

Learn to create the main plugin file

05:09

Create the manifest file for the project

09:51

Learn to publish your plugin

Section 9: jQuery Portfolio Gallery
01:55

Introduction to the Project

22:37

Build the HTML and CSS for the gallery

12:05

Build the Image categories for the project

16:22

Learn to create the Image overlay Effect

06:35

Integrate lightbox and responsive layout to your project

Section 10: jQuery Mobile App
02:25

Introduction to the Project

23:56

Learn all about the jQuery Mobile UI

16:05

Learn to use localstorage in your Apps

10:53

Display the runs on the Screen.

18:00

Implement the editing run feature

08:10

Updating runs from localstorage

Section 11: Tic Tac Toe Game
01:25

Introduction to the project

05:51

Building the HTML for the game

06:13

Build the CSS for the game

17:09

The JavaScript logic for the game

Section 12: Course Summary
05:07

Course Wrap up and summary

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Eduonix Learning Soultions, 1+ Million Students Worldwide | 200+ Courses

Eduonix creates and distributes high quality technology training content. Our team of industry professionals have been training manpower for more than a decade. We aim to teach technology the way it is used in industry and professional world. We have professional team of trainers for technologies ranging from Mobility, Web to Enterprise and Database and Server Administration.

Instructor Biography

Ready to start learning?
Take This Course