Collective #659
Inspirational Website of the Week: Rogue Studio Store
A wonderful store design with refreshing details and superb typography. 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
Frontend Practice
A collection of real websites for developers to recreate to improve and test their skills.
Check it out
Noise in Creative Coding
Varun Vachhar's deep dive into what noise is, its variants, how to use it on the web and its applications.
Read it
Practical Accessibility
Sara Soueidan is launching a web accessibility course for web designers and developers. Subscribe and be among the first to know when it's out.
Check it out
The Almost-Complete Guide to Cumulative Layout Shift
An in-depth guide on CLS (Cumulative Layout Shift) by Jess B Peck.
Read it
fit-content and fit-content()
Peter-Paul Koch explains fit-content and fit-content(), the special values for width and grid definitions.
Read it
Triangula
With Triangula you can generate high-quality triangulated art from images.
Check it out
Building split text animations
A foundational overview of how to build split letter and word animations by Adam Argyle.
Read it
How to Convert HTML to an Image Using Puppeteer in Node.js
Learn how to set up Puppeteer inside of Node.js to generate images on the fly using HTML and CSS and then write the generated images to disk and Amazon S3.
Read it
Calendso
An open source Calendly alternative that can be self-hosted.
Check it out
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors
A guide that will cover several pseudo-class selectors that currently have the best support along with examples to demonstrate how you can start using them today. By Stephanie Eckles.
Read it
The Endless Acid Banger
Amazing endless music generated in your browser by a randomised algorithm.
Check it out
An introduction to WebAssembly for JavaScript Developers
Pascal Pares wrote this great introduction to the JavaScript WebAssembly interface.
Read it
Practical Use Cases For CSS Variables
Ahmad Shadeed highlights some use-cases where CSS variables shine.
Check it out
Webpack Tutorial for Beginners: A Complete Step-by-Step Guide for 2021
Louis Lazaris's essential Webpack guide for beginners.
Read it
Do You Need to Localize Your Website?
Putri Hapsari's guide to localization, what it is and what to consider when doing a web localization/translation project.
Read it
Flora
Endless flower scrolling demo by Hakim El Hattab.
Check it out
CSS Tips
A list of interesting CSS tips and tricks compiled by Marko Denic.
Check it out
JS classes are not “just syntactic sugar”
Andrea Giammarchi wants to clarify why it's misleading to view JS classes as mere "syntactic sugar".
Read it
Generating (and Solving!) Sudokus in CSS
Learn some incredible CSS skills by challenging yourself in this tutorial by Lee Meyer.
Read it
Platonics
A wonderful demo by Liam Egan.
Check it out
Madosel
A family of responsive front-end frameworks that make it easy to design responsive websites.
Check it out
5 Dashboard templates for Figma
A free set of 5 dashboard templates providing beautifully designed components such as calendars, charts, tables, chats, and more.
Check it out
Getting started with CSS Custom Properties
A short and solid tutorial on how to use CSS custom properties.
Read it
Why has no one made a better Goodreads
Prateek Agarwal asks a resonable question and tries to find the answer.
Read it
Texture Ripples and Video Zoom Effect with Three.js and GLSL
Learn how to replicate the ripples and video zoom effect from "The Avener" by TOOSOON studio using Three.js and GLSL.
Check it out
Inspirational Websites Roundup #25
A hot new collection of amazing website designs and experiences for your inspiration.
Check it out
Rotated 3D Letters and Image Hover Effect
A rotated 3D like letters hover effect combined with a tilted image for a menu.
Check it out