Advanced HTML 5 - Web and Game Development

Master HTML5 new features like semantic markup and structural elements, HTML5 web storage, WebSocket and server-sent events, canvas, audio and video, geolocation, microdata, drag and drop, and responsive design.

Explore responsive web design techniques using the viewport meta tag, the media tag, flexbox, and css grid to build adaptable layouts, including a mock portfolio with a navigation bar.

Build a single-page application that fetches and displays the top three GitHub repositories using an async fetch call, renders repo data in the DOM with styled anchors.

Learn to style a repo box with centered alignment, light pink color, and a read more button; implement responsive flex layouts, media queries, and smooth scrolling for about and contact.

Explore HTML5 canvas basics with JavaScript, HTML, and CSS, learn to draw and animate in real time, compare canvas with flash, and build tic tac toe using a 2d context.

Draw a tic tac toe board on canvas using beginPath, moveTo, lineTo, and stroke, and implement win-pattern bitmaps with a clear canvas and turn display.

Create a playable tic-tac-toe game on a canvas by drawing the board and pieces, handling coordinates with mouse events, and using context save/restore and requestAnimationFrame for smooth play.

Explore making bitmaps and wind patterns for a tic-tac-toe game using bitmasks and bitwise operators to detect wins, draw on a canvas, and render the board interactively.

Learn to build a basic pong game in HTML5 canvas with left and right paddles, a moving ball, a center net, simple ai on the y axis, and score tracking.

Build a 2d pong game by defining paddle and ball objects, computing their bounding edges for collision detection, and rendering with canvas context using fill and arc methods.

Create a pong game on an HTML5 canvas (id pong), rendering the ball, paddles, net, and scores with a 2d context and a 50 fps loop.

Learn to build a pong-style game in html5 by drawing the net and ball, implementing scoring, collision detection, and a simple ai paddle controlled by the mouse.

Create a collect the square game with the canvas api, arrow-key controls, a 30-second timer, a player square vs. a smaller target square, and a score display.

Build a 30-second countdown in an HTML5 canvas game that starts on click to collect the square. Move with arrow keys and place the target at a random point.

Move a square on a canvas to collect randomly positioned green targets, detect collisions, update the score, and count down time before ending the game.

Explore key down and key up handling, collision logic for target x and y, debugging steps, and an overview of popular HTML5 game engines like Phaser and Babylon.