online code editor

HTML / CSS and JS Code Editor In your Browser

My Codepen story

What i do for living . . .

I work as a web producer (freelance now) and i  do all kind of website related work, from server technology to front-end and SEO. Anything you can think of i had to modify and fix at least once in the last 10 years. Banging my head up against the walls that i had to encounter (you cant imagine how many unrelated things you need to learn in order to fix what seems like a small problem on a website)  i came to a stadium where i can say that i am a jack of all trades when it comes to websites. Anyways, unlike before, when i was on a pay check and had to do everything that was thrown at me, now i can choose the jobs that i wish to accept. Nowadays my clients are usually web designers and developers that build websites for other people. What i do for them mostly is styling  and fixing the elements on the existing websites. That sounds fun and easy doesn’t it? Well its not always fun, because before i discovered Codepen i had to go trough many steps in order to get it done and make everyone happy.

The boring freelance web design steps

Before i discovered codepen i had to do so many things to get my job done.
Beside the backup of the website ( that i always do anyways) i had to set it up on my local machine or test server.  Than i would play with the code trough the browser tools that i use. Next step was to  go and save the changes in the .css file. Next i had to upload it and than refresh my browser in order to see the changes done and move on with the next element. Pretty much  a very boring repeating process, but,  i was always able to show the “live” version to my clients so i could than modify once viewed and than show it again. Going trough all that just to style a few elements was starting to get to my nerves so i searched for a solution, and i found it.

How does codepen fit in this story?

Well, what i do now is ten times faster than before. with Codepen in action i just take the elements from the page, create a pen, style it and send the url to the client ! that’s it! all of it!! Once the client is happy i just copy the code to his website and that’s it !!! Did i just write that’s it 4 times?

If the client wants something changed like the color or width i just quickly edit/save the pen again and tell him to refresh ! No more “wait a few minutes” until i style, save, upload, download blah-blah-blah. Instant results !

Of course as i mentioned before my clients are people who are more-less familiar  with building websites so this doesn’t work with  normal build it from scratch website clients.I tend to avoid those projects anyways, it is so much easier to communicate with people who actually know what they are talking about.

No more “make that picture shake and turn and than when someone clicks, i want it to create a video to greet them  and print their phone to a file and send it to my email” kind of requests 😀

What is Codepen?

CodePen is an HTML, CSS, and JavaScript code editor right in your browser with instant preview.

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.

Need to build a reduced test case to demonstrate and figure out a bug?

Want to show off your latest creation and get feedback from your peers?

Want to find example of a particular design pattern for you project?

 CodePen is great for that.

Codepen was created by Alex, Tim and Chris

Codepen was created by Alex, Tim and Chris

Official Browser Support List

Browser list

CodePen.io link See you there !

Here is a bonus for you : Editable live CSS examples for you to play with

If you like codepen Please share this post on your Social networks.

Nikola fivera Petrovic
Get in Touch
Latest posts by Nikola fivera Petrovic (see all)