Collective #612
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_WOTW.jpg?x86293)
Inspirational Website of the Week: Sennesro
Simplicity, elegance and flowy motion made us pick Sennesro as inspirational website this week.
Get inspired![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_animations.jpg?x86293)
60 Days of Animation
The Undead Institute offers books on HTML, CSS, Responsive Design and more that marry humor, excellent teaching, and brain-lodging practice for an experience that’ll outlive the apocalypse.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_links.jpg?x86293)
Irregular-shaped Links with Subgrid
In this excellent article, Michelle Barker shows how CSS subgrid can solve the problem of irregular, distributed link shapes.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/06/C609_Divi.jpg?x86293)
Efficiently build beautiful websites for your clients
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_stryve.jpg?x86293)
Stryve
A new community for tech enthusiasts to share, learn, and build their careers.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_ethan.jpg?x86293)
The design systems between us
Ethan Marcotte shares his thoughts on why he believes that design systems haven't brought rich, cross-functional collaboration to most organizations.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_Tania.jpg?x86293)
Understanding Template Literals in JavaScript
Tania Rascia's in-depth explanation of template literals in JavaScript.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_html.jpg?x86293)
html.systems
An excellent library of components built with HTML, CSS and JavaScript.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_3dscroll.jpg?x86293)
3D banners with ScrollTrigger
A supercool GSAP scroll demo with some 3D magic.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_transform.jpg?x86293)
Getting CSS Translate values with JavaScript
Zell Liew shows how you can get CSS translate values in JavaScript by parsing 2d and 3d matrices.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_logos.jpg?x86293)
Aligning Logo Images in CSS
Ahmad Shadeed tackles the task of taking a group of logos, and exploring many ways to align and position them perfectly in CSS.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_Buttons.jpg?x86293)
Design Better Buttons
A great read on button design best practices by Andrew Coyle.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_github.jpg?x86293)
Launching docs.github.com
Jenn Leaver writes about the launch of docs.github.com, a single home for all of GitHub’s product documentation.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_portfolio.jpg?x86293)
Profiled
With Profiled you can create a developer portfolio from your GitHub account.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/Screen-Shot-2020-07-02-at-16.09.38.jpg?x86293)
Is WebP really better than JPEG?
According to Google, WebP is 25 – 34% smaller than JPEG at equivalent quality. But how much of it is really true? Find out in this article by Johannes Siipola.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_FreeFaces.jpg?x86293)
Free Faces
A great selection of freely available fonts.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_Houdini.jpg?x86293)
CSS Painting vs. CSS Houdini Paint API
Lisi Linhart takes a look at the performance of the Paint API vs. traditional CSS painting.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_Guestbook.jpg?x86293)
Dark Ages of the Web
A fun journey that recaps the old Web features and front-end patterns.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_Screencasts.jpg?x86293)
I Just Hit $100k/yr On GitHub Sponsors!
Caleb Porzio shares his fascinating story of a successful open source project and the earnings he's made with its screencasts.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_ego.jpg?x86293)
The Google ‘vs’ Trick
Read how ego graphs can help you learn about AI, play chess, eat healthier, buy a dog and find love.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_menu.jpg?x86293)
Creating a Menu Image Animation on Hover
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_ui8.jpg?x86293)
UI Interactions & Animations Roundup #8
A new collection of UI animation shots that summarizes the latest creative trends.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/07/C612_websitesroundup.jpg?x86293)
Inspirational Websites Roundup #16
This special collection of wonderful websites will get you up-to-date on current web design trends.
Check it out