The Playground

This is where I share experimental things I have made.

License

In the spirit of the open web, you are welcome to use any of the code in the documents linked below for your own projects. You don't have to provide any attribution, although if you do find my code useful or have questions you are welcome to email me!

I reserve all rights to the images used, including my mascot and photography. Please swap these out if you are using the code.

Things I made

a tool to make image maps (the coordinates don't scale yet; I really need to add this feature before the tool is ready to use)
a kanban board (see the project github repository)
another experiment in presenting polls with a rough explanation of how indie websites could vote
convert time between zones using the JavaScript native date and time APIs
a h-feed of h-event objects
the "pange": as many HTML tags as I could fit into 255 characters
a gravity button (see a version on my main website)
build a colour scheme by setting a single primary colour (using color-mix)
a button to show/hide alt text (v2)
a four-layer linear gradient at the top of a page
a full-bleed image with a title in nice typography
a design for a list of books page
a poll design
my first piece of CSS art
show preview image on hover (CSS only)
toggle the correct checkboxes to show a message (inspired by the complex levers in films where you need to pull exactly the right ones to open a door)
a button to show/hide alt text visually on a web page
how HTML is rendered when a closing angle bracket is missing (view source to compare source to rendered output)
turn one or more paragraphs of text into blackout poetry
use checkboxes to show/hide text by author on a web page
a mobile-first HTML editor (experimental)
a HTML-only scheduling layout
a CSS checkbox-based list filter
learning that fragment links open their parent details tag
a CSS-only barista game
a CSS-only checklist
a layout for a digital sketchbook, inspired by art gallery websites
a text-only, comic-inspired homepage layout
a Taylor Swift discography website (folklore layout)
a minimal home page design with two columns
a design for a notes page
a minimal layout for a blog post (see with sidebar)
a stanza from "how did it end?" with text formatting
a story
a poem
A list of bookmarks
Alternating green and white lines with CSS
Live editing text on a page with a HTML form
a blueprint layout for my website (home, blog post, about)
a London travel guide page
a menu for a coffee shop
a cappuccino duotone concept for my blog (see blog post example, and category page example)
a manuscript web design
a duo-colour article layout
an (unfinished) recipe page
a colourful list of articles
a concept for a site where you can share moments of joy
a JavaScript-based "copy code" button (v2)
a grid of logos made with CSS grid
a blue site home page
a light-coloured, center-aligned blog post with images that escape the text container
an article page with a full-width image banner
a slim-width article layout
a playful, Ukulele-themed website layout
a blueprint-inspired table
an experiment with dropcaps
an experiment with dropcaps, with a grid of four images
an experiment with dropcaps, with an image-based navigation
Kind cards (the form doesn't submit, but you'll get the idea :) )
a web page with clickable images
documenting a vibe on a web page (made in February 2024)

Screenshots

Sometimes I take screenshots of designs I have made on other web pages that I want to save for later.

Here are a few of them:

I also keep a gallery of screenshots for concept layouts for my website on my jamesg.blog/themes page.