Collective #662

Inspirational Website of the Week: Anagram Club
Thoughtful design with sharp type and and great, creative details. Our pick this week.
Get inspired

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out

pmndrs market
A new place for downloading web-ready 3D assets. Download CC0 models, textures and HDRI’s that you can use right away. Read more about it here.
Check it out

Frustrating Design Patterns: Mega-Dropdown Hover Menus
Vitaly Friedman writes about what to keep in mind when designing and building a mega-dropdown and then explores alternatives and shares details for designing a better UX.
Read it

@keyframers: Scrolly Path with Cassie Evans
Cassie Evans joins David Khourshid and Stephen Shaw to build a beautiful scroll animation using SVG paths and GSAP.
Watch it

Learn CSS
An evergreen CSS course and reference to level up your web styling expertise.
Check it out

Container Queries in Web Components
Max Böck played with Container Queries and shares a great demo.
Check it out

Iconoir
Iconoir is an open source SVG icons library with more than 900 icons.
Check it out

mmm.page
A great visual tool for making a collage-like, unique website.
Check it out

Aspect-ratio
Peter-Paul Koch shares a fallback for using aspect-ratio right now and talks about some more technical details.
Read it

Frontend Development in 2021 (A Complete Guide)
Harry Wolff explains all the libraries and technologies you need to know about to become a frontend expert.
Watch it

Modern Blog Layout with CSS Grid
A great demo showing a well designed blog layout with individual scroll panels made by Aysenur Turk.
Check it out

Codewell
Improve your HTML and CSS skills by practicing on real world design templates.
Check it out

aRty face
A fantastic project by Duc-Quang Nguyen that translates pixels into data visualization.
Check it out

5 steps to faster web fonts
Learn how to fine-tune your font files and optimize your loading strategy for maximum speed and minimum FOUT.
Read it

Modern Javascript: Everything you missed over the last 10 years
Sandro Turriate shares wrote a cheatsheet to get you caught up on all the JavaScript goodness that’s widely supported in modern browsers.
Check it out

Advanced CSS Animation Using cubic-bezier()
Temani Afif shares some tricks that might help make things easier when dealing with complex CSS animations.
Read it

A(x56) – URL Lengthener
Jazz up your short and readable URLs to make them look, well, long and unreadable! A fun project by Piero Maddaleni.
Check it out

The new responsive: Web design in a component-driven world
Una Kravets article on controlling macro and micro layout in a new era of responsive web design.
Read it

Newton’s CSS cradle
A wonderful CSS only demo by Amit Sheen.
Check it out

Sequencer64
An intuitive 64-step drum sequencer progressive web app built using React, Redux, and Tone.js.
Check it out

Euismod
Learn about CSS grid in a quick, easy, and interactive way.
Check it out

How to easily add CSS animations to your projects
Chris Ferdinandi shows how to use Animista by Ana Travis to add CSS animations easily to any project.
Check it out

Curly Tubes from the Lusion Website with Three.js
Learn how to replicate the curly tubes from the Lusion website using light scattering in Three.js.
Check it out

UI Interactions & Animations Roundup #16
Get inspired with this special pick of the best UI animation and interaction shots from the past couple of weeks.
Check it out