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 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.
Official Browser Support 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.
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.
As a freelancer, I charge only a small portion of the money you would pay to agencies to create your website. Affordable web design doesn’t mean that it will lack any of the advanced features of today’s web technology. We just cut out the cost of the middle man.
Feel free to request a free quote using the form on the right or the one bellow.
Latest posts by Nikola Petrovic (see all)
- The best way to add custom functions to wordpress - 9. December 2016.
- Four Important steps in my web design - 12. September 2015.
- Paper Text Area Created with CSS only – Editable Example - 9. July 2015.