Teaching Kids With CodePen

Last week I had an amazing opportunity to help organize BETA Camp; a week long camp that introduces junior high school students to a high level view of the Science, Technology, Engineering and Math (STEM) disciplines. This year was our first annual summer camp for kids interested in learning more about STEM programs and it allowed them to engage in real world experiences with each stream. Along with organizing the camp, I also was a stream lead for Computer Science and Web Development which dealt with teaching the kids how to code and basic web design principles.

Thinking back to when I first started learning coding it wasn’t easy. You wrote a few lines of code, hit save, hit refresh, view the output and repeat. With a few tries hopefully you did it the right way or else frustration will ensue. I also didn’t start at a young age; I really got into development the beginning of my sophomore year in college and got a lot of my experience through internships or being thrown into projects.

Nowadays we have a ton of resources and opportunities online we can use to teach programming that makes learning accessible to all ages. The main resource I used for teaching front-end programming is CodePen. I’ve been implementing the tool for some of my higher level workshops with my own colleagues so it was a no brainer to use. I tweaked the lesson plan of course so that I would present something more understandable for the younger students.

We began everyday walking over to class and I would tell him a little brief history about HTML, CSS and JavaScript. By the time we got to class they jumped to their workstations (or rather their “battle stations” as some of the kids called it) and they were ready to start hacking.

Here are a couple things I’ve learned from using CodePen with the kids:

• It was an easy barrier to entry from the jump. Unlike the other streams, there were no required materials or any required learning in order to start programming and understanding what was going on. The kids just needed to fire up a browser go to CodePen and log on with their account.
• Having new pens on the home page every day was a blessing. The kids never saw the same pen twice and this was cool to them. I told the kids just start exploring what they liked. Whenever I needed to set up slides or had a technical difficulty, the kids took it upon themselves to explore other pens and take a look at their code. We even challenged the kids to find other pens, look at the code, find out what it was doing and even make changes after going over a few concepts in class.
• The code complete functionality that CodePen has built in was a life saver. With help from Emmet, it allowed them to arrive at different development concepts like tags and code structure easier as opposed to typing out an entire tag. The kids saw things happening in real time with immediate results. This kept them interested into what was going on.
• Code WITH the kids. it helps having a pen displayed so they follow you as you go along, question every bit of code as opposed to seeing everything at once and getting overwhelmed. Also if you mess up every now and again, it shows the kids that you’re actually human and can make mistakes as well.
• Provide an overview of a concept then break to jump into coding. Instead of waiting all the way until the end to start doing anything, do drills throughout the class. This is the fastest way for them to catch on. Give them challenges along the way. Classes are meant to be interactive, so give them progressive tasks.
• Forking Code Helps Keeps Interest. There were times where some concepts took longer for the kids to get more than others. When this happens you can briefly start to see waning interest for some who didn’t catch. This is where Forking (duplication of code) came in to save the day. Forking a code from a classmate not only gives them the opportunity the catch up, but they can share with kids, using forks, giving the original coder the opportunity and platform to share their insight on how they did it, which also helps them to relate to each other because they are all on the same level of programming. It also helps me, the instructor, to keep my focus on the other kids while they try to figure out a few concepts themselves.
• The code is theirs forever. Having their own accounts on CodePen means they can access, use, and build on their assignments no matter where they are. They don’t have to have anything to dive back into coding besides their computer and a decent wifi connection. They can also use it as a benchmark to see how far they’ve come.

Wrapping Up

For those interested in learning code from others or even as a platform for education, I highly recommend CodePen as a tool to continue teaching development and I will continue to use it in programs and workshops. iIt’s a great tool to show anyone how they can use code to do the things that they want to do.

The kids had a great time and I enjoyed teaching. And some of the kids started making an account and following me on CodePen. Can’t wait for BETA next year and to see what they start making next.