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