Inspirational Website of the Week: Rogue Studio Store
A wonderful store design with refreshing details and superb typography. Our pick this week.
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.
Frontend Practice
A collection of real websites for developers to recreate to improve and test their skills.
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.
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.
The Almost-Complete Guide to Cumulative Layout Shift
An in-depth guide on CLS (Cumulative Layout Shift) by Jess B Peck.
fit-content and fit-content()
Peter-Paul Koch explains fit-content and fit-content(), the special values for width and grid definitions.
Triangula
With Triangula you can generate high-quality triangulated art from images.
Building split text animations
A foundational overview of how to build split letter and word animations by Adam Argyle.
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.
Calendso
An open source Calendly alternative that can be self-hosted.
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.
The Endless Acid Banger
Amazing endless music generated in your browser by a randomised algorithm.
An introduction to WebAssembly for JavaScript Developers
Pascal Pares wrote this great introduction to the JavaScript WebAssembly interface.
Practical Use Cases For CSS Variables
Ahmad Shadeed highlights some use-cases where CSS variables shine.
Webpack Tutorial for Beginners: A Complete Step-by-Step Guide for 2021
Louis Lazaris’s essential Webpack guide for beginners.
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.
Flora
Endless flower scrolling demo by Hakim El Hattab.
CSS Tips
A list of interesting CSS tips and tricks compiled by Marko Denic.
JS classes are not “just syntactic sugar”
Andrea Giammarchi wants to clarify why it’s misleading to view JS classes as mere “syntactic sugar”.
Generating (and Solving!) Sudokus in CSS
Learn some incredible CSS skills by challenging yourself in this tutorial by Lee Meyer.
Platonics
A wonderful demo by Liam Egan.
Madosel
A family of responsive front-end frameworks that make it easy to design responsive websites.
5 Dashboard templates for Figma
A free set of 5 dashboard templates providing beautifully designed components such as calendars, charts, tables, chats, and more.
Getting started with CSS Custom Properties
A short and solid tutorial on how to use CSS custom properties.
Why has no one made a better Goodreads
Prateek Agarwal asks a resonable question and tries to find the answer.
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.
Inspirational Websites Roundup #25
A hot new collection of amazing website designs and experiences for your inspiration.
Rotated 3D Letters and Image Hover Effect
A rotated 3D like letters hover effect combined with a tilted image for a menu.
The post Collective #659 appeared first on Codrops.