Why I Built a School-Safe CodePen Alternative for My Middle School Coding Club
The crumpled granola bar wrapper on the table crinkled as Javi leaned in, his Chromebook glowing blue at 3:15 on a Wednesday. He’d just watched a YouTube tutorial about CSS hover effects, found a demo he loved on CodePen, and clicked the link to show the rest of our after-school coding club. The screen flashed our district’s standard “This site has been blocked for content violation” banner, and Javi groaned, dropping his head onto his arms. “Why is all the fun stuff blocked here?”
I’m the club advisor, and I couldn’t even blame him. I’ve browsed CodePen enough to understand why our filter blocks the whole domain: it’s entirely user-generated, anyone can post anything, so it gets lumped in with unmoderated social media and other sites the district won’t risk. Even when the project is totally kid-appropriate, the whole domain stays blocked. The workarounds we’d been using weren’t working for anyone. We could have kids apply for accounts, but COPPA rules require written parent permission for anyone under 13, and half the time forms don’t come back for weeks. The educational coding platforms we can afford are so locked down you can’t tweak a line of code and see it change instantly – which is the whole point of playing around with code, right?
After that Wednesday, I complained about it over lukewarm coffee in the teacher’s lounge. One teacher said she just has kids paste code into Google Docs and preview at home, but more than a third of our students don’t have reliable personal internet to do that. Another said we could beg the district for a premium educational license, but our entire after-school program budget is $800 a year, and that has to cover field trips and craft supplies. We couldn’t blow half of it on 15 coding club kids. That’s when I thought: I know enough basic web dev to throw something simple together. How hard can it be?
I spent three afternoons on weekends, between grading quizzes and driving my own kid to soccer practice, building a rough version. It’s nothing fancy: two panes side by side, one for writing HTML, CSS, or basic JavaScript, the other for a live preview. Hit one button to save, get a shareable link, no account required. All projects are private by default, unless the student checks a box to share it within our school domain. Any shared project gets sent to me for quick approval before other people can see it. I hosted it on a free cloud tier, and it costs me $2 a month to keep it up – less than my daily iced coffee. I named it PlayPen, because that’s all it’s really for: playing.
The first month taught me more than I expected. Javi remade that hover effect he wanted, added a little clicker game where you pop balloons, and shared the link with the whole club. Mia, a quiet 6th grader, built an interactive birthday card for her grandma who lives out of state, sent her the link, and grandma could open it no login required. We had one small misstep: a kid pasted a link to a silly off-color meme into his code as a joke, a paraprofessional walking through the club saw it and emailed me, I took it down in 10 seconds. I added a one-click flag button for staff after that, no big overhaul, just a small adjustment.
A lot of teachers from other districts have reached out asking how I did it, and what tips I can give them if they want something similar for their own groups. First, if you know even basic web dev, you don’t need to build anything fancy. There are free open-source templates for code editors you can drop into a free host in an afternoon; I spent more time tweaking the color scheme to be easy on middle school eyes than I did writing core code. If you don’t know how to code at all, ask your high school computer science program. Most high school students are looking for real, tangible projects to put on college applications, and building a simple code sharing space for the middle school club is a perfect low-stakes project that does actual good. A district a couple hours from me did exactly that, and the student who built it still helps tweak it when he’s home from college.
For parents who have kids interested in coding at home and are nervous about them browsing unmoderated sites like the original CodePen, there’s a low-lift workaround too. You can set up a private workspace on Replit for free, turn off the public browsing feature, and your kid can save all their small projects and mess around without running into content you don’t want them to see. It takes 5 minutes to set up, no credit card required for a single user.
The biggest thing this whole project has shown me is that most of the time, we don’t need big, expensive, polished tools for small group learning. Kids learn to code by messing up, by making silly little games for their friends, by testing an idea they saw online and making it their own. When we lock that away because of compliance or cost or risk, we take away the part that makes them want to keep coming back.
It’s not perfect. The preview loads slow on our oldest Chromebooks, we can’t host any back-end code projects right now, and I still get a notification once a week to approve a shared project that’s just a kid drawing a crude shape with CSS. Last week, three of my 8th graders asked if they can add a comment feature, so kids can leave little notes on each other’s projects. They already mapped out how they want to build it, and they’re going to work on it after school over the next month. It’ll probably have glitches at first, and I’ll have to add more moderation rules, and that’s fine. It’s not a product, it’s just a space for kids to play. Right now, that’s more than enough.
Please indicate: Thinking In Educating » Why I Built a School-Safe CodePen Alternative for My Middle School Coding Club