Power up HTML5 with JavaScript

Name: Power up HTML5 with JavaScript
Rating: 4.5 (392 reviews)

Learn some amazing JavaScript API and HTML5 technologies Use JavaScript with HTML5 to create interactive content

Created byLaurence Svekis

Last updated 2/2023

English

What you'll learn

create drag and drop with JavaScript
create animations with Canvas
add event listeners to web pages
use web storage
geolocation from browser

Course content

7 sections • 36 lectures • 2h 51m total length

HTML5 JavaScript course introduction2:15
Explore powerful HTML5 and JavaScript techniques, including drag-and-drop, event listeners, local and session storage, geo location, web workers, and animations with canvas and paths.
JavaScript HTML5 Course Intro4:56

HTML5 JavaScript Drag Event Start8:25
Explore HTML5 drag and drop: move a pick me up item to a drop off area using draggable, dragstart and data transfer with JavaScript.
HTML5 JavaScript Data store4:16
HTML5 JavaScript Drag and Drop content10:58
Master HTML5 drag and drop by implementing on drop and on drag over, using data transfer to move text into a target area.
HTML5 JavaScript drag images and text9:57
Drag and Drop Source Code0:18
HTML5 JavaScript clicks3:10
Learn to wire up click event listeners in the DOM using getElementById and addEventListener, turning any HTML element into a clickable area and running a function on click.
HTML5 JavaScript event listeners clicking3:11
Explore HTML5 and JavaScript mouse events by logging type, timestamp, target, and x and y coordinates, and update the clicked element content while learning click and double-click listeners.
HTML5 JavaScript different event listeners3:17
Explore the different ways to attach event listeners in HTML5 with JavaScript, including addEventListener, inline on-click handlers, and legacy attachEvent, and note their trade-offs and security considerations.
HTML5 JavaScript Mouse Events3:49
Explore HTML5 mouse events such as mouse over, mouse down, mouse up, mouse move, and mouse out to set up listeners that enable rich page interactions.
Event Listeners Source Code0:54

HTML5 JavaScript add canvas3:47
HTML5 JavaScript canvas draw paths5:38
HTML5 JavaScript shapes and colors2:57
HTML5 JavaScript canvas working with text3:08
HTML5 JavaScript create arcs and circles3:03
HTML5 JavaScript save and restore2:15
Use save and restore to capture the canvas state in HTML5 canvas with JavaScript, then revert fill and stroke styles to saved defaults.
HTML5 JavaScript create animations8:12
Canvas Drawing and Animation Source Code0:12

Requirements

html and JavaScript basics
computer access

Description

This course will demonstrate and help you learn some of the technologies that are available within HTML5 and JavaScript

JavaScript API allows you to access so much information from your web page. Using new HTML5 elements along side JavaScript can really make amazing experiences for web users.

Taught by a course instructor with over 15 years of real web development experience. Having created and works on hundreds of websites and web applications, we bring years of experience to you in this course.

Learn to create JavaScript Drag and Drop
How to use Event Listeners to create interactive content
Use web storage local and session storage explained.
How geolocation works
How to use web workers
Drawing paths on Canvas
Creating animations with canvas
And a lot more.

Top resources, links and source code is included.

When you are ready lets start learning JavaScript APIs.

Who this course is for:

web application developers
web creators
web managers
JavaScript developers
desire to learn javascript

Power up HTML5 with JavaScript

What you'll learn

Explore related topics

Course content

JavaScript API HTML5 technologies2 lectures • 7min

JavaScript Event Listeners10 lectures • 48min

Web storage4 lectures • 21min

JavaScript API HTML5 technologies4 lectures • 13min

HTML5 Canvas and Canvas Animation8 lectures • 29min

HTML5 Canvas Code Snippets and Examples Questions and Answers6 lectures • 40min

Coding Examples and more JavaScript Q&A lessons2 lectures • 13min

Requirements

Description

Who this course is for: