How I Built A School-Safe CodePen Alternative For My Middle School Coding Class
The first red flag popped up on Javi’s screen 20 minutes into my 7th grade coding elective last October. I was walking between rows of scuffed Chromebooks, helping kids debug their first round of CSS buttons, when Javi slammed his laptop shut, face pink. “Uh, Ms. Lopez,” he mumbled, “there’s a weird ad covering my whole code.” I leaned over, he lifted the corner of the screen, and sure enough, there was a meme ad for an adult comedy show that definitely didn’t belong in a middle school classroom. I closed it out, changed the subject, but that moment stuck with me.
I’ve used CodePen for years for my coding classes, and it’s almost perfect for what I need. Kids can write HTML, CSS, and JavaScript, see their work update live right on the screen, and no one has to download a bunch of clunky software to school devices. But it’s built for professional developers, not 12-year-olds. The free version has unfiltered ads, and the public gallery is full of all kinds of content that’s not appropriate for school. I always tell kids to stay on their own work, but accidents happen, and it only takes one slip to cause a problem.
I looked into school-approved coding platforms first, of course. But they’re either way too expensive for my tiny elective budget, or they lock kids into rigid step-by-step lessons that don’t let them mess around and make their own stuff once they finish the assignment. Most of my kids get into coding because they want to make their own fan pages or little clicker games, not just check off pre-written prompts. So after that day with Javi, I texted my neighbor Sam, who’s a third-year computer science student at the local university, and asked if he’d be willing to help me build a simple CodePen-like site just for my classes. We met at the coffee shop down the street from the school after dismissal that Friday, I brought a crumpled list of needs written on the back of a half-graded quiz, and we got to work.
I thought we’d knock it out in a month. We had a clear, short list of requirements: no ads, ever. Tie it to our school’s Google single sign-on, so kids don’t have to make a new username and password, and we don’t have to worry about COPPA compliance for kid accounts. All projects private by default – only the student who made it and I can see it, unless a kid wants to share a link with someone else in the school domain. No public gallery, no random strangers commenting on kids’ work. And I needed to be able to pre-load starter templates for assignments – like a blank page with the basic HTML structure already written for new coders, or a half-finished project for kids to tweak. That was the big feature CodePen didn’t make easy for me.
That list seemed simple enough. But we hit small problem after small problem that I never would have thought of. For example, half of our school’s Chromebooks are four years old, and the first version of our live preview lagged so bad that kids couldn’t type more than two words without the screen freezing. Sam spent two weeks reworking the code to make it lighter, so it runs on even the oldest devices. Another time, I realized kids wanted to share their work with their table group to show off what they made, so we had to add a feature that generates a link that only works for people logged into our school’s account. Last month, a kid asked if he could embed his favorite skate crew YouTube clip on his about page, so we had to add a filter that only lets embeds from approved kid-safe sites. It’s all small, specific stuff that big platform companies never think about because they’re building for every school, not mine.
We did our first full test run three weeks ago. I moved all my old CodePen lessons to the new site. The first class had a few glitches – one kid’s live preview wouldn’t load, we had to refresh the whole page – but nothing that broke the period. By the end of class, Mia, who’s usually quiet and rarely shares her work, raised her hand and asked if she could show the class what she made. She’d built an entire about page with CSS animations of twinkling stars in the background, and embedded photos of her rescue cat Luna. The whole class ooh-ed when the stars twinkled, and no random ad popped up over the cat photos. Javi, the kid who had the original bad ad experience, made a little clicker game where you hit falling apples with a hammer, and after class he stayed to show me how he added different sound effects every time you hit an apple.
This whole process has made me rethink how we get tools for small classes. A lot of people assume that if you need a custom tool, you have to pay thousands of dollars for a company to build it for you, or you have to be a master coder yourself. But that’s not true. For any teacher frustrated with the coding tools they’re using, the first thing I’d suggest is looking around your own community. I found help right next door, but most high schools have a CS club with kids looking for real projects to add to their portfolios. A lot of parents of kids in your school work in tech and would be happy to volunteer a few hours a week to help. You don’t need a full-featured product that works for every school in the country – you just need something that works for your 25 kids.
For parents who have kids that like coding at home, this logic applies too. You don’t need to sign up for a $30 a month coding subscription to keep your kid engaged. If your kid is ready to move past drag-and-drop beginner stuff and wants to write real code, you can adjust free existing tools to make them safe. On CodePen, for example, you can make a free account for your kid, set all their projects to private, and block the public gallery from their device with a simple parental control setting. That’s a 5-minute fix that’s way cheaper than a fancy subscription. The big non-negotiable, whether you’re at school or at home, is that kids should be able to mess around and create without accidentally stumbling on content they shouldn’t see, and without ads cluttering up their work.
We’re still working out kinks. Right now, the site only works for my school, we don’t have a way for other teachers to sign up yet, and we’re still trying to fix the issue where big image files slow down the live preview. Sam’s talking about putting it up as a free open-source tool for other teachers this summer, but we’ll see how that goes. It’s not perfect, but it works for my kids right now. Last week, a kid brought in a drawing he made of a dragon, scanned it, and put it as the background on his project. No ads popped up, no one saw anything they shouldn’t, and he got to show off his work. That’s more than I can say for the original CodePen, so that’s good enough for me for now.
Please indicate: Thinking In Educating » How I Built A School-Safe CodePen Alternative For My Middle School Coding Class