Web demos tagged with "grid"

Page 1 of 1

Screenshot of HTML Audio App: Creepy SFX for Haunted Walk

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.

audio css grid halloween html javascript

Screenshot of CSS Layout: 2 Column CSS Grid with Nested Grid

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 grid

Screenshot of CSS Layout: 3 Column CSS Grid

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 grid

Screenshot of CSS Layout: 2 Column CSS Grid #3

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 grid

Screenshot of CSS Layout: 2 Column CSS Grid #2

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 grid

Screenshot of CSS Layout: 2 Column CSS Grid #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.

css grid

Web Demos

My web demos exist as a playground for creating experiments written in HTML, CSS and JavaScript.

I have previously used CodePen for experimenting with HTML/CSS/JavaScript, but in the spirit of IndieWeb POSSE, I decided to start hosting my demos myself.

Folksonomy

I like tag all content on my site. See below for all tags used within my web demos.

Subscribe

Click the link below to subscribe to my Demo feed in your favourite news reader client:

RSS feed

Philip Newborough and a donkey enjoying a beer.

About

My name is and I’m a full stack web developer living and working in Lincoln, England. This website (philipnewborough.co.uk) serves as my personal homepage. When I’m not working with tech, I love to ride bicycles with my wife and friends.

← An IndieWeb Webring πŸ•ΈπŸ’ β†’