![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_WOTW.jpg)
Inspirational Website of the Week: Studio Almond
Studio Almond has an equisitely fine design with some lovely animations. Our pick this week.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_Divi.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_colorpicker.jpg)
Color Copy Paste
Cross-platform color copy paste from phone’s camera to web, Figma and Sketch plugin.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_max.jpg)
Hybrid positioning with CSS variables and max()
Lea Verou shares a solution for a tricky layout problem.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_shape.jpg)
Shape Divider App
Create fully responsive SVG shape dividers with customised code.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_fold.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_gradients.jpg)
Perceptually Smooth Multi-Color Linear Gradients
An interactive article by Matt DesLauriers on how to create perceptually smooth CIELAB spline gradients.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_flexboxgrid.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_keyboard.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_inset.jpg)
CSS tip
A great tip by Hakim El Hattab on using inset box-shadows.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_mediaqueries.jpg)
The complete guide to CSS media queries
A packed guide on media queries and how to use them.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_videos.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/Screen-Shot-2020-06-11-at-16.42.22.jpg)
HTML5 Boilerplate 8.0.0 Released
Read all about the 10th anniversary release of the epic HTML5 Boilerplate.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_ana.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_gridmagazine.jpg)
CSS Grid: Newspaper Layout
A fantastic newspaper layout made by Olivia Ng.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_contributing.jpg)
Web Platform Contribution Guide
A beginners guide to becoming a web platform contributor.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_is.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_chris.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_devdesigntools.jpg)
No Design Development
A collection of tools for developers who have little to no artistic talent.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_animation.jpg)
The Surprising Things That CSS Can Animate
Will Boyd explores some not-so-usual CSS properties for animations.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_jazz.jpg)
JazzKeys
JazzKeys lets you sculpt your messages using music.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_wikipedia.jpg)
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”.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/Screen-Shot-2020-06-11-at-16.42.37.jpg)
Supporting Dark Mode in Your Website
Another good guide on implementing light and dark modes on websites.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_speed.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_button.jpg)
Drag to confirm
A very nice button interaction idea by Aaron Ilker.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_table.jpg)
Grid.js
In case you didn’t know about it: Grid.js is a lightweight, advanced table plugin that works everywhere.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/Screen-Shot-2020-06-11-at-16.42.46.jpg)
Blobs
Another gem you migh have missed: Customizable blobs as SVG and Flutter Widget.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/06/C609_gridhover.jpg)
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.
The post Collective #609 appeared first on Codrops.