Loading lesson path
HTML
Canvas, SVG, media, web APIs, storage, and browser-native capabilities in one place.
Your browser does not support the <canvas> element. The HTML <canvas> element is used to draw graphics on a web page. The graphic to the left is created with <canvas>. It shows four elements: a red r…
Multimedia on the web is sound, music, videos, movies, and animations. What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, musi…
A Web API is a developer's dream. It can extend the functionality of the browser It can greatly simplify complex functions It can provide easy syntax to complex code What is Web API? API stands for A…
Challenge: Set Up a Canvas Test your understanding of the HTML canvas element by completing this coding challenge.
The HTML <video> element is used to show a video on a web page. Video Example Courtesy of Big Buck Bunny Your browser does not support HTML5 video. The HTML <video> Element To show a video in HTML, u…
HTML Geolocation API
SVG (Scalable Vector Graphics) SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages. SVG graphics are scalable, and do not lose any quality if they are zoomed or res…
Challenge: Embed a Video Test your understanding of the HTML video element by completing this coding challenge.
The HTML Drag and Drop API enables an element to be dragged and dropped. Example Drag the W3Schools image into the second rectangle. Drag and Drop Drag and drop is a very common feature. It is when y…
Challenge: Draw SVG Shapes Test your understanding of HTML SVG graphics by completing this coding challenge.
The HTML <audio> element is used to play an audio file on a web page. The HTML <audio> Element To play an audio file in HTML, use the <audio> element: Example <audio controls> <source src="horse.ogg"…
HTML Web Storage API; better than cookies. What is HTML Web Storage? With web storage, applications can store data locally within the user's browser. Before HTML5, application data had to be stored i…
Challenge: Embed an Audio Player Test your understanding of the HTML audio element by completing this coding challenge.
A web worker is an external JavaScript file that runs in the background, without affecting the performance of the page. What is a Web Worker? When executing scripts in an HTML page, the page becomes…
Plug-ins are computer programs that extend the standard functionality of the browser. Plug-ins Plug-ins were designed to be used for many different purposes: To run Java applets To run Microsoft Acti…
The Server-Sent Events (SSE) API enables pushing messages/updates from a server to the web page via HTTP connection. Server-Sent Events - One Way Messaging A server-sent event is when a web page auto…
The easiest way to play videos in HTML, is to use YouTube. Struggling with Video Formats? Converting videos to different formats can be difficult and time-consuming. An easier solution is to let YouT…