CodePen 🙌🏼 Education

CodePen is an ideal environment for educators to teach front-end design and development.

Students see what code does in real time.

This can be a huge moment for students. Web design can really click when they see a design come to life line by line. They see the direct result of the code they write and how that controls the site.

If you're in the business of helping students learn the web, CodePen is your friend.

No software to install or maintain.

CodePen is entirely in the browser. It will work on any computer with a modern web browser. There is nothing to install. There are no upgrades you'll ever have to download and run.

Even better, many students have their own computers. CodePen will work in the classroom, and then students can continue work at a lab, at home, or on any other computer right on CodePen. It will be the exact same environment with all their saved work.

Teach the basics. Then teach more advanced subjects.

You could start out just teaching raw HTML and CSS. That's fundamental stuff that is vital to a web curriculum. Then incorporate JavaScript. Perhaps add jQuery, that takes just selection from a menu.

You can get as advanced as you like on CodePen. Teach about JavaScript compiling with Babel, ES6, and JSX. Teach a library like D3. Show students CSS preprocessing and import dependencies. Output HTML in Slim. Ajax for some JSON. Anything you can do on the front end web, you can do on CodePen.

Collab Mode

Live collaboration on code. Multiple people can type and edit code in a Pen at the same time, all while still seeing the live preview. There is a chat area too, all for the best in long distance pair programming!

Professor Mode

Have students watch you work in real time! Every key press and click is shown live. Better than video - the students can interact with the code, see it live rendering, and participate in group chat. Students can even pause and play around with the code, and then catch back up to you with a single click.

Presentation Mode

Presentation Mode is for use on projectors. It removes some of the CodePen UI so you can make the most of the limited space. It also provides controls for changing colors, fonts, and sizes for on-the-fly adjustments to suit the room.

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

I knew using CodePen would be a lot easier than getting everyone setup on the same environment locally. CodePen turned out to work beautifully. I found that the right column layout for editors made it easier to use when presenting.

The main resource I used for teaching front-end programming is CodePen. When the kids got to class they jumped on their workstations (or rather their “battle stations” as some of the kids called it) and they were ready to start hacking.

The kids just needed to fire up a browser go to CodePen and log on with their account.

Questions You Might Have

How much does CodePen Cost?

It can be as inexpensive as free. Students and teachers alike could use CodePen's free plan and accomplish a lot.

We would encourage you to check out our PRO plans, which unlock a lot of features on CodePen, some of which are geared directly at education. The teacher themselves would likely benefit greatly from a PRO plan.

You should also check out our PRO Team plans. Some education organizations go for a Team account so that they can give their students PRO access. This is particularly useful if you want to give your students access to things like uploading images, keeping their work private, and initiating Collab Mode sessions.

What features of CodePen should I be aware of that relate to education?

Here's a few that it would be good for you to be aware of:

Forking allows students to create and change their own copy of any other Pen.

There are two major ways of organizing Pens: Collections and Tags. Both may be useful in grouping things. For example, a Collection of Pens that demonstrate layout techniques, or a tag for all Pen related to an "INTRO TO WEB 2" course.

CodePen offers powerful search, allowing you to search all of CodePen and scoping down there. For example, searching only your own Pens (including private Pens) just by title.

Every Pen has a comment thread, which is a place that expanations and feedback can happen.

You can Export Pens. Exporting as a Gist can be useful for seeing difs.

There is no age constraints with CodePen. CodePen is used in web education from elementry school through post graduate and beyond.

Everyone started at various levels of technical knowledge at the beginning of the day, with some girls feeling quite intimidated by writing code themselves. And when we talked about the theory and concepts of HTML and CSS (for a very short time as these are teenagers!), some girls seemed even more shaky they would catch on. However, 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.

CodePen is more than a web IDE, it is a community of creative developers. This takes it to a whole new level.

I can post my little examples, designed to clearly illustrate a single principle, and my students can fork it to take the example and expand on it. I can share Pens I've found in the community that make further use of those principles.

Exactly how do educators use CodePen in the classroom?

Here's a couple of possibilities:

You create a Pen that is an assignment. Perhaps it's some HTML that you expect students to style a certain way. Perhaps it's an image of something you expect them to recreate. Perhaps it's Fizz Buzz! You send the Pen URL with students and ask them to fork it and send back their solutions to you. Hot Tip: you might get some ideas for assignments from Pens designed to be interview questions.

You explain concepts during class, and need an enviornment to do that. So you project CodePen onto a screen and use it to live code. Presentation Mode works great for that.

You teach in a computer lab and want to teach concepts to your students. Rather than (or in addition to) using a projector, you send them a link to a Professor Mode session where the students can follow along as you live code.

Students need one-on-one help (perhaps during office hours) to understand a coding concept. Rather than code for them, you want them to code, but you also want to be able to jump in to help. Collab Mode is great for that, and like Professor Mode, can be used remotely between any two computers on the internet.

No two educators we've talked to ever use CodePen in exactly the same way. We build the tools, you do the teaching.

Bring CodePen To Your Site

You might already have a web site that is the hub for your class. Maybe you create written lessons that students read and follow along with. Perhaps it is in Blackboard, Canvas, Google Classroom, or your own website. That's smart.

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.