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.
I forgot to mention that CodePen.io was created by these 3 very smart developers – Alex Vazquez (@alexquez), Tim Sabat (@timsabat) and the legendary Chris Coyier (@chriscoyier).
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 – HTML, CSS, JavaScript and a results panel.
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.
See the Pen Simple Pen by Petr (@ihatetomatoes) on CodePen.0
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 transitions.
The effect is created by simply adding a class open and rotating, scaling and changing the opacity of the outer menu circle.
See the Pen Circular Spinning Menu by Marcel Lindig (@Jet) on CodePen.0
Frontend Dev Skillset
You might have seen a similar effect on the Awwwards.com site. It’s using Chart.js library and jQuery and could be handy for your next portfolio redesign.
Click the RERUN link and see the graphs animate to the set values.
See the Pen Frontend Dev Skillset by Christian Fleschhut (@cfleschhut) on CodePen.0
Screamer
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!
See the Pen Screamer – it doesn’t like when you touch. by James Truhlar (@mdcrtv) on CodePen.0
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?
Conclusion
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.
Awesome posts. All are interesting things. +1
It’s interesting. I can’t wait to try it.
Very usefull post.
Thanks Niloy.
Sorry, but you again shared something from the top of the wave. +1.
We feel so lucky that we found your blog and signed up for the newsletter couple of days ago.
CodePen is really a treasure place. It makes us feel like artists not just front-end task fulfilling developers.
Every agency or developer who would like to stay with the latest in web technologies should come over here.
Thanks! Looking forward for your next post!
Thanks for the feedback and nice words. I feel so lucky to have you onboard:) Stay tuned for more.
Thank you so much… you filled my day with something meaningful. I’m expanding my CSS knowledge and this comes very handy.
Thanks for reading nOde.