Collective #643
Inspirational Website of the Week: Sam Goddard Dev
A great portfolio with a strong design and fantastic 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
Figma Crash Course
A fantastic free Figma course by Pablo Stanley.
Check it out
The future of CSS: Higher Level Custom Properties to control multiple declarations
Bramus Van Damme on the exciting new idea of Higher Level Custom Properties.
Read it
The Art of Building Real-life Components
A walkthrough on building a component with HTML & CSS in details by Ahmad Shadeed.
Read it
How we built the GitHub globe
Learn how the globe was built for the new GitHub website.
Read it
ASCII Art Playground
A browser-based live-code environment with text-only output. Learn how to use it in this manual.
Check it out
Translucent Pearls
A beautiful demo of translucent pearls by Arno Di Nunzio.
Check it out
Magazine Layout for Viola Site
A great implementation of a multi-column layout.
Check it out
Top Pens of 2020 on CodePen
The yearly collection of the most hearted Codepen demos is out!
Check it out
Options for styling web components
Nolan Lawson shows the different ways a standalone web component can expose a styling API and covers strengths and weaknesses of each technique.
Read it
Discover the best websites of 2020!
Explore the best designs on Awwwards of 2020 and leave your vote.
Check it out
The Devil’s Albatross
Learn how to build an algorithmic layout that switches from two centered elements to a spaced-out flex layout. By Nils Binder.
Read it
Art Direction for Static Sites
Dave Rupert shows how to spice up your blog posts with minimal effort.
Check it out
You want overflow: auto, not overflow: scroll
Some very useful insights regarding the visible scrollbar problem by Kilian Valkhof.
Read it
The State of CSS 2020: Trend Report
The State of CSS survey results boiled down to the three key CSS trends of the past year.
Check it out
Back to basics: adding a playback speed control to an audio player
Christian Heilmann shows how to add a speed control in audo players using basic HTML5 and JavaScript.
Read it
Fire ball 2
Yoichi Kobayashi’s sketch that is an example of how to use SkinnedMesh, Skeleton, and Bone by creating a fireball tail.
Check it out
Simulating Drop Shadows with the CSS Paint API
Steve Fulghum looks at how we can use the CSS Paint API to paint a complex shadow within a border image.
Read it
Fantasy UIs
If you didn’t know about it: super interesting interviews about fantasy user interfaces.
Check it out
The Most Interesting Developer Tools for 2021
The 60 most interesting and useful developer tools from the past year, as seen by the CTR stats from Louis Lazaris’ weekly newsletter on tools.
Check it out
CV Boostifier
An open source tool for creating cool CV online made for developers by developers.
Check it out
Write code. Not too much. Mostly functions.
Some good advice based on an analogy by Brandon Smith.
Read it
CSS paper snowflakes
Some lovely CSS paper snowflakes made by Michelle Barker.
Check it out
LinkAce
LinkAce is a free and open source bookmark archive for long-term storage and organization of your favorite links.
Check it out
Peaks of Austria
Explore the peaks of Austria in 3D in your browser, both on the desktop and mobile.
Check it out
A Look Back at 2020: Roundup of Codrops Resources
2020 is almost over. Join us for a look back on some of our articles, tutorials and experiments.
Check it out
Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders
A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.
Read it