CodePen settings

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.

Actually though… Tags aren’t searchable the way you’d think. I talked to Chris (from CodePen) about it, and he said that the titles and descriptions are searchable but that tags are their own way of searching that serves the larger community (more than searching in your personal collections). So, you can stuff keywords into the description (which has been working well). More is better. Anything you can think of now will help future you find them.

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.

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

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.