My best codepens of all time
Tags: css, codepen, learning
Published: 2020-08-09 11:07:25

---
title: My best codepens of all time
published: true
date: 2020-08-08 00:00:00 UTC
tags: CSS,CodePen,learning
canonical_url: https://yogeshwaran.in/my-best-codepens/
---

If you are a frontend developer definetly you visited codepen once or frequently. i have used codepen extensively during last few years as a documentation and experimental playground.

some days tried #100dayscss and challenged myself for learning javascript by series of codepens.

Here i have listed some of my best codepens which might be useful for you in someway.you can see [My codepen profile](https://codepen.io/yoyo "yogeshwaran's codepen profile") here.

## 1.Animation using scss loops
<iframe height="434" style="width: 100%;" scrolling="no" title="100dayscss-44 " src="https://codepen.io/yoyo/embed/MzeZvy?height=434&amp;theme-id=35149&amp;default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/MzeZvy">100dayscss-44 </a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 2.CSS only bulb
<iframe height="510" style="width: 100%;" scrolling="no" title="100dayscss-43" src="https://codepen.io/yoyo/embed/OaXLrg?height=510&amp;theme-id=35149&amp;default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/OaXLrg">100dayscss-43</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 3.User friendly 404 page
<iframe height="531" style="width: 100%;" scrolling="no" title="User friendly 404 page" src="https://codepen.io/yoyo/embed/wYewNq?height=531&amp;theme-id=35149&amp;default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/wYewNq">User friendly 404 page</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 4.Single div Coffee cup
<iframe height="457" style="width: 100%;" scrolling="no" title="#codevember - 14 - Single div coffee cup" src="https://codepen.io/yoyo/embed/eQvKxg?height=457&amp;theme-id=35149&amp;default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/eQvKxg">#codevember - 14 - Single div coffee cup</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 5.Guess the number javascript game
<iframe height="290" style="width: 100%;" scrolling="no" title="Guess the number #Javascript" src="https://codepen.io/yoyo/embed/Wqemrz?height=290&amp;theme-id=35149&amp;default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/Wqemrz">Guess the number #Javascript</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>