CS Teaching Tool: CodePen

Words
247
Reading
2 min
Listen
Play
9y

After I wrote my article on JSFiddle vidallia@vidallia, among others, pointed me to CodePen:

The two have a number of things in common, including the four window functionality and the basic purpose of developing html based code on the fly. A few differences I noticed initially:

  • Four windows are laid out differently, but either layout works in my opinion
  • CodePen rerenders on the fly, while JSFiddle requires one to hit the run button
    • I could go either way on this one, sometimes it's nice not to have to hit the run button, but other times it annoying if you have javascript like my sample that will throw up an alert every time one edits the page
  • CodePen does not have a large set of libraries accessible from a drop-down, but their include external sources is box is searchable and serves much the same purpose and is easy to use as well.

CodePen has a great collaboration mode, that would be great for remove teaching where you can not only see their code, but see keystrokes in real time. This would be great for remote teaching. Finally, if you want to provide some baseline code for a starting point, you can share it with your students and then each student can fork their own version.

In my opinion, JSFiddel and CodePen are both great options for teaching basic front-end programming. I would recommend either one. Try them both and see which one resonates with you the most.

CS Teaching Tool: CodePen | Ecency