How I built a simple CodePen-like site for my middle school coding class (and what I learned)
Last October, I was wiping crumbs off my keyboard at 7:45 AM in the computer lab, waiting for my 8th grade coding club to start, when Mia slid into the seat next to me and tilted her screen toward me, voice low. “Ms. Lopez, is this supposed to be here? I clicked ‘trending’ to see examples, and…” It was a meme with a crude punchline, posted by a random public user, the kind of thing that’s just not appropriate to pop up when you’re trying to teach. That’s the day I decided to stop using public CodePen for my classes and build my own.
I’d loved using CodePen for beginners, don’t get me wrong. It’s perfect for new coders: no need to download confusing software, no messy file setup, you type one line of CSS to change the background color and you see it change instantly. It’s made for messing around, which is exactly how kids learn to love coding. But the problems kept piling up: the trending tab was hit or miss, loud ads for coding bootcamps distracted kids, and half the time they’d get sucked into browsing other people’s work instead of finishing their own projects. The bigger issue, after Mia’s find, was that I couldn’t control what popped up. The district’s web filter catches most bad stuff, but it misses things all the time.
After school that day, I ate a cold peanut butter granola bar from the vending machine, sat at my lab desk, and started looking for alternatives. All the school-specific coding platforms were $200+ a year for a site license, which my tiny department budget couldn’t cover. The free alternatives still allowed public sharing, so the same problem popped up eventually. I’ve built a few simple sites for school fundraisers before, so I thought, how hard can it be to put together a stripped-down version just for our kids?
I spent two after-school weeks and two weekends working on it at my dining room table. My 10-year-old son kept bringing me half-finished dinosaur drawings and asking when we could play Codenames. I’d tell him 10 more minutes, which turned into 30, and he’d go pout and watch cartoons on the couch. I used a free open-source editor tool, hooked it up to our school’s existing Google login so kids didn’t have to create another username and password, set it so all projects are only visible to people logged into our school’s domain, and stripped out everything except the three code panels and a live preview. No trending section, no comments from outside users, no ads. Just new project, save, edit, and share with your class.
We did our first test run with coding club two months later. First day, Javi, a quiet kid who doodles all over his notebook, tried to save his pixel art avatar project and got an error because I’d accidentally set the file storage limit way too low. We laughed about it, I fixed it that night after dinner, and he got it up the next day. That’s when I noticed the unexpected difference. On public CodePen, Javi never shared any of his work. He told me once that all the projects on the homepage were these super fancy 3D games and animations that looked like they were made by professionals, and his little avatar felt “dumb” next to them. On our site, the only projects up are made by our 7th and 8th graders. Javi posted his avatar, and by the end of the week 12 kids had commented asking how he did the little blink animation when you hover over it.
That’s the part I didn’t expect when I started this. I thought I was just solving a problem with inappropriate content, but I actually removed a huge layer of pressure kids don’t even talk about much.
If you’re a teacher or a parent dealing with the same headaches, you don’t need a huge budget or a computer science degree to pull this off. If you don’t want to build from scratch, you can fork a free simple editor template on Glitch in 20 minutes, set the project to private, and restrict access to your class or your kid’s friend group. If you’re a parent whose kid is into coding and you don’t want them scrolling through random public projects, you can even set up a small private one for just your household for $12 a year for a domain. The concrete steps that worked for me are simple: First, always use the login system your school already uses—most districts use Google or Microsoft, so you don’t have to mess with setting up new accounts. Second, strip the interface down as much as possible. I removed every extra button that wasn’t “new project”, “save”, or “share with class”. No distractions, no extra stuff to click when kids get bored. Third, keep everything private to your group by default. Kids can choose to share with the class, but nothing is public unless you approve it. Fourth, set a 10 minute weekly reminder to check new projects. It takes less time than grading a stack of vocabulary worksheets, and it’s easy to catch anything that shouldn’t be there before anyone sees it.
I know a lot of people will say “why bother? Just use the district’s learning management system or one of the big coding learning sites.” But those big sites are made for structured lessons, right? They don’t let kids just mess around, experiment, and make whatever random thing they want. That’s the part that gets kids hooked on coding, not just checking off assignments. CodePen is great for that open play, but it’s made for professional developers, not middle schoolers.
What’s still not working? We’re still tweaking the way kids share projects with their parents. Right now, you have to be logged into the school account to see anything, so when we have our digital arts night, parents have to borrow their kid’s login to see their work. It’s not a huge hassle, but it’s not perfect. Sometimes kids post silly doodles that are just middle-school gross, nothing bad, just stuff that needs to be taken down, and that’s my 10 minute weekly check-in job. It’s not a polished, perfect product like the real CodePen. But it’s ours.
Last week, a group of three girls made an interactive quiz about our school’s teachers for the end of the semester, and all the kids in the club were taking it during lunch. No one was scrolling trending, no one got a random inappropriate meme, and all three girls were bragging about their work to anyone who would stop to look. That’s more than I ever got out of public CodePen. It’s still a work in progress, but that’s okay. That’s what coding is supposed to teach kids, anyway.
Please indicate: Thinking In Educating » How I built a simple CodePen-like site for my middle school coding class (and what I learned)