Slide 1

Slide 1 text

h"p:/ /codepen.io ❤’s Education

Slide 2

Slide 2 text

Education is an area we (really really really) want to serve. We’re all ears: support@codepen.io

Slide 3

Slide 3 text

CodePen is a code editor in the browser.

Slide 4

Slide 4 text

It’s for front end code: HTML, CSS, & JavaScript

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

One big reason teachers like it: It requires no software. Just go to the website start writing code.

Slide 7

Slide 7 text

We see people of all ages having some of their first coding experiences on CodePen and having moments of understanding right away.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

– M E L I S S A T A Y L O R “…once we used CodePen to demonstrate the real-time output of markup changes, many people made the connection almost instantly and began marking up their own content with confidence.”

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

You can save the code you write. Each of those is called a Pen.

Slide 14

Slide 14 text

CodePen has accounts. (Including free accounts.)

Slide 15

Slide 15 text

So every Pen you create you can: 1. Find it again (by searching or browsing) 2. Go back and edit it (forever) 3. Share it (they are public and open source)

Slide 16

Slide 16 text

~5,000,000 Pens

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

CodePen is a social network. For example: 1. You follow other people. 2. They can follow you. 3. Every Pen has a comment thread. 4. You can heart Pens.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

As an educator, a Pen might be an assignment.

Slide 24

Slide 24 text

In this case, the Pen was part of an interview process.

Slide 25

Slide 25 text

SomeKmes we’ll come across a big group of Pens that are clearly a variaKon on a simple theme. They looked a bit like spam at first, before we realized it was a classroom working on an assignment.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

– R O S E M A R Y B 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.”

Slide 28

Slide 28 text

Forking

Slide 29

Slide 29 text

A forks lineage (parents and children) are preserved. Forks are also treated a differently than regular Pens on CodePen. They go into a special tab on profiles, they don’t show up in search by default, or in Recent Pens, for instance.

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

– T I M W I L L I S 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 final semester students, but this time I got switched to first semester. I'm excited for that, as it is a chance to get people off 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 find 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 benefit. Students can send me a specific 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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

h"p:/ /blog.codepen.io/2015/03/07/professor-Km-willison-uses-codepen/

Slide 34

Slide 34 text

The Editor can do quite a bit more than basic HTML, CSS, and JavaScript (although it all comes down to that).

Slide 35

Slide 35 text

• Write in preprocessing languages like Sass, CoffeeScript, Markdown, and many more • Run add-ons for those languages, like Compass for Sass or Autoprefixer 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:

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Let’s get into some of the obvious education-specific features. h"p:/ /blog.codepen.io/2015/03/16/im-thinking-of-using-codepen-to-teach-a-class/

Slide 38

Slide 38 text

Most of these are PRO features. (They cost money. Not a lot.)

Slide 39

Slide 39 text

Professor Mode • Teacher codes; students watch. • Real-Kme. Real 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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Collab Mode • Everybody gets a cursor. • Real-Kme. Real 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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

We had an educator tell us once their major beef with CodePen was that it made coding a little too easy.

Slide 44

Slide 44 text

They were specifically talking about auto-closing of braces, quotes, parens, etc. That’s now a feature you can turn off.

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

• LinKng • JS error detecKon (even infinite loops!) • Preprocessor error displaying Here’s a thing thing that is pretty great for learning: seeing inline errors.

Slide 47

Slide 47 text

You can ask CodePen to analyze your CSS (using CSS Lint)

Slide 48

Slide 48 text

CodePen will automatically show you preprocessing errors. (In a fairly unobtrusive way.)

Slide 49

Slide 49 text

CodePen will automatically detect and warn you of JavaScript errors. (And it won’t execute in the preview.)

Slide 50

Slide 50 text

Collections and Tags Organizing Pens

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

(Public Pens are) Open Source

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Public vs. Private Pens Private Pens… • Are saved at an unguessable URL • Will not show up in CodePen search • We try to block from search engines • You can find on your profile, but nobody else can • Are sKll shareable • You can apply your own license to them

Slide 58

Slide 58 text

Presentation Mode

Slide 59

Slide 59 text

PresentaKon mode has no header (more room) and quick controls for changing the display. It’s meant to be useful when using CodePen on an overhead projector.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

DevCamp with Nate Wiley https:/ /www.denverlibrary.org/blog/nate/teens-learning-web-development-library-devcamp-wraps

Slide 62

Slide 62 text

Embedded Pens

Slide 63

Slide 63 text

You can apply themes to Embedded Pens (e.g. change colors). Update that theme, update all embeds using it. You can even apply your own custom CSS to the theme to match your own site be"er.

Slide 64

Slide 64 text

Templates h"p:/ /codepen.io/pen?template=avJqwq Start a new Pen that is an exact copy of another (code, settings, and all) but have it not be a fork.

Slide 65

Slide 65 text

Prefill API POST to CodePen with JSON data describing a Pen. We’ll set all the settings and fill the editors with all the right stuff. It’s for managing code on your own site, and providing links to send people to CodePen to play.

Slide 66

Slide 66 text

What could be on your own website? • Embedded Pens • Code Snippets (“Open in CodePen”) • Links to Pens / CollecKons • Links to Templates

Slide 67

Slide 67 text

Teams

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Uploading Assets

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Things teachers have not liked about CodePen features: • You don’t see the whole document. () • 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?

Slide 75

Slide 75 text

• Our upcoming “projects” feature will show the whole document. • You’ll be able to do have mulKple files in projects. • For now! • We’re pre"y dang reliable, but we get it.

Slide 76

Slide 76 text

There are other code editors. • Mozilla Thimble (mulKple files) • 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 different 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.

Slide 77

Slide 77 text

What could we do to make CodePen really great for educators?

Slide 78

Slide 78 text

• “Projects” (more like an online IDE) • Classrooms (be"er organize students into groups) • Submicng Pens (transfer of ownership) • Return with notes / diffs / grading • WebRTC (live audio and video) • Pass/Fail Pens (Jasmine tests) • CombinaKon of Modes • e.g. Professor Mode where you hand off control A few ideas

Slide 79

Slide 79 text

Pricing