HTML, CSS and JavaScript Demos
Colour Gradient Explorer #2
An interactive demo that functions as a colour gradient generator and explorer.
Colour Gradient Explorer #1
An interactive demo that functions as a colour gradient generator and explorer.
JavaScript Emoji Slot Machine
An emoji slot machine demo. Spin the wheels for a game of chance with added poop jeopardy!
HTML Audio App: Creepy SFX for Haunted Walk
Demo HTML audio soundboard app for playing spooky SFX. Uses a hidden HTML audio element that is controlled by JavaScript events.
CSS Layout: 2 Column CSS Grid with Nested Grid
A demo web page layout that uses CSS grid-column and grid-row properties for positioning of header, nav, main, aside and footer HTML elements. Media query breakpoint at 768px to collapse from 2 columns to 1.
CSS Layout: 3 Column CSS Grid
A demo web page layout that uses CSS grid-column and grid-row properties for positioning of header, nav, main, aside and footer HTML elements. Media query breakpoint at 1200px to collapse from 3 columns to 2. Media query breakpoint at 768px to collapse from 2 columns to 1.
CSS Layout: 2 Column CSS Grid #3
A demo web page layout that uses CSS grid-column and grid-row properties for positioning of header, nav, main, aside and footer HTML elements. Media query breakpoint at 1200px to collapse from 2 columns to 1.
CSS Layout: 2 Column CSS Grid #2
A demo web page layout that uses CSS grid-column and grid-row properties for positioning of header, main, aside and footer HTML elements. Media query breakpoint at 768px to collapse the layout from 2 columns to 1.
CSS Layout: 2 Column CSS Grid #1
A demo web page layout that uses CSS grid-area property for positioning of header, main, aside and footer HTML elements. Media query breakpoint at 768px to collapse the layout from 2 columns to 1.
Canvas Animation: Particle Emitter #3
An interactive particle emitter animation rendered on an HTML5 canvas element. The visual experience is centred around particles that emanate from the middle of the canvas and disperse in random directions, creating a dynamic and engaging display.
Canvas Animation: Particle Emitter #2
An interactive particle emitter animation. At its core is a dynamic canvas where particles originate from the centre and radiate outward in random directions. These particles are rendered as white circles of varying sizes on a dark, semi-transparent background, creating a mesmerizing visual effect reminiscent of a glowing nebula or a field of stars.
Canvas Animation: Particle Emitter #1
An interactive particle emitter animation. At the centre of the page is a canvas element displaying particles emitted from the centre and moving outward in random directions. These particles are rendered as white squares on a dark, semi-transparent background, creating a dynamic and visually engaging effect.
