Advanced HTML5 in Action: Build 5 Advanced HTML5 Web Apps

Develop a color picker using an HTML input of type color and jQuery. Update the paragraph text color in real time as users choose colors.

Learn to use custom data attributes to store extra information on elements, then position four styled boxes with relative and absolute css and move them to corners on click.

Learn to move boxes to the four corners using custom data attributes in HTML5, with data-top-bottom and data-right-left, and animate them with JavaScript.

Explore HTML5 date and time inputs, including date, time, date-time, week, and month, and use min, max, and default values to build practical web apps.

Learn to implement custom form validation with the pattern attribute, using regular expressions to validate usernames and zip codes, with custom messages and live styling of valid and invalid inputs.

Learn to build an accordion using HTML5 details and summary tags, control expand and collapse, and style with CSS for a clean, professional UI.

Learn to customize a details element-based accordion by replacing the default triangle with plus and minus icons, and style color, alignment, and spacing for a responsive UI.

Develop an online text editor using the content editor attribute and local storage to save edits locally and retrieve them later, including a last edited by field.

Turn heading, paragraph, and span into editable content using contenteditable, and save edits with localStorage for retrieval on load, styled in red Garamond during editing.

Build an online audio player with HTML5: create a controllable audio element with volume and download, add previous/next navigation, a dynamic song list, and display current action and song title.

Build a 10-song data structure with id, title, duration, and file path, render them into a styled unordered list for an audio player, and prepare controls for the next lecture.

Learn to build an HTML5 audio player: manage play/pause, previous/next, dynamic song titles and sources, and list-based song selection with wrap-around behavior.

Build a from-scratch HTML5 audio player with a song list and next/previous controls. Wrap around to the first song and highlight the playing track with CSS, updating UI state.

Build a catch me if you can game with HTML5 canvas, moving a pink box with the arrow keys to catch blue targets and increase score in a 30-second timer.

Move a big box on a canvas using keydown and keyup events, with a requestAnimationFrame redraw loop, and detect when it touches the small box to update score and timing.

Create a HTML5 catch me if you can game that detects big box touches small box, updates the score, and runs a 30-second timer.

Master the basics of jQuery as a JavaScript library, learn offline or online references, ensure document readiness, and change paragraph text on a button click using selectors.