← Back to Newsletters

🎨 Pixel-Perfect Positions - New CSS Feature "Anchor Positioning"

April 17, 2024

Hey 👋 I hope you're having a great week. Here's a quick look at this week's newsletter:

🎮 Build Wordle with HTML & CSS
📱 Responsive HTML Secrets
🦎 Play the Gecko Mini-Game Without a Single Line of JS!

Enjoy this week's edition 👋 - Adam at Unicorn Club.

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

How would you build Wordle with just HTML & CSS?

The approach I took for this example leans hard on HTML form validation for the game logic.

Curious Geckos 🦎🦎🦎: The Most Precise CSS-only Position-Aware Mini-Game!

A CSS-only, no JS, no checkbox, position-aware (hover/touch aware) interactive gecko-luring pastime!

Animated Tab Bar Using HTML and CSS

In this tutorial, we will create an animated tab bar using HTML and CSS. This tab bar will feature smooth transitions and interactive elements, providing an engaging user experience.

Drawing a Line to Connect Elements with CSS Anchor Positioning

CSS Anchor Positioning provides a better way to position an element in relation to another element.

🧠 Fun Fact

The Color of Hyperlinks - Hyperlinks are traditionally blue for a practical reason. The earliest web browsers were limited in color display, and blue was chosen as the default hyperlink color because it was the darkest color and offered the most contrast against a white background, making it easy to distinguish.

Layered Toggles: Optional CSS Mixins

The next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers, available today in every browser that supports them.

How to think about HTML responsive images

The days with an immobilized knee are long and I’ve just read through the Images section of the HTML Standard, as one does, hoping to better understand how responsive images work.

Rethinking personas: Empathy and inclusion in UX design

By using more inclusive methods like Jobs-To-Be-Done and Empathy Maps, we can ensure a better understanding of the diverse user needs to create more meaningful and accessible products.