Projects in HTML5

Course details

This unique course from Eduonix is aimed to provide real project building experience to developers. This course will teach you HTML5 and JavaScript while building over ten projects. We have carefully selected 10 different apps and games and will develop them along this course.

The details of this course as follows

Getting Started- Introduction

Description: This a jumpstart chapter where we go over what HTML5 is as well as what it is capable of. We create a very basic HTML5 website which demonstrates valid HTML5 markup. We also go into the basics of JavaScript as it is required for most HTML5 features.

Features/Technologies: Semantic Markup, Bolier Plate Framework, JavaScript Basics

Responsive Blog Frontend

Description: Here we will create a responsive frontend layout for a tech blog called "The Tech Edge". It uses a modern look and field and gets into more advanced HTML5 markup including new tag elements and form inputs.

Features/Technologies: New HTML5 tags, HTML5 Forms, CSS3 Media Queries, Responsive Design

Animated Image Gallery

Description: We will build an HTML5 based image gallery which uses JavaScript and JQuery to animate image order. We will use the quicksand and the Fancybox JQuery plugins. Fancybox allows us to click an image and open in a lightbox

Features/Technologies: HTML5 Markup, CSS, JQuery Quicksand & Fancybox Plugins

Snake Game

Description: Here we will raise the skill level a bit and create a complete HTML5 game. The snake game will use the <canvas> element for HTML5. This project is a bit JavaScript heavy, as it is needed to power the <canvas> element. The game uses an animated set of shapes(the snake) which a user can navigate using the arrow keys. It also keeps current and high scores using localStorage.

Features/Technologies: HTML5 Canvas, LocalStorage API, JavaScript Functions, Events, Loops

Sticky Note App

Description: Sticky notes is a graphical app which uses multiple HTML5 & JavaScript features. It uses drag & drop to allow moving of the sticky notes. We use the web storage api with SQL statements to manage notes. The script also uses object orientated JavaScript.

Features/Technologies: Drag & Drop, Web Storage API, Client Side SQL, OOP

D & D Image Uploader

Description: Drag and Drop Image Uploader gives users a nice and easy interface to upload images to their server. It uses the drag & drop API, the JQuery plugin "Filedrop" along with server-side PHP to commit the upload and move the file to a specified folder.

Features/Technologies: Drag & Drop, PHP, JQuery File Drop Plugin

HTML5 Quiz Application

Description: We use the HTML5 & JavaScript sessionStorage API to store questions and answers of questions related to HTML5. We rely on JQuery for manipulating the DOM and question/page transition.

Features/Technologies: HTML5 sessionStorage, JQuery, DOM Manipulation

HTML5 Audio Player

Description: We will use HTML5 media elements to create a full music player with a playlist. We will hand-code every function including play, stop, pause and next/prev functionality.

Features/Technologies: HTML5 Media (Audio), CSS3 Styling

Mobile Todo

Description: This day in age, it just wouldn't be right to do a web series without any kind of mobile development. Here we will use HTML5 along with the JQuery Mobile framework to create a dynamic todo list which looks great on mobile devices. We learn how to store JSON objects in localStorage As oppose to a standard key/value pair.

Features/Technologies: HTML5 localStorage, JQuery Mobile

Customer Manager

Description: In this project we will create a client-side customer manager app using the powerful IndexedDB datastore. Users can easily add, update and delete customers via web browser

Features/Technologies: HTML5/CSS3 UI, IndexedDB Datastore

Location App

Description: In this project we will use location APIs to find out user location and will manipulate the same in our App. This is the last app of the course.

Features/Technologies: HTML5/CSS, Location APIs, Geolocation