James' Playground

This is where I share experimental things I have made.

You can explore more of my website at James' Coffee Blog.

Things I made

• a WIP HTML web component to indicate the license of a web page
• a sort-of-working but sort-of-not-working input with background highlighting for terms that match "{text}:{text}"
• a tool that lets you "replay" a blog post as it was typed
• an experiment with CSS anchor positioning
• an a-z contact bar web component
• a pink blog post layout
• a layout that shows a list of posts, which could be used as a home page for a feed or community news aggregator
• a page that loads in dark mode between 6pm and 6am
• a nav bar that fades away on page load and appears/disappears on hover
• color-box custom HTML element with CSS color-mix
• a trick-or-treat reveal implemented using CSS checkboxes
• a two-column content layout
• 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:

• a dense feed reader interface
• a minimal concept for a new Breakfast and Coffee review site
• a list of search filters
• a sparkline showing a comparison of word frequencies over time
• a minimal new tab page
• my blog with an opaque background image from Club Penguin
• my blog with a background image of a palm tree
• the JameSQL algorithm experimentation interface

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

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.

Learning HTML

If you are starting your HTML journey, I recommend the excellent HTML for People guide.

If you have questions about any of the projects on my playground, feel free to email me at readers @ jamesg [dot] blog. I'd be happy to answer questions!