Advertisement
  1. Web Design
  2. CodePen
Webdesign

We Heart CodePen: the Most Popular Pens From Tuts+

by
Languages:

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!

Building a Vertical Timeline

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!

Adding Appeal to Your Animations

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.

10 CSS3 Projects: UI and Layout

This course is hugely popular. Follow Kezz Bracey as she builds ten different CSS3 projects, all on CodePen, and all focused on UI and layout. Here’s one such project, where she demonstrates how to build a functional, animated tab UI, without a jot of JavaScript:

10 CSS3 Projects: Branding and Presentation

Kezz’s follow-up course took inspiration from “Branding and Presentation”, once more demonstrating how to build 10 CSS3 projects all from within the familiar surroundings of CodePen. This particular demo is a “PowerPoint” like presentation, again without any JavaScript at all.

An Overview of Material Design Lite

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!

Tips for Designing a Multilingual Website

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!

Animated Coffee Drinking Sprite

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.

3 GreenSock Projects

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:

6 Flexbox Projects for Web Designers

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!

Conclusion

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.