I thought I would write a quick guide on using CodePen. There’s be a lot of threads recently where a lot of code is included in the post, or a link is made directly to the website in question, which makes it more difficult to offer support.
Using CodePen to show us the problem is best all around because it means we can directly see and help edit the code. We can “fork” (I.E copy) what you’ve done and make our own working version to show you and then you can see directly the code we’ve made or used.
Head on over to Codepen.io.
You can see a selection of awesome creations, but you’re interested in clicking “New Pen”
Make sure to make any links to assets, like images, absolute – that is linking directly to your site as relative links will not work
You can select custom options for each box, clicking on the Gear icon to access the options available to you.
You can do the same for the CSS section, so if you’re using Sass/Compass for example you can select it here so you don’t have to edit your code from its natural state.
When your CodePen is ready for sharing, hit “Save” along the top bar to save it and make it ready.
Next click “Share” and you’ll get a similar set of options to these. If you have a PRO account you get extra options, but the one you’ll have available as an anonymous user is “Full Page” – while this is helpful to show off a Pen, it may also be wise instead to copy the Address Bar link instead as this gives direct access to the code itself.
Please do create Pen’s for us. We can help you solve your problems quicker and easier by doing so. Help us help you!
Awesome little guide. I noticed a lot of people posting here without references to their actual problem, which does prove to be difficult to resolve if it contains a fair bit of code. I’m still using JS Fiddle, although I would happily convert over to CodePen as it has an auto-refresh function upon editing and has a neater layout in which the results frame is nice and large making everything easier to see.
> Plus it’s the sneaky tricks, like using Zen/Emmet when typing out any HTML that does it for me in the trouser department.
This. It makes the site a coding tool for almost everything. It’s like the revolution on interactive online editing (even though that has been around for a while now), but never as awesome as doing it in your browser.
Possibilities are endless.
The only thing that I wish you could on CodePen is to select from your own CodePen’s which ones you want to show on your profile or not more simply.
While you can do private vs public, most of my pens are for support purposes on here, so never anything impressive to anyone checking out my profile, but I can’t go back now and make them private cause old links in the forum and elsewhere will break.
So it would be ace to highlight particular ones you want to show off in your profile, or perhaps re-order/categorise them.
This is excellent, thanks for doing this Andy! Rather than make it sticky, I’m going to noodle it for a day or two and figure out the best plan. I might make a new little module thing by the New Discussion button in the sidebar that links to important stuff like this AND put it where it’s needed most: on the actual page where you write up a new thread.
Perhaps combine it with an updated version of ‘How To Get Help From The Forums’ with bullet points on, for instance,
Being precise about the issue
Providing a Link
**How To Use Codepen (when you can’t provide a link’)**
How to show code in the forums
What code WON’T show properly in the forums
Hey ya’ll – I added a new thing to the Start a New Discussion screen where it links to this guide and encourages people to use CodePen. We can let this thread fall down the stack now. We’ll keep this post up to date over time.
And just to note: profiles are going to get better very soon =)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".