CodePen 🙌🏼 Education
CodePen is an ideal environment for educators to teach front-end design and development.
Real-time Editing
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.
Easy Access
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.
Keeps Up As Students Progress
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 search for and add a library like jQuery.
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.
We have several PRO features that
are built with education in mind.
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 keypress and setting change is shown live. Better than video – the students can interact with the code, see it live rendering, and participate in group chat. Students can fork the Pen at any time to save a copy and have a play themselves.
Presentation Mode
Using CodePen on an overhead projector, like in a classroom or conference? This mode is for you. We minimize the UI to give you the most space possible for your code and give you on-the-fly controls for controlling the UI (like colors and sizes) to make it perfect for the current screen.
Privacy
An unlimited number of Pens, Posts, and Collections can be made private with any PRO plan. These will be hidden from your public profile and from search, but still findable by you and shareable.
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.
– Jason Weaver
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.
– Travis Miller
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 are 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 explanations and feedback can happen.
- You can Export Pens. Exporting as a Gist can be useful for seeing difs.
Developers of all ages learn on CodePen. CodePen is used in web education from elementary 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.
– Melissa Taylor
CodePen is more than a web IDE, it is a community of creative developers. This takes it to a whole new level.
– Tim Willison
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 are 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 environment 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 website 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.
You can integrate CodePen into any of those by:
- Linking out to Pens, Posts, or Collections where useful.
- Embeddeding Pens to show demos right within those lessons.
- Using our Prefill API to create Pens with starter code on-the-fly.
You Tell Us.
While CodePen is used in education quite a bit, to be perfectly honest, CodePen wasn’t designed as an education product specifically.
We’d like to evolve CodePen to meet the needs of educators more directly. So if you have feedback or questions toward that end, don’t hesitate to send them our way.