Collective #434
![C434_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_WOTW.jpg?x88254)
Inspirational Website of the Week: Epicurrence
A beautifully illustrated design with super smooth interactions. Our pick this week.
Get inspired![C434_NW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_NW.gif?x88254)
Northwestern's Online MS in Information Design & Strategy
Build skills to translate data into compelling visuals and narratives and learn how research and analytics can drive communication strategies and tactics.
Sign me up![C434_serverless](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_serverless.jpg?x88254)
Create your own Serverless API
Sarah Drasner's tutorial on how to build a Serverless API with Microsoft Azure.
Read it![C434_gallery](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_gallery.jpg?x88254)
Gliding Gallery
David Khourshid and Stephen Shaw build an image gallery with beautiful transitions.
Watch it![C434_colorwheel](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_colorwheel.jpg?x88254)
Color Wheel Generator
A fantastic tool that generates a color wheel. Made by Hayk An.
Check it out![C434_ui](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_ui.jpg?x88254)
UIengine 1.0
Read about Dennis Reimann's open sourced UIengine that started out as a tool to build pattern libraries and documentation for design systems.
Check it out![C434_photos](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_photos.jpg?x88254)
Building the Google Photos Web UI
An excellent in-depth article by Antin Harasymiv on how the Google Photos Web UI was built.
Read it![C434_halftone](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_halftone.jpg?x88254)
Halftone Effect
Misaki Nakano's wonderful demo of bouncy boxes with a configurable halftone effect.
Check it out![C434_3dcity](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_3dcity.jpg?x88254)
3D City with Matter.js
A demo by Michael Iriarte that lets you view a 3D city from 2D physics using matter.js. Read the tweet here.
Check it out![canva-photo-editor](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/canva-photo-editor.png?x88254)
Zippity Zappity (SVG)
Steve Gardner created this fun demo of a dynamically drawn SVG that follows your mouse or touch.
Check it out![C434_gradients](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_gradients.jpg?x88254)
Grabient
A gigantic collection of well blended gradients for your next project.
Check it out![C434_checkbox](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_checkbox.jpg?x88254)
Totoro Toggle
A super cute animated toggle made by Adam Kuhn as part of a Codepen challenge.
Check it out![C434_sitedesign](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_sitedesign.jpg?x88254)
Mariano Pascual's Portfolio
A fun site design with lots of inspiring goodies.
Check it out![C434_ai](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_ai.jpg?x88254)
Foundations of Machine Learning
A training course that was initially delivered internally to Bloomberg's software engineers as part of their "Machine Learning EDU" initiative.
Check it out![C434_brutalism](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_brutalism.jpg?x88254)
Guidelines for Brutalist Web Design
David Bryant Copeland explains how Brutalism in Web Design means "raw content true to its construction".
Read it![C434_airdrop](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_airdrop.jpg?x88254)
Airdrop - Technical casestudy
An article by Luigi De Rosa and Thierry Michel where they explain how they created Airdrop, a Facebook Instant Game for Red Bull.
Read it![C434_flexbox](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_flexbox.jpg?x88254)
The Complete Illustrated Flexbox Tutorial
A visual guide to flexbox magic by Greg Sidelnikov.
Read it![C434_github](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_github.jpg?x88254)
Jasper
A flexible and powerful issue reader for GitHub.
Check it out![C434_font](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_font.jpg?x88254)
Free Font: Austra
A lovely uppercase brush font designed by Gatis Vilaks.
Get it![C434_typography](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_typography.jpg?x88254)
Create your design system, part 1: Typography
An article by Sebastiano Guerriero as part of a series on design systems inspired by CodyHouse's upcoming library of web components.
Read it![C434_variablefonts](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_variablefonts.jpg?x88254)
Variable Fonts in Firefox DevTools
Patrick Brosset's tip for playing with variable fonts in the Firefox DevTools (Nightly).
Check it out![C434_gridmistakes](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_gridmistakes.jpg?x88254)
9 Biggest Mistakes with CSS Grid
Jen Simmons lists the 9 biggest mistakes she sees people making when using CSS Grid.
Watch it![C434_moon](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2018/07/C434_moon.jpg?x88254)
Moon Grid
Ana Tudor's coding solution to an interesting problem.
Check it out