Over the last year, Matthieu Aussaguel has been blogging a series named "Can you Code this UI Concept?" in which he finds user interface ideas that exist as GIFs, and then an implementation of that idea in real code. The implementations are already done in these posts, but it doesn't mean you still can't think of the originals as a challenge and try to build it yourself.

Here's an example from each of the five volumes he's published so far.

Vol. 1

"Replace"  by Zee Young

Coded by Nikolay Talanov:

See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.

Vol. 2

"Fluid Switch" by Leonardo Zakour

Coded by CODEARMADA:

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.

Vol. 3

"Cut Copy Share Delete" by Sikrant

Coded by Ryan Mulligan:

See the Pen Cut Copy Share Delete by Ryan Mulligan (@hexagoncircle) on CodePen.

Vol. 4

"No Bananas here" by John Torres

Coded by Ken Chen:

See the Pen Illustration for 404 Page by Ken Chen (@kenchen) on CodePen.

Vol. 5

"Select Weight " by Dejan Markovic

Coded by Varun Vachhar:

See the Pen Weight Selector by Varun Vachhar (@winkerVSbecks) on CodePen.


The idea is similar to Give 'n' Go.