Learn HTML 5 in 1 hour

Embed an HTML5 audio tag with controls, add a source with src and type attributes for formats like audio/mpeg or audio/ogg, and note mp3 is proprietary; prefer wav or ogg.

learn to add a video tag, specify an mp4 source with type, enable controls, and resize with width attributes to fit the page.

Learn how to control video and audio loading with the preload attribute, using none, auto, or metadata to decide when media loads on page load.

Create and style a canvas element by setting width and height, applying inline or CSS styles for orange background and a 10-pixel solid black border, illustrating its two-dimensional box.

Learn to draw on the HTML5 canvas with JavaScript by assigning an id and obtaining the 2d context. Use fillStyle and fillRect to render a red rectangle.

Explore working with HTML5 canvas by creating multiple canvases, adjusting width and height, and using fillRect as a four-parameter function to position graphics.

Create a radial gradient on a canvas by defining the gradient with x,y coordinates and radii, add color stops, and fill a shape with the gradient.

Create linear gradients by setting x and y parameters to control rotation, compare with radial gradients, and learn that linear or radial gradients support only two color stops.

Add a shadow to a canvas by setting shadow blur and shadow color. Experiment with values like 40 blur and black or gray color to create subtle to bold shadows.

Learn to draw a circle on the canvas using the 2d context, beginPath, and arc with x, y, radius, and angles, then stroke, preparing scalable vector graphics.

Learn to draw scalable vector graphics with SVG in HTML5 by creating a circle with cx, cy, and r, using fill and stroke.

Create an svg rectangle by setting height and width, apply a fill color such as blue or purple, and ensure a self-closing tag with a trailing slash.

Learn to add an ellipse in HTML5 by declaring its type, configuring cx and cy coordinates, rx and ry radii, and applying a fill color for custom shapes.

learn to create a polygon in svg by using the polygon tag with points as x,y pairs, set fill and stroke, and adjust coordinates to shape a simple graphic.

Master HTML5 basics by practicing with scalable vector graphics and minimalist web design, and embrace rapid prototyping—create 10–30 prototypes to accelerate learning with CSS and JavaScript.

Conclude this HTML5 course by showing that HTML5 programming is not hard and that core programming concepts apply across languages such as JavaScript, C#, and C++.