Why I Built A CodePen-Like Coding Site For Middle School (And What I Learned As A Teacher)
The room still smelled like microwave popcorn and cherry slushie when I walked past Javi’s desk last October. It was 7th grade computer science, post-lunch, and half the class was still dragging through their first assignment: build a simple profile page with a heading and a list of your hobbies. Javi’s screen wasn’t pulled up to our school LMS, though. It was open to CodePen, and he minimized the window fast when I stopped, shoulders hunching like he was about to get sent to the office.
“I’m not messing around, I promise,” he said. “I finished the profile, so I made this thing where you click a pizza to add pepperoni. But I can’t show it to anyone on the class page, and this site has all those weird ads at the top, and some of the other projects on here are definitely not for school.”
He was right. CodePen is an amazing tool for adult web developers, but it was never built for 12-year-olds. It has unmoderated public projects, ads for crypto and dating apps that slip past even our school’s content filter, and no way to lock access to just your class. The coding platforms marketed to schools were either too locked down—all gamified, block-based, with no room for kids to mess around with real text code once they outgrew the scripted lessons—or $300 a year per teacher, which was more than my entire department’s annual supply budget. I’d been frustrated for a year that kids who wanted to experiment beyond the assignments had no safe space to do it, so I thought, why not build my own simple version?
I spent two months picking away at it after school. My own two kids did their homework at the kitchen table while I sipped cold coffee and tweaked code, leaning on a free open-source code editor template I found on GitHub to avoid building everything from scratch. I cut all the things that didn’t matter for school: no public search, no promoted projects, no ads. I kept the best part of CodePen: live previews that update as you type, and a remix button that lets kids tweak someone else’s work to make it their own. I added small, school-specific rules: every project has to be approved by me before it goes live to the class, you can turn off remix permission if you don’t want people touching your work, and all projects get deleted at the end of the semester if you don’t want to save them.
When we launched the first week, Mia, who rarely speaks up in class, remixed Javi’s pizza project and turned it into an interactive ice cream sundae builder with a score counter for how many sprinkles you added. Within a week, half the class was building little projects that had nothing to do with my assignments: birthday cards for family that shoot confetti when you open them, tiny clicker games, fan pages for their favorite K-pop groups with interactive light sticks. It was messy, and half the code was full of janky errors that broke when you clicked the wrong thing, but that’s what I didn’t expect: kids cared way more about these messy, personal projects than they ever cared about my graded assignments.
It didn’t take long for issues to pop up. A week in, a kid figured out how to embed an unfunny, inappropriate meme into his project, which made me add an alert that sends me an email any time a new project is submitted for approval. Our school’s ancient Chromebooks struggled with the live preview at first, so I stripped out half the extra features to make it load faster. Once, the whole site went down for 45 minutes mid-lesson because our school’s internet cut out during a thunderstorm, and we just pulled out pen and paper to plan our next projects instead.
If you’re a teacher or a parent looking for a safe space for kids to mess around with real code, you don’t have to build a whole site from scratch like I did. If you already have a CodePen account, you can make a private organization for your class or your kid’s friend group, moderate every project before it goes live, and use a free ad-blocking extension on classroom devices to get rid of the unwanted ads. If you want something simpler, you can even use Google Sites to embed small, pre-approved CodePen projects, so kids only see what you want them to see. The big thing I learned isn’t that you need to build your own tool—it’s that kids will engage so much more when they have space to experiment and share with each other, instead of just turning in assignments to a teacher. Most platforms for kids either treat coding like a game to beat or a test to pass, but the whole point of playing with code is that you get to make something that matters to you.
Right now, three other teachers at my school use the site. The art teacher has kids build interactive digital collages, the 8th grade math teacher has kids make tiny tools to practice graphing linear equations. Javi comes in after school once a week to help me fix small bugs, and he’s currently lobbying me to add a dark mode. The site’s still janky. Half the buttons have weird alignment, sometimes kids lose their work if they close the tab by accident, and I still haven’t figured out how to add a save reminder that doesn’t get annoying. I don’t know if I’ll ever get it polished enough to share with other schools, or if it’ll even work next year when we switch to new learning management software. But right now, it’s a space where kids can build whatever they want, safely, and that’s more than we had before.
Please indicate: Thinking In Educating » Why I Built A CodePen-Like Coding Site For Middle School (And What I Learned As A Teacher)