What I Learned Building a Simple CodePen Alternative for Middle School Computer Science
The bell just rang for fifth period, and Javi was already waving me over from his Chromebook, his scuffed skateboard keychain swinging from the laptop’s corner. “Ms. L,” he said, leaning in so the kids next to him wouldn’t snicker, “why’s there a weird ad for a dating site popping up over my neon hover animation?”
I’d been expecting something like this. I’m a part-time computer science teacher at a small public middle school in western Ohio, and for two years I’d worked around the gaps in our coding tools. CodePen is the gold standard for quick, sandbox-style front-end coding practice—you can write HTML, CSS, and JavaScript side by side and see your changes update instantly, which is perfect for kids who want to tweak and experiment. But the free public version comes with unmoderated user content and ads, and the school license costs more than our entire annual department tech budget of $275. Six months earlier, our district’s content filter had blocked CodePen entirely, after another school found inappropriate content in a public pen that a student had stumbled on.
I mentioned the problem to my brother, a full-time web developer, over Thanksgiving dinner, while we were passing the mashed potatoes. He shrugged and said, “Why don’t you just build your own? It doesn’t need half the stuff CodePen has. You just need the basics for your kids.” I know enough HTML to get by, and a little basic JavaScript, so I said why not. We spent the next month, a couple hours a weekend, putting it together.
I expected the process to be way more complicated than it was. We didn’t build anything from scratch. We used an open-source free live editor component called CodeMirror, integrated it with our school’s existing Google Workspace login so kids didn’t have to remember a new password, and hosted the whole thing on a $5 a month virtual server that comes out of my classroom snack budget. The first version had three core features: a split screen with code on one side and live output on the other, automatic saving to a student’s personal folder, and zero public access—only the student and I can see any work a kid posts. I added 20 example pens I curated myself, things like a basic animation template or a navigation bar, so kids could reference them without digging around the public web.
The first week we rolled it out, I broke the live preview twice. I accidentally made all of first period’s work visible to third period for 12 hours before I caught the mistake, and no one even noticed. What surprised me most was how kids used it, compared to the locked-down coding tools we’d used before. Most school coding platforms are built around step-by-step lessons—you have to complete one level to get to the next, and you can’t veer off to make whatever you want. Mia, a 7th grader who usually rushed through assignments or got distracted halfway through, spent three after-school sessions building an animated birthday card for her grandma, with pink flowers that popped up when you clicked the screen. She asked me to turn on the share link toggle, sent it to her grandma, and came back the next week saying the grandma had printed a screenshot and taped it to her fridge.
After a couple months of using it, I’ve picked up a few concrete things that any teacher or parent could use if they’re frustrated with the available coding tools, too. First, you don’t need to build a polished product. The extra features that big platforms advertise just distract kids most of the time. I took out the dark mode toggle in the first version because kids were spending 10 minutes switching it back and forth instead of writing code, and only added it back a month later when most kids had gotten used to the site. Second, you don’t need any fancy connections or big money to pull this off. Most communities have someone who knows basic web dev who’d volunteer a couple hours— a parent of a student, a local college computer science student, even a friend from high school. Ours costs $5 a month, which is less than I spend on printer ink for lesson plans. Third, locking down public access by default doesn’t limit creativity, it makes kids feel safer. No one has to worry about accidentally seeing something they don’t want to see, and kids don’t have to stress about strangers seeing their work if they don’t want to share it. When a kid does want to share something, like Javi wanted to share his skate club website with our principal to get approval for a fair table, I just flip a toggle to turn on link sharing and flip it back after.
It’s not perfect. Sometimes a kid writes a wonky JavaScript loop that crashes the preview, and I have to walk them through refreshing to fix it. I still find small bugs every couple weeks—last week the save button stopped working for 20 minutes right before a project was due—and I text my brother to help me fix it after dinner. I don’t have time to market it or make it available to every school that asks, right now it’s just for our 180 kids.
Last week, Javi added a countdown to the first regional skate competition of the year to his site, and shared the link with all 12 members of his new club. Mia is working on an interactive quiz about rescue dogs for the school’s animal welfare club. It’s messy, it’s small, and it’ll never have all the features of CodePen. But it’s built for kids, not for advertisers or subscription buyers. I’m still tweaking it when I have time between grading quizzes and planning lessons, and I don’t know what it’ll look like a year from now. But right now, it’s working better than any expensive tool I’ve tried.
Please indicate: Thinking In Educating » What I Learned Building a Simple CodePen Alternative for Middle School Computer Science