![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_WOTW.jpg)
Inspirational Website of the Week: Aurélia Durand
We just love how unique this design is and how much personality it has. An explosion of colors and creativity.
![Springboard](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/Springboard.jpg)
Become a Software Engineer, job guaranteed.
Ready to master software engineering or switch to a career as a software engineer? Gain the skills you need with Springboard’s Software Engineering Bootcamp.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_styledcomp.jpg)
The styled-components happy path
An article where Josh W Comeau shares his personal “best practices” when it comes to styled-components.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_dojo.jpg)
Houdini Paint Dojo
A small project with 0 external dependencies to explore the emerging CSS Houdini Paint API. Check out the GitHub repo. By Georgi Nikolov.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_luis.jpg)
Luis Henrique Bizarro’s portfolio
The repository of Luis Henrique Bizarro’s portfolio made entirely with plain JavaScript code using ECMAScript 2015+ features without any frameworks.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_focus.jpg)
Form Validation: You want :not(:focus):invalid, not :invalid
Learn how you can perform validation only when a field is not being edited anymore.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_perf.jpg)
How We Improved SmashingMag Performance
In this article, you’ll learn about the changes made on Smashing Magazine — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_23.jpg)
The importance of `@font-face` source order when used with preload
A small change in the ordering of your font sources in the `@font-face` rule can have a big impact on data and web performance. An article by Matt Hobbs.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_snowflake.jpg)
Snowflake Generator
An interactive WebGL snowflake generator made by Vivian Wu.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_nav.jpg)
Building a sidenav component
A foundational overview of how to build a responsive slide out sidenav. By Adam Argyle.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_fragments.jpg)
Cell fracture
Paul Henschel plays with blender and cell fracture.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_browser.jpg)
The unreasonable effectiveness of simple HTML
Terence Eden urges to ask the important question “how easy is it to use the websites you’ve created?”
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_popup.jpg)
Enabling Popups
An idea to extend the web platform with popups by the Microsoft Edge team.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_grid.jpg)
The Minimum Content Size In CSS Grid
Ahmad Shadeed walks us through an issue he faced that is related to the minimum content size in CSS grid.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_dice.jpg)
Webcam x Dices
A great dice effect made by Louis Hoebregts.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_chris.jpg)
HTML and CSS still isn’t about painting with code
Christian Heilmann shares his experience in explaining what HTML and CSS is about.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_scrollmargin.jpg)
Add scroll margin to all elements which can be targeted
A quick tip on how to add an extra bit of space to targeted elements.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_animations.jpg)
How to design highly performant animations and micro-interactions
In this post, you can learn how to design highly performant animations and micro-interactions to improve the UX of your site.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_projections.jpg)
Wldlght
Follow an amazing journey in Japan with this projection mapping project, Wldlght.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_fontloading.jpg)
How to avoid layout shifts caused by web fonts
Late-loading web fonts can be a main cause of layout shifts. Simon Hearne shows how to optimize them.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_player.jpg)
Building an Audio Player With React Hooks
Discover how to build an audio player using React and the HTMLAudioElement interface.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_piggy.jpg)
Re-Creating the Porky Pig Animation from Looney Tunes in CSS
Learn how to make Porky Pig come out of those red rings. By Kilian Valkhof.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_outbox.jpg)
Thinking outside the box model for GUI design
From a while back: This article investigates why and how the box model in GUIs limits users, UI/UX designers, and developers – and how we can do better to improve usability.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_form.jpg)
Formality
A designless, multistep, conversational, secure, all-in-one WordPress forms plugin.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_demos.jpg)
Awesome Demos Roundup #19
A large collection of fantastic web experiments and demos that were made in the past couple of weeks.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_sun.jpg)
Recreating Frontier Development Lab’s Sun in Three.js
Learn how to create a 3D sun with Three.js in this coding session.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_blob.jpg)
Twisted Colorful Spheres with Three.js
Learn how to deform and color spheres to create an interesting animation with Three.js.
![Collective 646 Item Image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/01/C646_websites.jpg)
Inspirational Websites Roundup #22
A collection of fresh websites with brilliant designs to get you updated on the current trends.
The post Collective #646 appeared first on Codrops.