A Guide To Using CodePen – Help Us Help You.

[Andy Howells]

Howdy,

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.

Getting Started

Head on over to Codepen.io.

You can see a selection of awesome creations, but you’re interested in clicking “New Pen”

It will then load up a newly created empty Pen for you to complete with your code. You can copy and paste over the HTML/CSS/Javascript you’re using. You can copy all of it, or even better, create a stripped down version. For example, copying over just the navigation elements and relevant code to the problem you’re querying.

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.

You can also do the same for JavaScript, specifying custom options, such as linking to an external JS file.

When it comes to JavaScript it’s likely you’re using a library, such as jQuery, you can also select this type of option via the settings for JavaScript too.

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!

[James]

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.

Thumbs up!

[Andy Howells]

I used to use JSFiddle for everything but CodePen is definitely above and beyond in terms of functionality.

Plus it’s the sneaky tricks, like using Zen/Emmet when typing out any HTML that does it for me in the trouser department.

[chrisburton]

Make this sticky!

[Paulie_D]

>Make this sticky!

I can’t see a way of doing that.

Mr Coyier, Sir?

[chrisburton]

You might not have rights to do so.

[James]

> 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.

[Andy Howells]

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.

[Kitty Giraudel]

Sticky please! Chris, any way you could do this? It would be awesome. :)

[Chris Coyier]

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.

[Paulie_D]

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

**Any others?**

[Andy Howells]

@chriscoyier – No worries.

@Paulie_D – Maybe a sort of – “show us what you have already tried” recommendation or something. Quite a few posts are “I want to do X, tell me how/give me the code” – which is pretty difficult to support.

[Mottie]

@chriscoyier What about adding a box over on the right above (or below) the bookmarked discussion box. Maybe name it something like “How To…”.

[Chris Coyier]

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 =)

[TheDoc]

Super exciting!

[Author]

Posts