Collective #662
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_WOTW.jpg)
Inspirational Website of the Week: Anagram Club
Thoughtful design with sharp type and and great, creative details. Our pick this week.
Get inspired
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/Divi_new.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_market.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_menu.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_keyframers.jpg)
@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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_learncss.jpg)
Learn CSS
An evergreen CSS course and reference to level up your web styling expertise.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_democontainer.jpg)
Container Queries in Web Components
Max Böck played with Container Queries and shares a great demo.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_icons.jpg)
Iconoir
Iconoir is an open source SVG icons library with more than 900 icons.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_mmm.jpg)
mmm.page
A great visual tool for making a collage-like, unique website.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_aspectratio.jpg)
Aspect-ratio
Peter-Paul Koch shares a fallback for using aspect-ratio right now and talks about some more technical details.
Read it
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_learnallfrontend.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_demogrid.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_learndesign.jpg)
Codewell
Improve your HTML and CSS skills by practicing on real world design templates.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_datavis.jpg)
aRty face
A fantastic project by Duc-Quang Nguyen that translates pixels into data visualization.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_font.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_cheatsheet.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_cubic.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_urllength.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_newresponsive.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_cradle.jpg)
Newton’s CSS cradle
A wonderful CSS only demo by Amit Sheen.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_synth.jpg)
Sequencer64
An intuitive 64-step drum sequencer progressive web app built using React, Redux, and Tone.js.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_learncssgrid.jpg)
Euismod
Learn about CSS grid in a quick, easy, and interactive way.
Check it out
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_anim.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_lusion.jpg)
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
![Collective 662 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/05/C662_UIroundup.jpg)
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