CodePen is an invaluable tool–it helps us explain things and makes our front-end code tutorials all the more engaging. In recognition of that fact, let’s take a look at some pens from Tuts+ tutorials and courses which have really struck a chord with our community!
This tutorial by George Martsoukos takes an unordered list, displaying its items as a (responsive) vertical timeline. George then goes on to check whether the items have entered the viewport on scroll, animating them into place once that’s the case.
With over 21K views and 500 likes, this pen is one of the most popular we’ve posted!
Dublin-based Donovan knew exactly what you all wanted when he penned this one. Follow this beginner’s tutorial to learn not only about the practical aspects of coding CSS animation, but also the intangible crafting of “appeal” which goes along with it.
This tutorial was eagerly awaited by many of you, keen to transfer Google’s Material teachings to the web browser. Here’s just one of the pens from the tutorial, but one which has seen a good few thousand views. Click away!
I love this one. But then I would, as flag-bearer for the Tuts+ Translation Project, wouldn’t I? In any case, if you’ve never considered what
unicode-bidi: embed; will do for your RTL web pages, maybe it’s time you checked out this popular pen!
Dennis did a great job of this one! Just try and resist scrolling.. If you’re interested in learning about ScrollMagic this is a really accessible tutorial to get you started. Grab a coffee and dive in.
Many of Craig Campbell’s courses use CodePen as a way of setting up projects and seeing them through to completion. In this course he demonstrates a number of ways to use GreenSock’s Animation Platform (GSAP), including this popular mesmeric preloader:
Another of Craig’s courses here, and one of our most viewed courses of the past few months. It teaches exactly what you’d expect, so if you’ve yet to dirty your hands with flexbox these projects (like this responsive image grid) will get you going!
What’s left to say? Enjoy the pens mentioned above, check out the tutorials and courses they were taken from, and make sure you follow Envato Tuts+ on CodePen!