Collective #662
![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_WOTW.jpg?x86293)
Inspirational Website of the Week: Anagram Club
Thoughtful design with sharp type and great, creative details. Our pick this week.
Get inspired![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/Divi_new.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_market.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_menu.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_keyframers.jpg?x86293)
@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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_learncss.jpg?x86293)
Learn CSS
An evergreen CSS course and reference to level up your web styling expertise.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_democontainer.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_icons.jpg?x86293)
Iconoir
Iconoir is an open source SVG icons library with more than 900 icons.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_mmm.jpg?x86293)
mmm.page
A great visual tool for making a collage-like, unique website.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_aspectratio.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_learnallfrontend.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_demogrid.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_learndesign.jpg?x86293)
Codewell
Improve your HTML and CSS skills by practicing on real world design templates.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_datavis.jpg?x86293)
aRty face
A fantastic project by Duc-Quang Nguyen that translates pixels into data visualization.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_font.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_cheatsheet.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_cubic.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_urllength.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_newresponsive.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_cradle.jpg?x86293)
Newton's CSS cradle
A wonderful CSS only demo by Amit Sheen.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_synth.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_learncssgrid.jpg?x86293)
Euismod
Learn about CSS grid in a quick, easy, and interactive way.
Check it out![Collective 662 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_anim.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_lusion.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/C662_UIroundup.jpg?x86293)
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