How Building a School-Friendly CodePen Alternative Teaches Better Beginner Coding
The bell just rang after lunch last October, and I was erasing the whiteboard in my middle school computer science room when Mia’s hand shot up halfway across the room. “Ms. Lopez, why is there a picture of a creepy clown on the side of my screen?” she said. I walked over, and sure enough, a random ad for a new horror movie was embedded in CodePen’s public sidebar, right next to the simple personal page she was building for her quarter project. Before I could pull it up on my screen, Javi yelled from the back table that the link he’d just sent me for his pong game had an ad for a weight loss tea with an influencer in a bikini at the bottom. That’s when I knew I couldn’t keep using public CodePen for my classes anymore.
I’d used CodePen for 5 years for intro coding, and it was perfect for beginners. No need to download big code editors, no confusing setup, just type HTML, CSS, or JavaScript and see what your code does instantly. But the problems had been piling up for a while. CodePen’s official terms don’t allow kids under 13 to make accounts, so I’d been having kids share links through our class portal instead, which was clunky. The public gallery is unfiltered, so even if a kid searches for “simple button code,” they can stumble on projects with coarse language or mature content. Admin had been asking me for a safer alternative for months, but all the school-specific coding platforms were either way too expensive for our small rural district, or so locked down that kids couldn’t tinker freely.
I mentioned this to my older brother, who does freelance dev work on the side, over Thanksgiving dinner. He was picking at my leftover mashed potatoes and said, “How hard can it be to build a stripped-down version just for your kids? We can do it in a few weekends.” So that’s what we started doing. We met every other Sunday night at my kitchen table, after my two kids had fallen asleep and his kids were back at their mom’s house. I drank lukewarm cold brew, he brought a bag of cheddar goldfish left over from his son’s soccer game, and we cobbled something together using open-source tools that already existed – we didn’t build the code editor from scratch or anything fancy.
What features did we build that CodePen doesn’t have for schools? First, no public anything. Every project a kid makes is only visible to them, me, and any classmates they choose to share with. No unfiltered gallery, no random ads served based on browsing history. Second, it ties straight into our district’s Google Workspace login, so no new usernames or passwords for kids to remember, and we don’t have to store any personal contact information, which checks all the COPPA boxes admin cares about. Third, we added simple starter templates for every project I assign: a blank personal bio page, a 16×16 pixel art grid, a multiple-choice quiz framework, so kids don’t freeze up staring at a completely empty screen. Fourth, the turn-in button sends the project straight to Canvas, so I don’t have to chase down 30 different links every grading period.
I thought we were just building a safer replacement. I didn’t expect it to change how kids actually learn to code. After three months of using it, I noticed far less unintentional plagiarism. When we used public CodePen, at least a third of my students would pull a complete polished project from the public gallery, change a couple of words, and turn it in as their own. I could never tell how much they actually understood, because they never had to work through the frustrating little parts of getting code to do what you want. Now, there’s no public gallery to copy from, so they start with the template, change one thing at a time, and ask for help when they get stuck. Javi, the kid who got the bad ad, ended up building a profile page for his rescue beagle, and spent three class periods figuring out how to add a little wiggle animation to the dog’s photo when you click it. He shared it with his table group, and they helped him tweak the speed until it looked just right. He never would have done that if he could have just grabbed a pre-made profile from CodePen.
If you’re a teacher frustrated with public coding platforms, there are small steps you can take before you jump into building your own site. A lot of people don’t know CodePen has a free educator plan that includes classroom mode, which lets you create private projects for your class, turn off public access, and remove most ads. That worked fine for me when I ran a small after-school coding club, before I added three full class sections this year. If you do need something more custom, you don’t need a team of devs to pull it off. We used an open-source editor called CodeMirror that handles all the text editing and syntax highlighting for free, and it took us less than 12 total hours of work to get a working version up on a $5 a month virtual server. For parents whose kids are learning to code at home, you can replicate this on a tiny scale: create a shared folder with simple starter projects, and use a free offline editor instead of letting them browse public CodePen, to cut out the random inappropriate content.
It’s not perfect. Sometimes the live preview lags when all 32 of my 7th graders are on it at the same time. We still haven’t figured out how to add a fork feature so kids can build off each other’s projects easily, which is on our to-do list for this summer. My district still hasn’t agreed to cover the hosting cost or give us any paid time to work on it, so right now it’s just my brother and me fixing bugs in our free time. We don’t know if it’ll turn into anything that other schools can use, or if it’ll just stop working when we get too busy with other things to maintain it. But right now, my kids don’t have to ask why there’s weird content on their screen while they’re trying to code. Most of them are actually proud to show off their messy, half-finished projects, because they know only people they know will see them. That’s more than I expected when we started messing around with this idea last fall.
Please indicate: Thinking In Educating » How Building a School-Friendly CodePen Alternative Teaches Better Beginner Coding