Power up HTML5 with JavaScript

Explore HTML5 drag and drop: move a pick me up item to a drop off area using draggable, dragstart and data transfer with JavaScript.

Explore HTML5 drag and drop with JavaScript by wiring drag events, using data transfer to store the drag item's id as plain text, and prep for drop effects.

Master HTML5 drag and drop by implementing on drop and on drag over, using data transfer to move text into a target area.

Learn to implement HTML5 drag and drop with JavaScript, handling images and text, using dragstart and drop events, and DOM manipulation to create interactive content.

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.

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.

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.

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.

Explore the web storage API with local storage, including checking support, setting and getting string values, removing items, and understanding the five megabyte per domain limit.

Learn how to set, get, remove, and clear HTML5 local storage using three formats, with a five megabyte per-domain limit and data persistence across browsers; the lesson introduces session storage.

Explore how HTML5 session storage works alongside local storage, noting that session data is not persistent after the window closes, and how to set, get, remove, and clear items.

Explore how the browser geolocation api uses navigator.geolocation to return latitude and longitude with optional altitude, heading, and speed via getCurrentPosition and watchPosition, including how permission prompts govern access.

Learn how to run concurrent JavaScript processes using web workers, post messages between the main script and worker, and handle onmessage events for bidirectional communication.

Master HTML5 canvas with JavaScript to draw on the canvas, set up HTML canvas, control dimensions, and create lines, shapes, fonts, arcs, and animations.

Learn how to draw on an HTML5 canvas with JavaScript by creating a 2d context, beginPath, moveTo, lineTo, stroke, and fill shapes.

Draw simple shapes on canvas with fillRect, positioning at x and y and sizing with w and h, and customize fillStyle and strokeStyle for green fills and red outlines.

Learn to render text on the html5 canvas with fill and stroke, set position and font size, and preview how fill and outline styles compare.

Use save and restore to capture the canvas state in HTML5 canvas with JavaScript, then revert fill and stroke styles to saved defaults.

learn to build HTML5 canvas animations by clearing and redrawing the canvas, using requestAnimationFrame for smooth movement, and driving movement with a seconds-based value on an 800 by 600 canvas.

Create a bouncing ball animation in JavaScript on an HTML5 canvas by drawing a circle, clearing and redrawing it each frame, and reversing direction on canvas edges using requestAnimationFrame.

Build the matrix effect on a canvas with JavaScript by creating a canvas, drawing text, and animating random characters in fixed positions.

Learn to create and draw on an HTML5 canvas with JavaScript, center text, and download the canvas content as an image.

Explore JavaScript closures by showing how inner functions remember outer variables across scopes, and distinguish closures from non-closure returns using counter examples.

Declare variables with let or const to manage reassignment and explore scope from global to block. Observe that const prevents changes, arrays remain immutable, and you'll see updates in console.