Collective #609
Inspirational Website of the Week: Studio Almond
Studio Almond has an equisitely fine design with some lovely animations. Our pick this week.
Get inspired
Create WordPress sites with easy using Divi
You've never built a WordPress website like this before. Divi is more than just a WordPress theme, it's a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
Check it out
Color Copy Paste
Cross-platform color copy paste from phone's camera to web, Figma and Sketch plugin.
Check it out
Hybrid positioning with CSS variables and max()
Lea Verou shares a solution for a tricky layout problem.
Check it out
Shape Divider App
Create fully responsive SVG shape dividers with customised code.
Check it out
The Mad Magazine Fold-In Effect in CSS
Thomas Park made a CSS-based web version of the wonderful Mad Magazine's Fold-Ins by comic artist Al Jaffee.
Read it
Perceptually Smooth Multi-Color Linear Gradients
An interactive article by Matt DesLauriers on how to create perceptually smooth CIELAB spline gradients.
Check it out
Grid for layout, Flexbox for components
In this article Ahmad Shadeed explores the question about when to use Flexbox and when it's better to use Grid.
Read it
Optimizing keyboard navigation using tabindex and ARIA
Sara Soueidan's case study on how reducing the number of tab stops for consecutive identical links might improve the experience for keyboard users.
Read it
CSS tip
A great tip by Hakim El Hattab on using inset box-shadows.
Check it out
The complete guide to CSS media queries
A packed guide on media queries and how to use them.
Read it
Frontend Mentor Challenges
Learn how to create 14 different websites from scratch using HTML/CSS and JavaScript in this live series from the Frontend Mentor website.
Watch it
HTML5 Boilerplate 8.0.0 Released
Read all about the 10th anniversary release of the epic HTML5 Boilerplate.
Read it
Cool Little CSS Grid Tricks for Your Blog
Join Ana Tudor on an insightful journey through CSS madness and how to solve an interesting layout problem.
Read it
CSS Grid: Newspaper Layout
A fantastic newspaper layout made by Olivia Ng.
Check it out
Web Platform Contribution Guide
A beginners guide to becoming a web platform contributor.
Check it out
CSS :is() and :where() are coming to browsers
Read how the new CSS :is() and :where() pseudo-classes are now supported in some browsers. By Å ime Vidas.
Check it out
Revisiting Array.reduce()
Chris Fernandi revisits the Array.reduce() examples from one of his previous articles, and shows how he would approach those same tasks today.
Read it
No Design Development
A collection of tools for developers who have little to no artistic talent.
Check it out
The Surprising Things That CSS Can Animate
Will Boyd explores some not-so-usual CSS properties for animations.
Read it
JazzKeys
JazzKeys lets you sculpt your messages using music.
Check it out
How Wikipedia Lost 3 Billion Organic Search Visits To Google in 2019
A very interesting article on Wikipedia's traffic loss due to "zero-click results".
Read it
Supporting Dark Mode in Your Website
Another good guide on implementing light and dark modes on websites.
Read it
The Need for Speed, 23 Years Later
An short analysis on how, in spite of an increase in Internet speed, webpage speeds have not improved over time.
Read it
Drag to confirm
A very nice button interaction idea by Aaron Ilker.
Check it out
Grid.js
In case you didn't know about it: Grid.js is a lightweight, advanced table plugin that works everywhere.
Check it out
Blobs
Another gem you migh have missed: Customizable blobs as SVG and Flutter Widget.
Check it out
How to Create a Motion Hover Effect for a Background Image Grid
A short tutorial on how to achieve a motion hover effect on a background image grid.
Check it out