Collective #571

Inspirational Website of the Week: Esperanto
A fantastic interactive design that celebrates an exciting journey. Our pick this week.
Get inspired
CSS: An Art, a Science, a Nightmare (Everything You Should Know)
In this excellent guide, Tania Rascia covers the practical parts of CSS that are important on a daily basis.
Read it
Work with the Powerful Divi Theme Builder
Learn how you can enjoy complete control over your entire website with the new and powerful Divi Theme Builder.
Check it out
CSS Layout
A fantastic collection of popular layouts and patterns made with CSS. Made by Phuoc Nguyen.
Check it out
Advent of Code 2019
Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like.
Check it out
Use CSS Subgrid to layout full-width content stripes in an article template
Learn how to augment a Grid-infused article layout that allows for certain sections of content to break out into full-width areas.
Read it
An Introduction to Variable Fonts
An excellent guide to variable fonts by Jason Pamental.
Read it
Music and Web Design
Brad Frost's interesting thoughts on the parallels between Music and Web Design.
Read it
Web Components and the Accessibility Object model (AOM)
Léonie Watson writes about the AOM, an experimental JavaScript API that proposes several new features intended to solve existing accessibility use cases.
Read it
DrumBot
Play real-time music with a machine learning drummer that drums based on your melody. Read more about it in this article.
Check it out
Binary Music Player
A musical player, with a binary twist. Built by Tim Holman using Tone.JS.
Check it out
Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?
Drew McLellan talks to Smashing author Heydon Pickering about Inclusive Components.
Check it out
The State of UX in 2020
An insightful list of what to expect for User Experience (UX) Design in the next year.
Check it out
Make a smooth shadow, friend
A smooth shadow generator inspired by Tobias Ahlin's article. By Philipp Brumm.
Check it out
Re-creating the ‘His Dark Materials’ Logo in CSS
Michelle Barker re-creates an interesting typographic logo with CSS.
Read it
Firefox 71: A year-end arrival
A plethora of new developer tools features including the web socket message inspector, console multi-line editor mode and more are coming in the new Firefox version.
Check it out
Holiday CSSweater Generator
A great CSS pattern generator with a geeky Christmas theme. By Adam Kuhn.
Check it out
Interactive Hippo Button
A fun button that looks like a hungry Hippo. By Mariusz Dabrowski. Check out the written and video tutorial.
Check it out
Awesome Demos Roundup #11
A hand-picked collection of fantastic web experiments from the past weeks.
Check it out
Piano keyboard
An awesome Codevember demo by Ricardo Oliva Alonso.
Check it out
Motion Paths - Past, Present and Future | Codrops
An article by Cassie Evans that explores a few ways of moving an element along a path, including the upcoming CSS motion path module and the newly released GSAP3.
Read it