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
