How We Built A Simple CodePen-Like Site For School Computer Science (What I Learned As A Teacher)
It’s 4:17 on a Tuesday, my classroom coffee mug has been empty for two hours, and 13-year-old Mia is leaning over my desk, twisting a rubber band around her finger and showing me her latest project: a bouncing orange cat she built with CSS animation. “Can you unblock CodePen for five minutes?” she asks. “Javi wants to fix the ears to make them pointier, and he can’t do that on our LMS.”
I’ve heard this at least once a week for two years. I teach 8th grade intro to computer science, and our district blocks pretty much every free live code editor out there. CodePen, JSFiddle, CodeSandbox—all get lumped into the “social media” or “unmonitored content” category, which makes sense. CodePen’s home page is full of random public pens, and you can stumble on all sorts of stuff that doesn’t belong in a middle school classroom. The approved tools we do have? They’re clunky. You can’t see your preview update as you type, you can’t share a working link with a classmate in two clicks, and half the time saving a project crashes the whole thing.
I complained about this over dinner that night, and my husband, who does front-end work for a small company, pushed his bowl of pasta aside and said, “How hard can it be to build a basic one just for your school?” I thought he was crazy. I can style a basic lesson plan Google Site and that’s about the extent of my coding skills. But we started working on it on weekends, after our own 10-year-old went to bed.
We didn’t start from zero, that’s the first thing I tell people now. We used an open source code editor that’s already built for this exact use case, dropped it into a simple app that uses the school’s existing Google login—all kids already have school Google accounts, so we didn’t have to build a whole login system from scratch. We talked to our district IT person, who was actually happy to help; he said they had tons of unused server space they just don’t do anything with, and as long as the site is only accessible to people with school logins, there was no policy issue. No extra cost, no fancy approval process, just a little bit of his time to set up the access.
The biggest call we made early on was cutting every feature that wasn’t absolutely necessary. CodePen has user profiles, trending pens, embedded tools, ads, all sorts of extra stuff. We just have three panels: one for HTML, one for CSS, one for JavaScript, a live preview pane that updates every time you stop typing, a save button, and a share button that generates a link only people in the district can open. That’s it. I kept pushing to add little extras at first—“What if we let kids leave comments on each other’s projects? What if we have a class gallery?”—but my husband reminded me that the whole point was to keep it simple. Extra features mean extra bugs, extra moderation work, and extra friction for kids who just want to mess around. We left it all out.
We tested it with my class two weeks ago. I thought they’d just use it for the required final project. What I didn’t expect was how many little unassigned projects they started making. One kid built a clicker game where you pop bubble tea bubbles for his little sister, who’s in first grade at our elementary school. Another built an animated birthday card for her mom, with confetti that falls when you open the link. Mia shared her cat link in the class group chat, and by the end of the period 12 different kids had modified it: one added a laser pointer, one changed the fur to plaid, one added a meow sound that plays when you click it.
This experience has taught me that most educational tech is overbuilt. We spend thousands on fancy tools that have 100 features no one uses, when what kids actually need is something simple that lets them create and share without jumping through a dozen hoops. For other teachers or tech-savvy parents who want something like this for their school, there are three concrete things I recommend. First, ask your district IT about unused server space. Almost every district has extra capacity that just sits unused, and most IT people are happy to support small, low-cost projects that directly help kids. Second, don’t build anything from scratch. There are free, open source code editors you can plug into a basic app, so you don’t need a team of professional devs to get started. Third, cut every feature you don’t absolutely need. If it isn’t required to write code and share it with classmates, leave it out.
It’s not perfect, of course. Sometimes big projects with lots of images slow the preview down to a crawl. We still haven’t added a feature that lets me fork a sample project to share as a starter template for the whole class, which is something I need for weekly lessons. Only my middle school has access right now, so kids who move on to high school can’t access their old projects. The high school CS teacher heard about it last week, though, and asked if we can expand it to his campus next semester. We’re working through that now, still fixing bugs as we go.
Last night I got an email with a new share link from Mia. She modified the cat again, added a little animated fish swimming in the background, and wrote “for you, because you helped us get this.” I clicked it, the cat bounced, the meow played when I clicked its head. It’s not a fancy product, it’s not going to win any awards, and it’ll probably never be used by more than a couple hundred kids. But it’s ours, it works for what we need, and it’s given kids space to mess around with code in a way that the fancy expensive tools never did. We’ll keep fixing the kinks as we go, and see where it goes.
Please indicate: Thinking In Educating » How We Built A Simple CodePen-Like Site For School Computer Science (What I Learned As A Teacher)