Posted April 18th, 2024
🎨 Pixel-Perfect Positions – New CSS Feature “Anchor Positioning”
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.
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.
🦄 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.
🔥 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:
📨 Recommend friends to subscribe
📢 Sponsor or book a classified ad
Thanks for reading ❤️
@AdamMarsdenUK from Unicorn Club