Good day galera*,
Today I am writing about how I use Codepen.
Just in case you are not familiar with it:
"CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets."
When you open Codepen's main page, you see all sorts of beautiful CSS art that makes you wonder about how awesome CSS truly is and ponder about how you know nothing about CSS (or is that just me?).
Now, if you are like me, you know CSS but you are not at the artsy level (yet) and maybe you don't use it very much or at all.
But you should!
Here the main things I use Codepen for:
- To test concepts I am learning,
- To test random code I got out of internet,
- To share my code when I need some help.
Now I proceed to explain a bit about each bullet topic, because that is how this writing thing works lol
To test concepts I am learning
You are reading about things on a book or here at Dev.to as I do everyday, and learning some new things.
And of course you want to try it ASAP to see how it works.
So you just open Codepen and do just that, as well as saving that piece of code for later.
Like when I was getting started with JavaScript and wanted to try the IF/ELSE by myself right away:
To test random code I got out of internet
We all do it. Do not tell me you don't, because you know you do.
Sometimes we just copy a piece of code out of StackOverflow or other place that google because we are a bit stuck and someone else was surely stuck about the same thing at some point.
BUT before pasting it in out code, we have to understand it folks.
And maybe change it a bit.
And here comes Codepen again.
Of course, you could just do it in your test editor, but doing it on Codepen means you can save it as a future reference and it is just easier.
Like earlier this week I had to figure out how to put an image inside a search box, so I got some code from I don't even remember where:
To share my code when I need some help
It is just easy to put your code there and give the link to my Brother so he can give me a push or a tip of where is the effing typo that I can't find but is messing with my code (usually, it is just a missing letter😅).
And again, have it saved somewhere.
I don't have a pen example of that because all mistaken are now fixed, but here is a pen of one of Elliot's rant (Mr. Robot anyone?).
So yes...
Codepen is a real nice tool for more than showing off your CSS skills (like dear
do so well, seriously, check her Codepen ),
it is also a place where you can test, learn and share, and has been a very helpful tool in my #codeNewbie life.
That is all for today,
Happy Monday,
XOXO,
P.
- galera is a work in Portuguese that folks, guys, you all... Got it?
Top comments (2)
Great post. Also a big fan of Codepen
Thank you!