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
Updated on 27 December, 2017 - Read Less
