CodePen is one of my favorite sites for helping students learn how web apps are constructed. In fact, I like it so much that I’ll be featuring it in one of next week’s Practical Ed Tech Virtual Summer Camp webinars. 

The concept of CodePen is that people can share the web apps that they develop and others can copy and modify those projects. The neat thing about it from a teaching and learning perspective is that you can see the how the CSS, HTML, and JavaScript work together. Edits made to the code are almost instantly carried-out for you to see. 

Earlier this week I received an email from CodePen that highlighted a few projects from the public project gallery. One of those projects that jumped out to me was the Visualizer 3000 project. The Visualizer 3000 lets you create an image gallery that is displayed in the form of a View-Master. A new image from your gallery is displayed each time you click on the handle on the side of the View-Master. 

Applications for Education

As I mentioned above, CodePen’s format provides a great way for students to see how CSS, HTML, and JavaScript work together to form a web application. The Visualizer 3000 project could be a fun one for students to tinker with to change the color scheme, add pictures of their own, or change the number of pictures that rotate through the gallery.

Here’s a video overview of how CodePen works.

This post originally appeared on FreeTech4Teachers.com. If you see it elsewhere, it has been used without permission. Sites that regularly steal my (Richard Byrne’s) work include CloudComputin and WayBetterSite.