CodePen is a code editing environment in which students can see how HTML, CSS, and JavaScript work together to form web applications. As you can see in the screenshot that I’ve included below, the screen is divided into four parts. There’s a column for HTML, a column for CSS, and a column for JavaScript. Below that there is a preview panel that displays what the application looks like and how it functions.
The best aspect of CodePen is that it is a real-time editor. That means you can change any aspect of the HTML, CSS, or JS and immediately see the effects of those changes in the preview panel. This is a great way to see what happens when a variable is changed in an application. If the change didn’t work as anticipated, a quick “CTRL+Z” on your keyboard reverts it back to the previous state. The same is true when you edit an aspect of the HTML or CSS.
You can register for a free CodePen account using an email address, a GitHub account, Twitter account, or a Facebook account. (I signed up using my school-issued Gmail address and my students did the same). The first time that you sign into your CodePen account you’ll be taken through a very short tutorial that leads into making your first project. The first project is a simple “Hello World” project that has some basic HTML, CSS, and JS elements that you can quickly edit.
CodePen does have a gallery of publicly shared projects that you can copy and modify. In fact, the screen image above is of a project that I found and shared with my students so that they could get some fun practice with CodePen. You can
access the same project right here.
Applications for Education
My Computer Science Principles class is now at the point that they’re ready to break out of scripted activities or projects and work on making functioning applications of their own. During the year they’ve had experience writing HTML, CSS, and JavaScript (most recently they
ripped through the lessons in Blackbird Code). So this morning I had them jump into CodePen, specifically
this LOLCat Clock, to experiment and see what they could modify and make. Without exception all of my students liked using CodePen and one was even effusive in praising how quick it was to see changes implemented.
Next week my students will spend some more time using CodePen to tinker with existing projects before I send them off to brainstorm and develop web apps of their own.
CodePen Free and Paid Plans
CodePen offers free and paid plans. My students and I have only used the free plan so far. The paid plan offers additional features that could be helpful to me in the future. Those features include Professor Mode and Collab Mode. Professor Mode would let me remotely watch my students’ progress in real-time. Collab Mode would let me and my students collaborate on projects in real-time much like working in Google Docs. You can read more about CodePen’s paid plans for educators right here.
This post originally appeared on FreeTech4Teachers.com. If you see it elsewhere, it has been used without permission. Sites that regularly steal my (Richard Byrne’s) work include CloudComputin, TodayHeadline, and 711Web.
