#html#css#tutorial#webdev
Re-creating a Pantone Color Deck in CSS
If you’ve ever held a Pantone fan deck — the kind graphic designers used to carry around like a...
Mads Stoumann6 min read
Author profile
Mads Stoumann
I'm a tech director, web developer, graphic designer, musician, blogger, comicbook-geek, LEGO-collector, food lover … as well as husband and father!
Articles by @madsstoumann
Browse the latest writing surfaced through DevArt.
Mads Stoumann6 min read
#javascript#security#webdev#tutorial
Creating a Maintenance Page using a Cloudflare Worker
Last night, an Azure outage took down several sites my company maintains. While the servers were...
Mads Stoumann4 min read
#security#webdev
Adding Security Headers on Cloudflare
Four years ago, I wrote a posts about Security Headers. In that post, I mentioned how to set up...
Mads Stoumann3 min read
#javascript#css#webdev#showdev
Weather Widgets
Everyone talks about it — but no one does anything about it. What? The weather, of course! So, at...
Mads Stoumann4 min read
#css#tutorial#webdev#showdev
Piano Chords in CSS
A couple of months ago, I wrote an article about Guitar Chords in CSS, using the new typed attr()...
Mads Stoumann4 min read
#css#tutorial#webdev#showdev
Charts in CSS
Charts have been done in CSS many times before — there's even a dedicated project. So why this post?...
Mads Stoumann6 min read
#css#webdev#showdev#tutorial
Guitar Chords in CSS
In my previous article, I looked into the new, improved attr() method in CSS. I was over the moon...
Mads Stoumann5 min read
#css#webdev#tutorial#showdev
Phases of the Moon in CSS
You might have heard that the humble, old attr() method in CSS just got a big update. It's only in...
Mads Stoumann4 min read
#css#webdev#tutorial#showdev
How To Create Gauges in CSS
With modern CSS we can create beautiful gauges with ease. It involves a bunch of techniques, so let's...
Mads Stoumann6 min read
#webdev#css#javascript#showdev
Digital Clocks in CSS
In my previous post, I looked into clocks and watches, mimicking classic, analog watches. Now, how...
Mads Stoumann6 min read
#css#javascript#webdev#tutorial
Clocks and Watches in CSS
A couple of years ago, when CSS trigonometry functions became baseline, I wrote an article about...
Mads Stoumann5 min read
#javascript#css#webdev#showdev
The Unofficial Dev.To Embed Web Component
The other day, I re-discovered the dev.to API and found out that it can be used without an API key....
Mads Stoumann2 min read
#javascript#webdev#webcomponents#tutorial
Creating a Print Preview Web Component
I’m currently working on a large e-commerce project — an update to an app I coded back in 1994-1996!...
Mads Stoumann4 min read
#css#javascript#webdev#showdev
Art with CSS Grid and SVG filters
Have you ever explored the power of grid-auto-flow: dense? When combined with randomly generated...
Mads Stoumann2 min read
#javascript#css#webdev#tutorial
Creating a Scroll Grid
The other day I noticed the similarities between Tailscale and MUBI — not the companies, of course,...
Mads Stoumann4 min read
#javascript#css#webdev#tutorial
Can I Drive? Coding an Alcohol Tester
In Denmark, where I live, we unfortunately hold a record within Europe: our kids are the heaviest...
Mads Stoumann3 min read
#javascript#css#webdev#tutorial
Designing Better Tables: Using Popovers for Extra Data
When working with large data tables, displaying all available information at once can often make the...
Mads Stoumann4 min read
#css#webdev#showdev#tutorial
The Golden Ratio in CSS
The golden ratio, also called the golden number, golden proportion, or even the divine proportion, is...
Mads Stoumann3 min read
#css#javascript#webdev#tutorial
CMYK, RGB, and Building a Color Visualizer
When I was a kid, I published a fanzine about comics. This was long before I had a computer—it was...
Mads Stoumann4 min read
#devchallenge#frontendchallenge#css#javascript
Alien Signals — 2-in-1 Challenge
This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space But it's also a...
Mads Stoumann2 min read
#css#webdev#showdev#tutorial
The Periodic Table in CSS
Like the Solar System, The Periodic Table has been done in CSS a lot of times … but it has never been...
Mads Stoumann4 min read
#css#webdev#showdev#tutorial
And the Oscar Goes to … Coding a Chronology Component
Earlier this year, a friend of mine shared a massive poster he had been working on for the Copenhell...
Mads Stoumann3 min read
#css#webdev#showdev#tutorial
The Solar System in CSS
The Solar System has been done in CSS a lot of times — just search Codepen! So why do it...
Mads Stoumann3 min read
#javascript#webdev#showdev#css
Line Numbers for <textarea> using SVG
The other day I was working on a JSON Schema Generator, and wanted to display line numbers in a...
Mads Stoumann4 min read
#css#html#webdev#showdev
Build A CSS Word Search Game In ... CSS!
I've heard it so many times: CSS is not a programming language — or — why do it in CSS, when you can...
Mads Stoumann2 min read
#css#javascript#webdev#showdev
Sunday Fun: Re-creating a Radiohead cover
The other day, I read an article about how Radiohead's graphic designer, Stanley Donwood, got...
Mads Stoumann2 min read
#devchallenge#frontendchallenge#css#javascript
A Trip To The Beach
This is a submission for [Frontend Challenge...
Mads Stoumann2 min read
#frontendchallenge#devchallenge#css
La Luzerne
This is a submission for Frontend Challenge v24.04.17, CSS Art: June. Inspiration "La...
Mads Stoumann2 min read
#css#webdev#tutorial#showdev
Getting Creative with CSS Grid
Grids don't have to be boring! You can easily spice up a classic 12x12 grid with very few lines of...
Mads Stoumann3 min read
#css#webdev#tutorial#javascript
Wheel of Fortune with CSS
A "Wheel of Fortune" component just popped up in my feed. I always spin, but never win! Anyway, this...
Mads Stoumann4 min readAdvertisement