Advanced HTML5 Tutorial for Web Developers

Learn how to embed JavaScript in a web page, place script tags, and call functions like alert, while understanding how browser rendering affects execution.

Use document.write to insert text and HTML, including an h1 heading and bold text, and learn top-down rendering, alert sequencing, and comments like // and /* */.

Learn how to create and name variables in JavaScript, assign numeric and string values, and use document.write to display results, including adding numbers and strings and using line breaks.

Explore how JavaScript handles variables by distinguishing strings from numbers, using quotes to create characters, observing when addition becomes concatenation, and booleans, arrays, and link paths.

Define and call JavaScript functions with proper naming, parentheses, and braces. Demonstrate passing a message as a parameter to an alert and calling the function.

Learn how to respond to events in HTML5 by using a button element and an onclick event to trigger a JavaScript alert, wiring the button to a function.

Add a button to the Chinatown page and wire an onclick event to call show date, which displays an alert with the Chinese New Year date, demonstrating basic javascript interactions.

Learn how JavaScript reads and writes to HTML elements using getElementById, innerHTML, and style to insert content and apply styling.

Explore JavaScript conditionals with if, else if, and else; test values using >, <, and ===; retrieve data by id and show results with alert.

Master JavaScript loop structures and operators, using a for loop to count to ten, with plus equals, minus equals, and increment/decrement, and output via document.write.

Learn to implement drag and drop in JavaScript using HTML5, including draggable images, data transfer, on drag start, on drag over, drop events, and updating the DOM.

Use external JavaScript files to organize code, access form data by name, and perform numeric calculations. Debug with browser consoles and load functions via a script src attribute for reuse.

Add an interactive drag-and-drop puzzle to the fisherman's wharf page by assembling puzzle pieces inside a puzzle frame, wired with an external puzzle.js and HTML5 drag-and-drop.

Explore HTML5 video basics by building custom controls, using multiple video sources (webm and mp4) for cross-browser support, and applying a poster startup screen to enhance the user experience.

Remove the built-in video controls and replace them with custom javascript buttons that call the video play and pause functions using getElementById.

Track video playback by retrieving duration and current time, display them via document.getElementById and innerHTML, and handle onloadedmetadata and ontimeupdate events with a cached vid.

Set up stop, forward, and reverse controls by manipulating the video's current time with a vid variable, rewrapping to zero, and incrementing or decrementing by one second.

Learn to implement HTML5 audio volume controls by manipulating the audio element's volume, updating a visual indicator with getElementById, and adding up/down buttons that adjust by 0.1 with rounding.

This lab replaces the native video controls with a single play/pause button, using image assets and a poster, and a JavaScript function that toggles play/pause on the video element.

Learn how to apply css3 drop shadows to any block element with the box-shadow property, adjusting offset, blur, spread, color, and inset for versatile effects.

Explore how to use vendor prefixes for browser compatibility, adding WebKit box-shadow alongside the CSS3 standard property, and manage legacy IE support with conditional comments and scripts.

Explore CSS3 color models and backgrounds, using named colors, hex, and rgb(a) values with alpha transparency to create layered, vibrant page visuals.

build linear and radial CSS3 gradients for backgrounds, control direction, color stops with positions, and provide cross-browser fallbacks using -moz-, -webkit-, -ms-, and -o- prefixes.

Master css3 borders by applying border radius for rounded corners, experimenting with solid, dashed, dotted, and double borders, and using shorthand and individual corner values to control each corner.

Apply a loaded image as a div border using css3 border-image property, configuring url(), slice, width, outset, and round repeat, with a fallback base border for non-supporting browsers.

Apply text-shadow and rgb colors to h1, then introduce a lightweight multi-column layout with column-count and column-gap, including moz prefixes for cross-browser support.

Learn to add custom web fonts by packaging font files in a fonts folder, defining @font-face with a font family like Johnny Mac, and applying it via eot and ttf.

Add three css3 styles to the sample site, including rounded corners with drop shadows on photos, a three-column text layout, and a custom web font.

Learn to create and configure an html5 canvas with id test canvas, set width and height, and access a 2d context to draw and fill a rectangle.

Learn to style 2d canvas graphics with fills and strokes by setting fill and stroke styles, using red fill and blue stroke, and drawing with move to and line to.

Learn to create and style paths in the drawing context: begin path, draw lines, fills, and strokes, separate paths, and control corners with line join, including round and close path.

Learn to draw curved lines on the canvas and create rounded corners using arc, while setting up the canvas and 2d context with beginPath, moveTo, lineTo, stroke, and fill.

Explore drawing arcs and circles on a canvas with the arc function. Set center, radius, start and end angles in radians, and choose clockwise or counter-clockwise, then stroke and fill.

Explore drawing curves on the HTML5 canvas with quadratic and Bezier curves, using endpoints and control points to shape curvature and connect multiple segments.

Define linear and radial gradients and apply them as canvas fills. Experiment with color stops from red to blue to see the gradient effects.

Demonstrates pattern fills and drop shadows in HTML5 canvas by using an image as a repeating pattern to fill a circle, with offset, blur, and color shadow effects.

Draw text on the canvas using fillText and strokeText, with a custom font, color, and baseline. Center text with textAlign and textBaseline and measure canvas dimensions.

Learn to create a canvas button for the cable cars page, draw a rounded gradient button with a 2D canvas context, and wire it with onload JavaScript.

Add canvas graphics with a light drop shadow and a centered white text label, outline it with a stroke, and wrap the canvas in an anchor tag for a link.

Explore CSS3 transforms to rotate, scale, translate, and skew HTML elements using the transform property for any block element. Learn applying multiple transforms and using browser prefixes for cross-browser compatibility.

Learn how css3 transitions animate style changes using the transition property with duration, timing function, delay, and vendor prefixes for cross-browser hover effects.

Learn to create CSS3 animations using the animation property and keyframes, including defining rainbow color transitions, multiple steps with percent points, cross-browser prefixes, and binding to elements.

Apply canvas transforms in JavaScript to draw and transform rectangles, using translate, rotate, and scale to center objects and adapt position without changing coordinates.

Learn to animate a canvas with requestAnimationFrame, run an animate loop, and move a 100×100 rectangle across the canvas using x and y coordinates while clearing each frame.

Frame photos with css and transforms by wrapping images in a photo frame container, creating a photo area, adding drop shadows, and rotating images for a polaroid-like display.

Learn to use navigator.geolocation to get a user’s current position with permission, then display latitude and longitude on the page and handle unsupported browsers.

Display a location by building a Google Maps static image URL from latitude and longitude, add a blue marker labeled one, and render the image on the page.

Learn how to implement robust error handling for geolocation in HTML5, using a position error function and error codes such as timeout, position_unavailable, and permission_denied to alert users.

Apply geolocation to a web page to display the user's distance from Pier 39 by calculating distance via a JavaScript location query and showing the result beside the image.

Learn how mobile web apps use local storage to save data in the browser, without cookies, for security and faster performance.

Add numbers to a running total using local storage and session storage, convert inputs to numbers, update the total display, and provide clear or reset options across sessions.

Utilize css media queries to create responsive layouts for mobile and desktop, using screen and print contexts, min-width and max-width rules, and adaptive styling for the content div.

Explore javascript arrays and storing values with square brackets. Learn to access items by index, push new elements, loop with for, and display results on the page using dom methods.

Add places to a mobile web app by using the get location button to capture latitude and longitude. Store names, notes, and coordinates offline with local storage; stringify and parse.

Display user saved places by looping through stored arrays, rendering each place's name and notes, and adding a Google Maps link while updating the stored places count.