CodePen.io

I quite often leave a link to a GitHub repo to share my source in these posts, and on a few recent ones, a link to a live version of a page on my github.io. In a recent installment of CWD , Andrei shared some previous students’ solutions, and some were hosted on CodePen.io which I hadn’t seen before.

It’s a cute concept, you can enter HTML, CSS & JS and see a live view of the page below. It looks super extensible - there’s mentions of SCSS, Typescript and preprocessors for JS in the settings.

There are a few quirks - you don’t enter all the DOCTYPE/etc in your HTML- presumably that’s because they already need that for their page. There are settings for some of these for example if you need to add a clss to the. I couldn’t see how to do that for the though so I needed to change the JS for this project a bit.

It seems pretty great - sort of like Playgrounds for web dev. It’s not quite a full debugging IDE - that doesn’t seem to exist for web dev. There’s no intellisense, but it was flagging problems in my JavaScript, so I’ll use it for a few of these tutorial pages and see how it goes.

Here’s a link to the tutorial app above on CodePen.