CodePen is an ideal environment for educators to teach front-end design and development.
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.
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.
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!
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.
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.
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.
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
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.
Here are a few that it would be good for you to be aware of:
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.
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.
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:
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.