CodePen is a place to write and share front-end code, show off your work, build test cases and find inspiration. So in this post I put together 50 Interesting CodePen Demos 2018 To Learn New Tricks. Some of these pens could be great ideas to use in an upcoming project or learning a new trick in the quest to do more with front end.

How Many Steps Does It Take To Get From Me To You?

The div that look different in every browser

Responsive News Card Slider

Hamburger Menu Animations

Pure CSS The Carlton dance

Star Wars Imperial Army’s Product Slider!

Responsive Blog Card Slider

Responsive Timeline Concept

Single element George Washington portrait

Opening screen for a banking app

Parallax SVG Bus Animation

Credit Card Payment Form

Pure CSS Magic Trick

Looper in HTML5 Canvas

To Infinity and Beyond

HTML5 details & summary

Water paint

Periodic Table of Elements – HTML/CSS

CSS Snake & Ladders: a multiplayer game developed in HTML+CSS with no JS

Expand/collapse cards with figure cut text

Westworld Slider

CSS Grid Excercise: Poster

Colour Melody

Trippy Squares – Left to Right Wave!

CSS-only double-click

3D toggle – click it!

Stuff you can do with CSS pointer events

Isometric eCommerce CSSGrid

Sketch of Voronoi

There’s no place like home

Ghost Mouse (move your mouse / finger)

More

Bendy Drinks Menu

Digital Walls

Apple Keyboard

Bokeh effect (CSS)

Pure CSS watch animation

Photorealistic pure CSS mobile phone

Grid Experiment No. 6

Pure CSS Tower of Hanoi

Interactive SVG mask w/full screen image

Slider Animations: Pies from the Waitress Musical

Perfect Pure CSS Centering

Transforming Nutrition Facts Label Formats

Alien Gooey Dial

Vue JS Draw

Neural Drum Machine

Animated Unsubscribe Page

Animated SVG Avatar v2

Instagram