Why I Built a School-Safe CodePen Alternative for Middle School Coding Classes
Last October, I stood at the front of my 7th grade coding class watching 25 Chromebook screens glow, when Javi, a 12-year-old who’d been obsessed with CSS animations all week, raised his hand. His face was pink. “Ms. Henderson,” he said, “I searched for how to do glitch text and there’s something weird on here.” I walked over, and sure enough, the first public CodePen project that popped up had a crude meme scattered across the screen, hidden between lines of working code. Our district web filter had missed it. I closed the tab quickly, told Javi to try a different search term, and moved on, but that incident stuck with me.
I’d been using CodePen for my intro coding classes for three years, and I loved it for a lot of the same reasons professional developers do. It lets you write HTML, CSS, and JavaScript right in the browser, no complicated software to install, no waiting for students to download files that get lost in their Google Drive downloads folder. Students can tweak an existing project, see the changes live as they type, and share their work with one click. But the problems have been piling up for a while. Most of our students can’t create accounts because of COPPA rules, so they can’t save their work long-term. The free tier has unmoderated ads that sometimes slip past filters too. Halfway through last year, the district blocked CodePen entirely for a month because it’s categorized as a social networking site. That public gallery that makes CodePen useful for grown-ups is just a risk for kids, plain and simple.
I was complaining about it over a lukewarm pizza lunch in the teacher lounge a week after Javi’s incident, when the high school tech ed teacher shrugged and said, “Why don’t you just build your own?” I laughed at first. I’m a middle school teacher, not a software engineer. I’d taken a couple night classes in web development to learn enough to teach my class, that’s it. But that night, after I’d helped my own two kids with their homework and put them to bed, I sat down at my kitchen table with a cold mug of coffee and opened up my code editor. I started small.
My 10-year-old came down halfway through for a glass of milk, leaned over my shoulder, and said, “That’s not homework. Why are you doing that?” I told her I was building something for my students, and she nodded and took her milk back upstairs, which is about as much excitement as you get from a 10-year-old these days.
I had a short list of non-negotiables, all pulled straight from my classroom headaches. No accounts required, so no COPPA hoops to jump through. All projects are private by default—only people with the link can see what a student made, so no public gallery anyone can stumble through. It has to load fast on our slow school Wi-Fi and work on the 6-year-old Chromebooks most of my students use. And it has to be cheap to run, since my classroom budget is $150 a year for everything from paper to headphones. I used a free open source code editor component I found on GitHub, hosted the whole thing on the free tier of Netlify, and paid $12 a year for a simple domain name. That’s it. No fancy subscriptions, no big investment.
I got a rough version working by January, and I rolled it out to my class to test. The first week was messy. Half the students lost their work when they refreshed the page because I messed up how the autosave worked. A couple links broke when I pushed an update over the weekend. But even with the bugs, I noticed a difference right away. Students started coding 30 seconds faster than they did on CodePen, because they didn’t have to click through a login prompt or wait for ads to load. Mia, who struggles with any assignment that feels like “work,” made an interactive birthday card for her grandma in 20 minutes after finishing her assignment early, and sent the link home that day. Javi, the kid who found the inappropriate meme, spent three after-school sessions tweaking a glitch animation of our school’s mascot, no weird detours through the public gallery.
A lot of teachers I talk to think you need fancy, expensive, pre-built tools for coding classes, but this project taught me the opposite. The best tools for kids are the ones that cut out all the extra stuff that adults need. CodePen is perfect for professional developers who want to share work and find inspiration, but it has a dozen features we never use in 7th grade. We don’t need follower counts, we don’t need a trending projects page, we don’t need ads for developer tools. Cutting all that out makes the whole experience calmer and safer for kids.
If you’re a teacher or a parent who wants a safe space for kids to mess around with code, you don’t have to build everything from scratch. There are dozens of free, open source simple code playgrounds on GitHub that you can fork and tweak in an afternoon. You don’t need to add grading or fancy features at first—just get something that lets kids code without logging in, and turn off any public browsing by default. If you don’t want to build your own, look for tools that let you turn off public access entirely before you sign up for anything. That’s the first thing I’d check now, after all this.
It’s still not perfect. I get at least one bug report a week from a kid who lost their project because their Chromebook cleared its cache. Last month, a student figured out how to embed a silly meme into his project and shared the link with the whole class during a presentation, so I’m currently working on a simple filter that blocks external content I haven’t approved. I don’t know if I’ll ever get all the kinks worked out, and I’m not even sure I’ll keep updating it forever. But right now, it works better than any other tool I’ve tried. Last week, Javi’s glitch school mascot animation went up on the digital bulletin board by the front office, and every kid who walks past it stops to stare. That’s more than I ever expected from a side project I started over cold coffee on a kitchen table.
Please indicate: Thinking In Educating » Why I Built a School-Safe CodePen Alternative for Middle School Coding Classes