Web Application Development - Learn by Building 3 Web Apps

Use the power of HTML5 and jQuery to develop 3 Latest Web Apps! It's a pathway to Game Development and User Interfaces !
3.7 (16 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,688 students enrolled
Take This Course
  • Lectures 29
  • Length 1.5 hours
  • Skill Level Beginner Level
  • 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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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

About This Course

Published 6/2014 English

Course Description

A Certificate of Completion will be sent to all students after completing this course.

The world is filled with developers who know multiple web programming languages but haven't applied them anywhere. Just knowing the syntax does not matter.

What matters is TO APPLY that knowledge to build something. Easy or tough doesn't matter, you should just make something out of your knowledge.

"Web Application Development - Learn by Building 3 Web Apps" will make you LEARN HTML5 and jQuery and also APPLY them to make 3 amazing Web Applications! All this in just 90 Minutes! So what are you waiting for?

This course will teach you the most frequently used functions and techniques of HTML5 and jQuery and by the end of the course you will be having your own :

1. Animated keyboard controllable snake game.

2. A magnifier application which is used in major E-commerce stores like Ebay and Amazon.

3. An interactive web form with progress bar.

The course includes :

  1. Explanatory in-depth Videos.
  2. Presentations.
  3. Source code files of all the programs discussed and projects made.
  4. Supplementary Material for better understanding
  5. Quizzes at the end of section to revise and know how much you have learnt.
  6. Complete support material for all technical problems

Course Structure :

The course is divided into 7 sections given below:

  1. Course Summary and Supplementary Material

  2. New Features of HTML5

  3. jQuery Fundamentals

  4. Application 1: Making a web form with progress bar

  5. Application 2: Making the Magnifier Application

  6. Application 3: Making the Snake Game

  7. Bonus Lectures

Why take this Course :

After completing this course you will be able to

  1. Master most used functions of HTML 5 and j-Query.
  2. Make your own 2-D games.
  3. Make interactive websites with increased functionality.
  4. Design better User Interfaces
  5. Increase your grasping of web development technologies.

Course Requirements:

  1. Google Chrome (or any other modern web browser)
  2. Sublime Text Editor or any other text editor.

What are the requirements?

  • Basic knowledge of HTML, CSS will be helpful
  • Google Chrome (or any other modern web browser)
  • Sublime Text Editor (http://www.sublimetext.com) or any other text editor.

What am I going to get from this course?

  • Learn Basic and Advanced Level jQuery
  • Learn the new concepts introduced by HTML5
  • Make a snake game from jQuery and HTML5
  • Make a Magnifier Application for E-commerce websites
  • Make an Interactive Web form with Progress bar

Who is the target audience?

  • School or College students.
  • Web Developers
  • Freelancers
  • User Interface Designers
  • Entrepreneurs
  • Anyone who wants to learn.

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.


Section 1: Course Summary and Supplementary Material

This is the promo video for the lecture.

5 pages

Must read for all your doubts. Questions are added regularly as per student suggestions and requirements.

1 page

This tells about the software needed to proceed with the course.

Section 2: New Features of HTML5

A brief account of the history and aims of HTML5.


Explains the initial DOCTYPE declaration of HTML5 so that browsers can detect it.


This lecture explains the canvas element which is used for drawing and animation in HTML5.


New element datalist which has improved the select element.

2 pages

Using HTML5 Input Types to Enhance The User Experience on Mobile


In this lecture you will learn how to make a feedback meter to give feedback from 1 to 10.

HTML5 Quiz!
3 questions
Section 3: jQuery Fundamentals

In this lecture you will learn about the basic syntax of jQuery and how to include it in your HTML page.You will also learn about loading jQuery at the correct time to avoid any errors.


jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.


With jQuery, you can hide and show HTML elements with the hide() and show() methods.


With jQuery you can fade elements in and out of visibility.


The jQuery slide methods slides elements up and down.


The jQuery animate() method lets you create custom animations.

jQuery Quiz!
3 questions
Section 4: Application 1: Making a web form with progress bar

In this lecture we will create a simple yet attractive web form with user validation.


In this lecture we will connect the form to the progress bar so that it shows the progress in percentage when the user fills the form.

Progress Form Source Code
Section 5: Application 2: Making the Magnifier Application

In this lecture we will create the canvas and then draw the image and magnifier on it.


In this lecture we will toggle the visibility of the magnifier according to the image size.


In this lecture we will give motion to the magnifier and it will move with the cursor.

Magnifier Source Code
Section 6: Application 3: Making the Snake Game

Learn how to make an animated and keyboard controllable snake game with rules and score.

It also has start and game over screens.


We will draw the game region and snake using canvas function and jQuery.


We will design game rules for

1.Making the snake eat food.

2.Increasing the score

3.Game over conditions


We will make the snake controlled by arrow keys on the keyboard.


Contains source code of the snake game.

You did it!
Section 7: Bonus Lectures
9 pages

This lecture will cover the following features of HTML5.

  1. Geolocation API
  2. Drag and Drop
  3. HTML5 Web Storage
  4. HTML5 Web Worker
  5. HTML5 Audio
  6. HTML5 Video

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Akshay Nagpal, Software and Web App Developer

Akshay Nagpal is a Computer Scientist having a keen interest in web development, Search Engine Optimization, Blogging and Wordpress. He's been actively developing projects in C, C++, Java, HTML5, CSS3,Javascript ,Jquery, PHP & MySQL since 2010.

He loves open source projects and you can view his Github Profile.

He works as a professional Web Designer for college websites and events. He also teaches and encourages people to start web development.You can follow him on Twitter to know more!

Ready to start learning?
Take This Course