🧩 100 FREE Frontend Challenges – Sharpen Your Skills!
Tags: webdev, css, design, ux
Published: 2024-07-10 17:30:00

**Hey again** 👋

This weeks newsletter is jam-packed with great reads and resources, here's a quick look:

🛠️ Transitioning to Auto Height in CSS  
🔧 Essential JS Snippets for Modern Web Features  
👁️ Taku Satoh's Design Philosophy  

Enjoy 🤗 - Adam at Unicorn Club.

---
## 📬 Want More? Subscribe to Our Newsletter!

Get the latest edition delivered straight to your inbox every week. By subscribing, you'll:

-   **Receive the newsletter earlier**  than everyone else.
-   **Access exclusive content**  not available to non-subscribers.
-   Stay updated with the latest trends in design, coding, and innovation.

**Don't miss out!**  Click the link below to subscribe and be part of our growing community of front-end developers and UX/UI designers.

🔗  [Subscribe Now - It's Free!](https://unicornclub.dev/ref=devto)

---

Sponsored by  [Webflow](https://go.unicornclub.dev/webflow-no-code)

## [Take control of HTML5, CSS3, and JavaScript in a completely visual canvas](https://go.unicornclub.dev/webflow-no-code)

[![](https://unicornclub.dev/wp-content/uploads/2024/06/designer.png)](https://go.unicornclub.dev/webflow-no-code)

Let Webflow translate your design into clean, semantic code that’s ready to publish to the web, or hand off to developers.

[Get started — it's free](https://go.unicornclub.dev/webflow-no-code)

---

## 💻 Dev



[**45 CSS Breadcrumb Examples**](https://www.frontendplanet.com/css-breadcrumb-examples/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Explore 45 CSS breadcrumb designs, featuring dark mode, pixel-perfect accuracy, and stylish hover effects.



[**Browser Support Tests in JavaScript for Modern Web Features**](https://frontendmasters.com/blog/browser-support-tests-in-javascript-for-modern-web-features/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

This is just a no-frills post with code snippets showing how to test support for some newish features in HTML, CSS, and JavaScript.



[**Transitioning to Auto Height**](https://css-tricks.com/transitioning-to-auto-height/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The news: transitioning to auto is now a thing! Well, it’s going to be a thing.



[**100 FREE Frontend Challenges**](https://dev.to/bigsondev/100-free-frontend-challenges-3f0?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

In the spirit of building strong habits and the #100DaysOfCode idea, we decided to make our list of beautifully crafted "Design To Code" challenges publicly available.

---

### **💭 Fun Fact**

******Pixel Etymology****** - The term "pixel", short for "picture element", was coined in 1969 to describe the individual components of a television image. This term has become fundamental in digital design, referring to the smallest element of an image on digital displays.

---

## 🔘 Design + UX



[**Just enough design (and no more)**](https://designlobster.substack.com/p/150-just-enough-design-and-no-more?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

We’ll be exploring the work and ideas of Japanese designer Taku Satoh—from chopsticks to children’s toys and imitation sushi for Issey Miyake.



[**Why toggle switches suck (and what to do instead)**](https://adamsilver.io/blog/why-toggle-switches-suck-and-what-to-do-instead/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The idea of using toggle switches (over radio buttons and checkboxes).



[**Everything New in Figma**](https://buttondown.email/joeyabanks/archive/baseline-19-config-2024-everything-new-in-figma?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Figma’s 2024 Config conference just wrapped up, and the team shared several new and exciting product announcements.



[**The Power of Grids in Design**](https://blog.shwetakaushal.com/the-power-of-grids-in-design?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

When we think about the most impactful designs, whether in print, web, or user interfaces, we often notice a balance and harmony that makes the design attractive and functional.


[**T-Shaped vs. V-Shaped Designers**](https://www.smashingmagazine.com/2024/06/t-shaped-vs-v-shaped-designers/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Many job openings in UX assume very specific roles with very specific skills. Product designers should be skilled in Figma. Researchers should know how to conduct surveys. UX writers must be able to communicate brand values.

## 🗓️ Upcoming Events

Check out these events

### [🔘 Hatch Conference](https://www.hatchconference.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Remote • Berlin_

The event where experienced UX & Design Professionals in Europe meet to learn, get inspired and connect. 4-6 September

[See event →](https://www.hatchconference.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

### [💻 Intersection](https://www.intersection-conference.eu/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Turin, Italy_

Where Design meets Development. This year, we’re reimagining the way professionals engage with technology, under the theme “Revolutionizing User Interfaces: The Dawn of Intuitive Digital Worlds“. 3-4 October

[See event →](https://www.intersection-conference.eu/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

### [🟨 UtahJS Conference](https://utahjs.com/conference/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Sandy, UT_

The 2024 UtahJS Conference will be a 1-day conference on Friday, September 13

[See event →](https://utahjs.com/conference/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

### [🧠 UX Y'all Conference](https://www.uxyall.org/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_North Carolina_

Our local conference encourages our community to share their knowledge and experience. Lightning talks, keynote talks, local speakers and workshops. September 19-20

[See event →](https://www.uxyall.org/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

## 🔥 Promoted Links

_Share with 2,500+ readers, book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)._



[**What Current & Future Engineering Leaders Read.**](https://go.unicornclub.dev/pointer)

Handpicked articles summarized into a 5‑minute read. Join 35,000 subscribers for one issue every Tuesday & Friday.

  



[**Be a leader. Outperform the competition 🚀**](https://go.unicornclub.dev/open-source-ceo)

Join 30,000+ weekly readers at Google, Canva, Stripe, TikTok, Sequoia and more. Come learn with us!


#### 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](https://preview.mailerlite.io/preview/146509/emails/125031340327307057)

📨 Recommend friends to  [subscribe](https://unicornclub.dev/)

📢 [Sponsor](https://unicornclub.dev/sponsorship)  or book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)

☕️ [Buy me a coffee](https://www.buymeacoffee.com/adammarsdenuk)

_Thanks for reading ❤️  
[@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK)  from Unicorn Club_