I A N C H I “Although it wasn't a requirement and I didn't really encourage my students to do it, many of them explored Pens they found on CodePen. They were so excited. They wanted to be able to do what they saw. Many of them learned advanced CSS3 concepts that I didn't have the time to teach them. Many explored animation in CSS and were able to make some awesome navigation menus. I had others looking at responsive web design. It was really neat to see my students engaged and excited about learning more. The users of CodePen have taught my students so much more than I ever could in one semester.”
O N “I have 30 in my class. My fellow prof has 37 in his. We teach a program for Digital Media Arts. I usually teach ﬁnal semester students, but this time I got switched to ﬁrst semester. I'm excited for that, as it is a chance to get people oﬀ on the right foot. Many are intimidated by code. But CodePen makes it simple to share an example. I used to have to go around computer to computer to help out. I would ﬁnd the same bug repeated by several students, wasting a lot of class time. Now if someone has a problem I can bring it up and we all work on it together, so everyone gets the beneﬁt. Students can send me a speciﬁc URL to look at. And they can fork my examples to learn from, or bet yet fork each other's work.” I think this is the highest participation I've seen in my years working with colleges. h"p:/ /codepen.io/team/OddlyTimbot/post/classes-in-codepen
many more • Run add-ons for those languages, like Compass for Sass or Autopreﬁxer for PostCSS. • Link out to assets hosted elsewhere (my-style.css) • Easily add popular resources (jQuery, Bootstrap, Lodash, etc.) • Link to other Pens, pulling in the code from it. The CodePen Editor allows you to:
code, not video of screen. • Also put on projector (or not). • EnKre UI is synced • Size of editors • What secngs are being changed • Student can “Pause and Play”, the Resume • Student can fork • Student can be anonymous user • Good for same-room or across the world • Coming: video/audio • 10 Students on PRO, 35 on Super PRO • Secret: Hard-limit on Super PRO is really 100
code, not video of screen. • UI is not synced. • Anyone can change secngs. • Owner only can save. Others can fork. • Collaborators can be anonymous. • Good for same-room or across the world • Coming: video/audio • 2 collaborators on PRO; 6 on Super PRO
an unguessable URL • Will not show up in CodePen search • We try to block from search engines • You can ﬁnd on your proﬁle, but nobody else can • Are sKll shareable • You can apply your own license to them
don’t see the whole document. (<!DOCTYPE html>) • You can’t have index.html, about.html, etc. • It’s not the real sooware students will end up using in real life • We’re a third-party. Are we reliable?
• JS Fiddle (unKl recently, biggest market share) • JS Bin (oldest and acKvely developed, open source) • Dabblet (open source, easy to host) Of course, we think CodePen is the best online code editor, but everyone has diﬀerent needs and most of all we think online code editors are awesome and you should use them. Plus, CodePen is so much more than an editor. It’s a community.
organize students into groups) • Submicng Pens (transfer of ownership) • Return with notes / diﬀs / grading • WebRTC (live audio and video) • Pass/Fail Pens (Jasmine tests) • CombinaKon of Modes • e.g. Professor Mode where you hand oﬀ control A few ideas