Advanced HTML5 in Action: Build 5 Advanced HTML5 Web Apps

Name: Advanced HTML5 in Action: Build 5 Advanced HTML5 Web Apps
Rating: 3.9 (19 reviews)

Hands-On HTML5 Web Application Development Course! 5 Real-World HTML5 Web Applications Improve Your HTML5 Knowledge

Created byCrypters Infotech

Last updated 10/2019

English

English [Auto],

What you'll learn

Develop HTML5 Web Applications
Improve HTML5 skills
Improve jQuery skills
Become confident in programming by developing real-world projects

Course content

4 sections • 30 lectures • 4h 8m total length

Structure of the Course3:15
Explore the course structure of two HTML5 sections and discover five advanced HTML5 web apps, including a color picker, custom data attributes, and date/time inputs.
Instructions Before Proceeding0:40

Color Picker9:06
Source Code: color-picker.html0:29
Make the Best Use of data- Attribute - Part 18:02
Make the Best Use of data- Attribute - Part 211:11
Learn to move boxes to the four corners using custom data attributes in HTML5, with data-top-bottom and data-right-left, and animate them with JavaScript.
Source Code: data-attribute.html0:29
Date Picker15:11
Explore HTML5 date and time inputs, including date, time, date-time, week, and month, and use min, max, and default values to build practical web apps.
Source Code: date-picker.html0:20
Custom Validation using pattern Attribute11:06
Source Code: specify-pattern.html0:15

Accordion - Part 113:41
Learn to build an accordion using HTML5 details and summary tags, control expand and collapse, and style with CSS for a clean, professional UI.
Accordion - Part 29:19
Learn to customize a details element-based accordion by replacing the default triangle with plus and minus icons, and style color, alignment, and spacing for a responsive UI.
Source Code: accordion.html0:32
Text Editor - Part 110:24
Text Editor - Part 216:09
Turn heading, paragraph, and span into editable content using contenteditable, and save edits with localStorage for retrieval on load, styled in red Garamond during editing.
Source Code: online-editor.html0:43
Audio Player - Part 112:09
Audio Player - Part 218:42
Audio Player - Part 317:53
Learn to build an HTML5 audio player: manage play/pause, previous/next, dynamic song titles and sources, and list-based song selection with wrap-around behavior.
Audio Player - Part 411:02
Source Code: audio-player.html1:17
Video Speed Controller15:04
Learn how to develop a video speed controller using HTML5's <video> element and input type range.
Source Code: video-speed-controller.html0:22
Catch Me if You Can - Part 117:31
Build a catch me if you can game with HTML5 canvas, moving a pink box with the arrow keys to catch blue targets and increase score in a 30-second timer.
Catch Me if You Can - Part 215:38
Move a big box on a canvas using keydown and keyup events, with a requestAnimationFrame redraw loop, and detect when it touches the small box to update score and timing.
Catch Me if You Can - Part 318:27
Create a HTML5 catch me if you can game that detects big box touches small box, updates the score, and runs a 30-second timer.
Source Code: catch-me.html1:13

Requirements

Basic knowledge of HTML, CSS, JavaScript and jQuery

Description

HTML5 is the latest version of HTML, with new elements, attributes, and a larger set of technologies which makes development of powerful and diverse websites and web applications lot more easier and effective.

Many times, just knowing the syntax of a programming language might not help you while working on projects. Instead, you should be able to apply your programming language skills in real-world projects. In this course, Advanced HTML5 in Action: Build 5 Advanced HTML5 Web Apps, you will learn more of intermediate and advanced HTML5 functionalities by developing unique demos and 5 advanced HTML5 web applications. This is a hands-on practical course that focuses more on practice and less on theoretical explanations.

The two major sections in this course are

1. HTML5 Elements and Attributes in Action
2. Let's Develop: Advanced HTML5 Web Applications

In the first section, you will be introduced to some of the HTML5 elements and attributes in a very effective way.

In the second section, you will develop 5 advanced HTML5 web applications from scratch. These projects include

1. Accordion
2. Text Editor
3. Audio Player
4. Video Speed Controller
5. Catch Me if You Can (Online Game)

The first project “Accordion” is developed using some new HTML5 elements. The second project “Text Editor” is developed with the help of a new attribute and also using HTML5’s storage options. The third project “Audio Player” and fourth project “Video Speed Controller” makes use of the multimedia functionalities offered by HTML5. The last project which is a game named “Catch Me if You Can” is developed using HTML5’s 2D graphics options.

This course is not a basic HTML5 course that teaches you different HTML tags from scratch. It deals with more intermediate and advanced HTML5. As all the projects are developed using jQuery, you will be able to not only learn advanced HTML5 concepts, but also improve your jQuery knowledge. You will be able to make use of the untapped potential of HTML5 and also become confident in building HTML5 Web Applications on your own as you develop these projects from scratch .

Who this course is for:

Those who wish to learn intermediate & advanced HTML5 skills
Those who wish to practice jQuery
Those who wish to develop real-world projects

Advanced HTML5 in Action: Build 5 Advanced HTML5 Web Apps

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 4min

HTML5 Elements and Attributes in Action9 lectures • 56min

Let's Develop: Advanced HTML5 Web Applications17 lectures • 3hr

BONUS Section2 lectures • 8min

Requirements

Description

Who this course is for: