My CodePen Stuff!

While I'm not an actual web developer (yet), I do like playing around with all kinds of old and new web technologies.

I will list some of my "highlights" below, although you can also just browse on your own over here.

My first featured CodePen is an example on how to center a div. I created this pen in a few minutes in response to another Tweet by people who seem to think centering a div is the hardest thing to do. This is not the year 2000 anymore, though, and centering a div is not that hard these days.

Not that this example uses Flexbox, and centering a div can be done even easier using Grid.

Theme Remakes

One of the web-related things I like to do is trying to clone the layouts of other people's templates. All rights reserved and check with a lawyer if you want to use anything in a commercial capacity.

My Playbox

Instead of the "complete" templates above, the following Codepens are experiments using web technologies I learned about.

This is my first experiment using CSS Grid. It's a very simple responsive sidebar that stays fixed while the rest of the page scrolls.

This is my experiment on CSS variable inheritance. CSS variables are amazing in many ways.

This is a simple experiment in styling the new details element as an accordion. I personally really like the details element, because it offloads accessibility onto web browser developers.

This is a complete rewrite of the w3.css framework using modern technologies. Just for fun, and I recommend you to use Bootstrap instead.

This is just a mobile menu that turns into a sidebar on large screens, with different colors for the sidebar version.

This was actually a proper utility to have a visual reference for how much space the various amounts of ch size take up.

This is a horrible table-based webpage using React. Just because you use modern technologies doesn't mean you can't still write horrible code.

This is an attempt to make an off-canvas menu using Tailwind. It's functional but I'm not a designer so it looks terrible.

This is a web components test that also illustrates how to use CSS variables to inject styles into the Shadow DOM.

This and This are two different ways to make an image grid using Tailwind.

This is just a little experiment with the sibling selector. Specifically, how to hide a sibling when an element is hovered.

This is an experiment with display: table. Before Flexbox existed, there were a lot of people just using floats to make responsive layouts but I always thought that table display works much better. Of course, nowadays Grid and Flexbox do everything much better and easier.

This is a small example on how to use Tailwind design tokens without using Tailwind itself. I've written an entire page about my thoughts on Tailwind, and created this code example to illustrate what I think is a better way to do things.

This is my first experiment with using the @counter-style CSS rule. The example also illustrates what happens when you go past the defined range of the counter style.

This is a simple dropdown menu created with help from ChatGPT. Mostly just to explain how to make a dropdown menu because the code it gave me was defective.

This is a test with the new-ish @layer rule. Given two rules the later layer will always win, no matter what specificity each selector has.

This is my first working example of using position: sticky. The gotcha was making sure the sidebar isn't full height, which flex does by default.

This is a very simple off-canvas menu. It's written in vanillajs but I'd probably use a framework (even Alpine or petit-vue) if I made a real site.