Do you like to explore the code of other front-end developers?
And do you know that it’s the best way to learn new techniques of coding?
In this new series of articles I will be featuring interesting demos and code snippets from CodePen.io and you can take them apart, break them and learn something new.
What is CodePen?
CodePen.io is basically a playground for front-end developers. Yes, playground you hear correctly. The life of a front-end developer is full of stressful deadlines and annoying clients, so make sure that you find some time for having fun.
It’s a place where you can create a reduced test cases, to quickly debug your code and find out why it’s not working. You can share your code with others, tweak it, embed it on your blog and follow your favourite developers.
It’s also a great place where to find others code examples and learn by changing the values, properties, dimensions etc. Learning by breaking code is by far the most effective way to learn. Or at least that’s how it works for me.
Why to use CodePen?
- You can learn by exploring the code of other front-end web developers
- You can debug your code in a reduced test cases
- You can share code with others
- And most importantly you can have some fun!
How CodePen works?
The screen is broken into 4 parts –
You don’t have to worry about the general html tags such as
<html><head></head><body> etc. CodePen takes care of all that for you. That’s what makes it so good and easy to use.
Today’s featured demos
In every of the following posts in this series, I will be bringing you 3 demos each time, together with my comments.
Now let’s finally have a look at today’s picks.
Circular Spinning Menu
This is a nice non-traditional menu system using the full benefits of
CSS3 transform and
The effect is created by simply adding a class
open and rotating, scaling and changing the opacity of the outer menu circle.
Frontend Dev Skillset
Click the RERUN link and see the graphs
animate to the set values.
And now STOP! Before you hover over this bold guy, just think about all the bad clients and stupid bosses you’ve ever had to work for. Now go ahead and SCREEEEEAM!
Feels good right? Let’s try it again couple of times. You need to relieve the pressure somewhere.
You wouldn’t believe that
CSS3 animations can put a smile on your face, would you?
There you have it, my first collection of CodePen demos, hope you’ve found them also interesting and if you come across some other cool demos or code snippets on CodePen, please let me know or share them in the comments.
I will be using CodePen more in my future posts, so stay in touch – Ihatetomatoes on CodePen.
PS: Let me know how many times did you have to hover over the screamer. I think I did it close to 100 times. Feels so good…
Join the conversation below and let me hear your thoughts!
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.