What I Learned Building A Simple CodePen-Like Site For My Middle School Coding Class
Last Tuesday, I was stacking leftover graph paper at my desk after the final bell when Mia, a quiet 7th grader in my introductory coding class, leaned over the counter, phone in hand. “I made this during free period,” she said, turning the screen toward me. It was a pixel cat that chased your cursor around the screen, complete with tinny little meow sound effects. When I asked where she built it, she sighed and said it was CodePen, and that it got blocked by the district filter 10 minutes after she started. She couldn’t get back to it to finish the tail animation.
I’d heard this same complaint a dozen times that semester. CodePen is the perfect playground for new coders: it’s free, it lets you see instant previews of your HTML, CSS, and JavaScript, and you can poke around other people’s projects to see how they pulled off a cool effect. But because it’s full of public user content, some of which isn’t appropriate for school, our district blocks it entirely. The paid school-friendly alternatives run $300 or more a year for our small department, which we don’t have in the budget. The free locked-down tools let kids turn in assignments, but they don’t let them share their silly side projects with each other – which, I’ve found, is half the fun of learning to code. So on the drive home that day, I decided to just build a simple CodePen alternative for my classes.
I spent two weekends working on it after my 10-year-old son went to bed, drinking too much gas station coffee and sorting through free open-source code components I found online. I didn’t overcomplicate it: I just needed a code editor, an instant preview window, login through our school’s Google Workspace (so only kids from our district could sign in), and a way to share projects with other students. My son tested it for me and broke it three times in one afternoon by cramming 50 emojis into file names, and I fixed each bug as I went. By the end of the month, I rolled it out to my three sections of 7th grade coding.
The first week, most kids only used it for assigned work. By the second week, I had a group of five kids showing up to my room during lunch every day to build their own projects. One group made a silly “What type of pizza are you?” quiz that got shared around the entire 8th grade through study hall links. Mia recreated her cat animation, added a dog that chases the cat across the screen, and within a week three other girls in her class had built their own little animal animation projects to share.
What I didn’t expect was how much more open kids would be here than on any other platform I’ve used. I’ve had multiple kids tell me they don’t like posting work on public sites like CodePen because they worry strangers will think their projects are too silly or not good enough. Here, it’s just their classmates, so they don’t overthink it. They post half-finished work, ask for help in the comment section, and copy each other’s tricks to make their own projects better – which is exactly how most people learn to code, anyway. It’s not all perfect: a few weeks in, a kid posted a page full of meme photos of classmates that made a couple of kids uncomfortable. It was just a silly prank, but it made me add two quick changes: a written rule that you can’t post photos of other people without permission, and a big one-click “report this project” button that sends me an email immediately. Adding that button took me 20 minutes, and I just check reports once a day after class. I’ve had three reports in two months, all silly pranks, nothing serious.
If you’re a teacher frustrated by blocked coding tools, or a parent with a kid who wants a safe place to mess around with code, there are a few concrete things I’ve learned from this that don’t require a big budget or a team of developers. First, you don’t need to build a full copy of CodePen to make something useful. We don’t have custom embeds, public profiles, or collections of projects – we just have code, preview, save, and share. That’s all new coders need. We still have a bug where the preview won’t load if you add too much custom CSS, and I haven’t had time to fix it. No one has complained; they just refresh the page. Second, if you don’t know how to code yourself, you don’t have to learn from scratch. Ask your high school’s coding club for help. Most of those kids are looking for real, public-facing projects to add to their college applications, and they’ll jump at the chance to build something for the whole school. Third, keep the community small at first. I started with just my 75 students, and that’s easy enough to manage in 10 minutes a day of moderation.
Last week, Mia asked me if she could add a student animation gallery to the homepage of the site, so everyone can see the coolest projects people are building. I told her sure, if she wants to build it, she can. She’s been working on it after school this week, collecting links from other kids who want their work featured.
Right now, it’s just my classes using the site. The high school CS teacher reached out last week asking if he can add his 120 students, and I’m still figuring out if I can manage that on my free time. I don’t have a tech budget or an extra hour a day to put into fixes and moderation, so it might stay small, it might grow. Either way, it’s already done what I needed it to do: it gave kids a free, unfiltered place to play with code, without the pressure of performing for strangers on the internet. It’s messy, it has bugs, and it’s far from perfect. But the kids don’t care about perfect. They just care that they can build what they want, and show it to the people that matter to them.
Please indicate: Thinking In Educating » What I Learned Building A Simple CodePen-Like Site For My Middle School Coding Class