Apply for the next session

This is in the works! Would you like to help flesh it out? Let's do it!

In order of importance

Here are some settings that might help you out.

Indentation and key bindings

In the course, we suggest that you use tabs instead of spaces.

Now, your coder friend might think that’s crazy – but we’ve stated our case. If you’re going to follow our suggestion (for now) – then we also suggest you set CodePen to use tabs so that they are the same.

Do this in the “global” settings. (not just the pen-specific settings) (ask for help if you need it)

The indent width/depth is up to your eyes. Whatever works. We use 3 in the videos. Whatever you set them to in Sublime, – do the same here.

Speaking of Sublime: If you are taking our recomendation there – then make sure your CodePen keybindings are the same. (set them to Sublime Text)


Take the time to name your Pens. Then you might even find it again one day.

Description isn’t always necessary, but it depends if you think this Pen is a real “Conversation starter.”

The tags can be really helpful later. If you have a bunch of pens that are about “menu” patterns, – it’s nice to be able to find them with that search.

Editor options

If code folding is bumming you out, turn it off. If you don’t know what that is – then great. Congratulations. It’s not bumming you out.

We don’t suggest autocomplete. You’ll learn WAY faster. Seriously. We can see who depends on it most – and they are at the back of the pack code-wise. It won’t always be there – so, don’t learn to count on it.

It Emmet is tripping you up, turn it off. If you don’t know what that is yet – then just ignore it for now.


Show incorrect syntax

Some themes do not show when you’ve missed some markup/tags. Some do. So, pick one that does! We suggest Oceanic Dark.

Why go "Pro" ?

There are many reasons.

No ads. A “cool” Pro badge.

But more importantly:

You can hide some of your Pens.

You  can also share debug view indefinitely and a ton of other things… but – it’s unlikely that you will really get a lot out of it until closer to the end of the course. We’ll be happy to talk more about it then.

One basic idea is that – if you have 300 kinda wonky whatever “test” pens… then it’s not that impressive. But if you hide 290 of those, and you have 10 really impressive pens – then that’s all people (possible employers) will see – and you’ll look really clean and fancy. At some point though… it’s basically impossible to organize all of this stuff. It all depends on who you are – and how you want to use CodePen.

Apply for the next session