DEV Community

Cover image for πŸ”§ Code & Creativity - Crafting Accessible Forms with a Dash of CSS Magic!
Adam Marsden
Adam Marsden

Posted on

πŸ”§ Code & Creativity - Crafting Accessible Forms with a Dash of CSS Magic!

Hey everyone ✌️ Here's a quick look at this week's newsletter:

🌐 From Pixels to Paper

🌟 Typographic Alchemy

✏️ Icon Design Decoded

Enjoy this week's edition πŸ‘‹ - Adam at Unicorn Club.


The Newsletter for Unicorns πŸ¦„

5-minute bite-sized weekly newsletter for design-savvy front-end devs and code-loving UX/UI designers. Filled with the best hand-picked resources. 100% free.

Subscribe for free


Sponsored by Webflow

Accelerate your agency’s growth

Whether you need to win new business or wow an existing client, Webflow empowers agencies to deliver high-quality client work, faster β€” without growing your dev budget.

Start building β†’


πŸ¦„ This week's best

Front-End solution: progress indicator

I knew when I set this challenge, there were multiple ways to solve it and I was not disappointed by the diversity in approaches that folks kindly sent to me.

A formula for responsive font-size

This CSS is now part of most websites I make: :root { font-size: calc(1rem + 0.25vw); }

The hidden power of typography

The science behind how design choices influence perception and behavior.


🧠 Fun Fact

The Origin of "Upper" and "Lowercase" - Did you know the terms "uppercase" and "lowercase" come from the physical layout of a traditional print shop? Letters used in printing were stored in cases; capital letters were kept in the upper case while the smaller letters were stored in the lower case.


Setting And Persisting Color Scheme Preferences With CSS And A β€œTouch” Of JavaScript

There are many ways to approach a β€œDark Mode” feature that respects a user’s system color scheme preferences and allows for per-site customization.

How to design icons in Figma

Design should be democratic, that's why our team refuses to hide the process behind our art.

Accessible Forms with Pseudo Classes

I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within.

From ink to pixel to ink

There’s something about the book, as an object, that managed to survive across all the various societal and technological changes.

πŸ”₯ Promoted Links

Share with 2,000+ readers, book a classified ad.

Get smarter about Tech in 5 min

Get the most important tech news, tools and insights. Join 90,000+ early adopters staying ahead of the curve, for free.

Support the newsletter

If you find Unicorn Club useful and want to support our work, here are a few ways to do that:

πŸš€ Forward to a friend

πŸ“¨ Recommend friends to subscribe

πŸ“’ Sponsor or book a classified ad

β˜•οΈ Buy me a coffee

Thanks for reading ❀️

@AdamMarsdenUK from Unicorn Club

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay