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!
No comments:
Post a Comment