Ugly Duck

Designer, developer, hardware tinkerer, open source advocate & consumer of dark roast coffee.

Hello, my name is Bradley Taunt and this is my little piece of the internet. I'm a web designer / developer hybrid obsessed with performance and accessibility. I also enjoy playing with (read: breaking) computer hardware - specifically single board computers and vintage electronics.

I believe in a free and open web, which is why I try to contribute as much as possible to the open source community. Every little bit helps.

I also have a love and passion for creating engaging landing pages that convert. That's why I run a little small, personal venture called Stick Your Landing. Feel free to get in touch if this is something I can help you with!

This blog is a place for me to just dump my thoughts, ranging from design patterns, CSS hacks/demos, custom SBC builds, linux distros and even video games. Articles written here are more or less for my own reference in the future - don't take them so seriously. Some of my more popular and "customized" essays are listed below, if that's your cup of tea.

Enjoy your stay!

Articles & Essays

Personal articles, demos and occasional ramblings.
Subscribe via RSS

ThriftyName: $5 Brand Names

Self-Hosting Fathom Analytics with DigitalOcean

Setting Up Fathom Analytics with Netlify

Introducing Writxt

Animated Radio Tab Toggles

Disabling Comments in WordPress

Pure CSS Bar Graphs with Graceful Mobile Fallbacks

Obvious Javascript 'Injection' Fallback

Bidirectional Scrolling: Why Not Both?

Menu Toggle with Pure CSS

Poor Man's CSS Full-Bleed Layout

Simple Navigation Setup in Jekyll 3.9.0

Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal

Over-Engineering an Oil Tank Gauge

My Raspberry Pi Desktop

Linux Mint MacBook Air Setup

Goodbye WordPress, Hello Jekyll (Again)

Audio Hotkeys on Linux Mint

Improving Github’s New Design

Keynote Slides with Pure CSS

Quick & Dirty Theme Switcher

Mini Interactive Keyboard with Pure CSS

Fixing LocalWP on Fedora 32

WP Enqueue for Beginners

Faking 3D Elements with CSS

Stripe Menu Dropdowns (CSS)

Base64 All The Things! (Sometimes)

How to "FLOSS" as a Web Designer

Web Development on a $200 Chromebook

Billing for One CSS Change

Very Basic Form Styling

Improving Tufte CSS for Jekyll

Stop Using Sticky Navigation on Mobile

Plain Text Emails, Please

Being More Efficient as a Designer & Developer

Dynamic Checkboxes

Styling Empty Table Cells

Using HTML Validator Badges Again

They Won't Wait: A Warning for Slow Websites

Publishing Simple Books With Jekyll

Using Hamburger Menus? Try Sausage Links

Making Tables Responsive With Minimal CSS

Write HTML Like It's 1999

Using user-select

News Websites Are Dumpster Fires

Text Align: Justify

Improving receipt UX

Cut your forms in half

First letter pseudo element

Minimal CSS: Dropdown menu

CSS Character unit

Browser history sucks

Yes, I still use jQuery

CSS value: current color

CSS: Indenting text

Simple Does Not Mean Ugly

Skip to content button

Prescription form UI improvements

Animated card tiles

Easy toggle switches

Super Mario blocks in CSS

Proper UI hierarchy

Tabbed content without JavaScript

Easy custom radio inputs

Basic gulp build for Sass

Better Box Shadows


Using parent selectors in CSS

Width or flex-basis?

Adaptable flexbox grid

What happened to self-hosted blogs?

Pure CSS simple dropdown plugin

Simple accessibility

Using multiple CSS background images

Setting up a free SSL

CSS video backgrounds

CSS variables

Stay hungry

Open source typeface pairings

ET-Jekyll theme

Chasing performance

The death of personality

Unsolicited design review - Dropbox

Goodbye CSS preprocessors

Designers need thicker skin

The wonders of text ellipsis

Aqua UI CSS buttons

Who is Ugly Duck?

The man, the myth, the legend (not really)

About Me (The Long Version)

If you're reading this page, that means you want to know a little more than what I mention on the homepage. Thanks for your interest and curiosity!

I'm Bradley Taunt, a web designer/developer hybrid with over 10 years of professional experience across large enterprise application software, all the way down to mom-and-pop shops. I have a strong emphasis on building maintainable CSS, with a passion for accessibility and web performance. Ugly Duck is the name of my one-man web shop.

When I'm not pushing pixels or hacking up some code, you can find me experimenting with the latest CSS, splitting batches of firewood, cheering on the Ottawa Senators, or hanging out with my wife and our two sons. Feel free to also check out my reading list.

I'm a huge fan of video games in general but tend to get sucked into looter shooters and in-depth RPGs. Whenever I manage to get any "free time" (that's a difficult thing to obtain with two kids under 3) you'll find me grinding out power levels in Destiny 2 or being summoned for some jolly co-op in the Dark Souls trilogy.

Why does this site look so plain?

The web has become infuriatingly bloated over time. Tracking scripts, third-party advertisements, fancy "visual" effects, auto-playing videos, and overall just poorly structured HTML has made the internet a horrible place to visit (most of the time). I had the choice to make my personal website "cool" and "flashy" in order to stand out among my peers. I could have used some cutting edge JavaScript libraries, impressed visitors with intricate CSS animations, and took advantage of the latest browser features available.

But I didn't. Instead I designed my site with barely any CSS and zero JavaScript. Feel free to use it yourself or fork it and tweak to your own liking!

Most visitors to this blog just want to read the content. Why put so much garbage in their way to do something so simple? The web can be a better, faster, cleaner place - you just have to make the effort.

Learn more about privacy on this website


Working as a designer at Purism, the maker of devices that are open and respect human rights. Currently designing and developing all web-related properties.

Skills & Tools

HTML, CSS, JS, PHP, WordPress, React, Sketch, Photoshop, Inkscape, GIMP


A collection of on-going and open source projects I've worked on throughout the years.


This website will always respect your privacy - something that all sites should do.

Ad Free. Forever.

Don't be confused - I do have a sponsor section on this website. But rest assured, I vet those products / services and manually add them to the site when approved. You can find out more about sponsorships here.

As for 3rd party ads? Screw em. The Internet would be a much better and more tolerable place without them. Not to mention the terrifying amount of data they collect...

Open Source, Privacy Focused Analytics

This site uses the open source analytics platform, Fathom (this link gets you $10 off your first invoice!). Everything is served from and respects your privacy and freedom to browse this site without the worry of personal data collection. Why would I want that information anyway?

If interested, you can find out more about Fathom here.


If you happen to enjoy any content on this site and have a burning urge to somehow thank me for it - feel free to support me by using my curated referral links or sponsor products / services. You can learn more about the referral links here and more about sponsorships here.

Thank you.


The nitty-gritty details about this site

Static Site Generator

The website is built on top of the latest version of Jekyll. It's a stable SSG and although not *as* popular as it once once, I still love it. I use a small amount of extras for the build, including:

Default Typefaces

I'm using the very beautiful (in my opinion) default system sans-serif typeface, for both article text and the monospace code examples. I highly recommend this typeface to anyone looking for a well designed font, catered towards readability. Plus, you save on bandwidth not loading in custom fonts.

The average page weight on this site is 65KB. That's pretty solid for a personal blog that also loads most of it's pages in a single HTML file.

Performance Metrics

This website only makes one CSS request and uses no JavaScript. The metrics below are based off of Google's Lighthouse audit scores (so take them with a grain of salt).

Perf. A11y Practices SEO
99 93 100 100

Version Control & Hosting

All version control is handled through a private repo on Github (I plan to open source everything once I do some tidying up). I host through Netlify since they make it dead simple to setup things like SSL certs and build via git push commands.


This site is an honorary member of the 1MB Club
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.


Have questions or suggestions regarding this website? Feel free email me.

Becoming a Sponsor

Help support an indie designer writing about the web, all while promoting your product or service

Hold Your Horses - I'm No Sell-Out

First thing to understand about sponsorship - I have to actually like your product/service. I won't post just anything on this blog since it reflects my own personal views. This means I need to stand behind anything I promote here, otherwise I would lose all credibility with my audience.

After all, nobody likes a great, big phony.

What Does It Cost?

The flat fee is $250/month. The duration of the sponsorship can be discussed and customized.

I tend to publish ~2-3 articles each month and promote each piece across my channels. This site receives around 400-1000* unique visitors every month - giving your product / service a good amount of coverage for a reasonable cost.

* sometimes this number can spike as well

What You Get

Sponsors get placed on the top spot on the site, where they can share:

About Referrals

This website features curated referrals in the sidebar panel. Allow me to explain their presence in more detail.

No Spam or Gimmicks

I share a great deal of open source work, demos and tutorials on this little piece of the web. That takes extra time and effort on my part - for which I do not get officially compensated for.

(Don't get me wrong - the kind words I receive are wonderful!)

So instead of loading a bunch of garbage ads or sneaking affiliate links to products in my articles, I decided to only list services that I use and have vetted for myself.

Services That I Actually Use

The sidebar might change over time, but for the most part it will showcase items that are part of my own toolset. By sharing these products, you can be confident that I vouch for these services (since I actively use them day-to-day).

You get to use great products with a little more confidence, while putting a couple bucks in my pocket - indirectly supporting this site.

So if you plan on using any of these services or products, maybe consider using my referral links and help keep this site ad-free!


Learn more about this website's privacy standards.

Jekyll Themes

A collection of custom Jekyll themes I have created. All themes are open source and free for personal/commercial use.

John Doe Jekyll
Currently being used on this website. Based off the very amazing John Doe single HTML file website by Gregory Cadars.

Based off of Dave Liepmann's Tufte CSS - which takes it's style and inspiration from the book and handout designs of Edward Tufte.

An insanely fast and performance-based theme with a perfect Lighthouse score.

Simple and minimal blogging theme named after yours truly. (Originally used this as my personal website theme)

Reading List

A shortlist of books that I have found helpful or entertaining.


Book Title Author
The Visual Display of Quantitative Information Edward Tufte
Don't Make Me Think Steve Krug
The Design of Everyday Things Don Norman
Great American Folklore Kemp P. Battle


Book Title Author
The Metamorphosis Franz Kafka
Of Mice and Men John Steinbeck
Fight Club Chuck Palahniuk
The Stand Stephen King
The Lord of the Rings (Trilogy) J.R.R Tolkien
Berserk (Series, Manga) Kentaro Miura

If you have any suggestions that you think I might enjoy, please feel free to let me know!