CodePen Projects

Founded in 2012 by Alex Vazquez, Tim Sabat and Chris Coyier, CodePen has grown to become of the web’s largest and liveliest communities for testing and showcasing HTML, CSS and JavaScript code snippets. For its first five years, it functioned as both an online code editor and an open-source learning environment, where developers could create code snippets ("pens"), test them and get feedback. 

Then in 2017, CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which enables you to build websites within your browser. 

You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools. 

Note that, although it works in a similar way to the Pen Editor, CodePen Projects doesn’t replace the latter but sits alongside it. You can learn more about CodePen Projects in this blog post.

Google "CodePen tutorial," "CodePen help," or a similar phrase and the average result will dive way, way down into the gritty details of using CodePen. You'll find videos and articles galore on how to write Markdown in the CodePen editor, how to apply the React JavaScript library to a Pen, and other specifics.

This post seeks to answer that question. It explains some of the far-reaching things you can do with CodePen and the benefits of doing those things.

This post is mostly for beginners. You don’t have to be a CodePen veteran or even know much coding before reading this. In fact, I think CodePen is an accessible starting point for learning web development and web design. But even if you’re a seasoned pixel wrangler or have a string of Pens under your belt, I hope you pick up one or two new uses for the platform.

Disclaimer: To keep anyone from thinking I wrote this post because I work for CodePen or that they paid me to do this, let me say for the record that I don’t work for them in any way. They sent some sweet swag to hand out at our Refresh Tallahassee meetup, but they had no idea I was going to write this post when they did. I just think CodePen is a cool tool and wanted to write about it. Fair enough?

Learn web development and web design by example

A great way to learn any creative skill is to observe a finished work which interests you and then make your own version of it. CodePen lets you use this approach for web development.

You can search the site for examples of something interesting, such as the application of a particular technique. Or just browse the latest edition of the CodePen Spark - more on that later. Once something catches your eye, ask yourself “how did they do that?” Then read the source code behind the thing you found until you can answer that question.

If you really want to get good at coding, take this exercise one step further and try to write your own code which produces the same result, using the original work as a reference. Even if you don’t create a perfect copy, you’ll still learn by trying.

This approach is useful for learning a range of skills from beginner to advanced. People on CodePen share everything from simple “Hello world!” apps to dynamic 3D animations. I consider myself a reasonably skilled web developer and I still learn something new every time I use this technique.

Search for solutions to a design or development problem

When faced with a thorny challenge in web design or web development, I try to remind myself that I'm probably not the first person to solve the problem at hand. The same rule will apply to you most of the time. Unless you're on the cutting edge of new technology, you can probably find at least one documented solution somewhere online.

Find artistic inspiration

On the other end of the spectrum from targeted problem-solving, we find random inspiration. Searching for the muse, as it were. You have the time and motivation to create something beautiful, but don't quite know what.

If you get motivated by looking at masterpieces, I suggest one of three approaches.

CodePen TV. The easiest (i.e., laziest) way to catch inspiration is to just point your browser to CodePen TV for a rolling highlight reel of picked Pens. When something catches your eye, just click the work's link at the bottom to explore how it was made.

CodePen Spark. A weekly round-up of the CodePen staff's picks, CodePen Spark lets you browse the best content on the site by topic. You can also sign up to get each week's Spark by email, which can serve as a reminder to spend time each week learning by example.

The home page. If neither of the first two techniques works out, you can always just scroll down the CodePen home page in the hopes of stumbling across something you like.