This post explains some of the benefits you'll get from using CodePen without getting bogged down in the platform's nuts and bolts.
Why did I write this post?
All those fine-grained aspects are helpful in certain situations, but they also zoom right past the big picture. They miss the forest for the trees. Before I write HTML in a tool, I need to know why I'm writing that code in the first place. What am I getting out of it?
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?
7 broad uses for CodePen
#1: 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.
#2: 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.
Thankfully, CodePen lets authors tag their work with keywords to identify relevant topics. Can't figure out how to code up a slick navigation bar? Searching the site for "navbar" returns a list of examples. Filter on pens if you're interested in just a working demo, or on posts if you're in the mood for a tutorial.
Once you find a few ideas, why not create and share a CodePen collection? A collection - which I cover later in the "Collections" section - can group together all the solutions you find for a particular problem.
#3: 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.
By contrast, if a daring competition speaks to you, try a CodePen challenge. Each week the CodePen staff announces a prompt and encourages the community to create Pens for the theme. Submit your finished Pen with the week's tag and check out what others have done. For example, this week's challenge asks participants to creatively use circles.
#4: Document bugs in open source software
If you've never maintained an open-source software project, here is how troubleshooting a bug in the project's code typically happens:
- You're making a web app.
- You decide to use an open-source library in your app. You have probably never met the people who wrote this library.
- Your app probably uses more than just this library. It likely uses other libraries and a bunch of your own code, too.
- Your app hits a snag.
- After a bit of troubleshooting, you suspect the open-source library is causing the problem.
- You open a bug ticket on the library's GitHub project, claiming the library broke their app.
- One of the library's maintainers asks you to reproduce the bug in a Pen. (They might mention JSFiddle, StackBlitz, or something other code hosting tool.) And though they might not say it, they also want your example to use just their library and as few other external dependencies as possible.
Here's the important thing: When these folks ask you to reproduce the bug, they aren't trying to be a pain. It's just that they probably have no idea how you wrote your app, which other libraries you included in your app, or any of the other dozen things that could cause the snag you're experiencing. They're trying to work with you to prove that their library is causing the problem. Their approach is straight out of Troubleshooting 101: determine the precise cause.
CodePen is a useful tool for documenting and sharing these demonstrations of bugs. So let's revisit the story and see how you can have a stronger impact by using Pens:
- You're making a web app which uses an open-source library.
- Your app hits a snag.
- After a bit of troubleshooting, you suspect the library is causing the problem.
- You open a bug ticket on the library's GitHub project, claiming the library broke their app. In the initial description of this ticket, you provide a Pen which recreates the bug in the smallest possible environment with the least dependencies. You've essentially proven via example that the library is very likely to be the culprit.
- The library's maintainers accept your Pen as proof of your claim and dive straight into the work of fixing their bug.
See the difference?
This brief post explains why these kinds of minimal test cases are so useful.
#5: Share ideas and accomplishments
At its core, CodePen is a community. While you can work in isolation, you'll get the most value from the platform by socializing. Try these easy steps whenever you come across an impressive pen or post:
- Click the heart icon in the top right to help surface the best work on CodePen. You'll also be able to find the pen again more easily later.
- Share the pen on social media.
- Add the pen or post to one of your public collections. Don't worry if you don't know what how to do this right now - I cover it below.
You can also use CodePen as a venue to strut your stuff. If you work professionally as a web developer or designer - or want to - a curated set of shining examples of your work will go a long way toward impressing employers. You can even treat your CodePen profile itself as an online portfolio. Speaking of which...
#6: Use your profile as an online portfolio
Web designers live and die by our portfolios. I've been asked for mine in every interview with full-time employers or freelance clients. If you're a designer, you have to have one.
Approaches to implementing an online portfolio range from a fully hosted, What-You-See-Is-What-You-Get tool like Weebly to creating everything from scratch with no third-party tools. While each strategy has its pros and cons, I recommend one that does two things. First, your approach should showcase your ability to write HTML and CSS - after all, that's what people want to pay you for. Second, don't waste your time with all the technical chores of managing a website, such as maintaining a web server (unless, of course, that sounds fun to you). CodePen meets both of these needs.
I recommend creating your entire portfolio as a single CodePen project, deployed in production mode. I explain how to do that in the "Projects" section of this guide.
I won't go into the details of how to design or build a portfolio since you can already find a bazillion tutorials on the web. I will say that when you share your impressive CodePen portfolio with potential client and employers, send them the link to your Pen's full page view, not the Pen view. I explain these options later in this post. For now, just note that most employers want to see your finished work first, then maybe dig into the code behind your portfolio.
Since we're talking about landing a job...
#7: Look for jobs
Maybe you're just into web stuff for the kicks. You don't care about money or employment and you just like pushing pixels as a hobby. Good for you! For the rest of us working stiffs who have to care about these pesky job things, CodePen makes it easy to find jobs pushing those pixels. Just hit the job board and start scrolling.
Of course, you will be a much more impressive applicant if you have a portfolio of shiny projects to show, so check out the previous item on this list if you haven't already.
Now that you have a clear idea of what to use CodePen for, you might wonder how to use it. So...
Things you can do with the building blocks of CodePen: Pens, projects, posts, and collections
We've covered the broad strokes of things you can do with CodePen in general. In this section, we'll explore things you can do with the smaller, individual components. When you create stuff on CodePen, you're going to use one of four types of content. Let's look at them one by one.
The Pen is CodePen's defining feature, the sun of its solar system. It provides a simple mechanism for hosting a web snippet which makes something render in a web browser. You will probably use it for most of your essential work on the site. We'll cover how to create pens later in my section on the CodePen Editor.
You can view each Pen on the platform in one of three ways, with each way giving a different perspective. You can change your view of a Pen by clicking the Change View button.
First, the default Pen View shows the Pen's code editor next to its rendered result. The view is ideal for inspecting the code to learn how the author created what shows up on your screen.
Second, the folks at CodePen describe the Details View as being the "most sharable" view. Rather than showing you the Pen's mechanics, it's more oriented towards information about the Pen, such as the author, comments, and social data.
Finally, the Full Page View puts the spotlight on the Pen's rendered results. It doesn't show much else.
So what is a designer to do if her work starts to grow beyond these restrictions? It's time to upgrade to...
The project is the Pen's big brother. It looks and acts more like an integrated development environment and hosting tool than a mere coding scratch pad. A project lets you manage and edit several files of various types and work on a much larger scale.
Here are a few things you can do in a project which you can't in a Pen:
- Create a file directory.
- See the processed output of preprocessor files, like .scss and .ts files.
- Bundle and minimize your code for improved performance.
- Deploy your program as a production version with no CodePen user interface around it. In my section above on using a CodePen project as a personal portfolio, I recommended this approach.
As you might have noticed, projects aren't for the casual user. If you don't think you'll use these unique features, you're probably better off sticking with a basic Pen.
Of course, you can blog on CodePen. I'm not going into detail here, because... well... you do already know how to blog, right? If not, the internets offer a wealth of resources on the topic, like this one.
I will say that CodePen seems a natural fit for blogging about web design and development. After all, most people who visit the site are interested in those topics. While a Pen shows off the code and rendered results of a given technique, it's not a natural fit for explaining something in depth. So think about writing a tutorial post to cover in words what you couldn't convey in visuals.
Now we come to the final building block for CodePen users. Say you have found a bunch of neat pens which are all related in some way. Wouldn't you want a handy link to get back to them all again later? Sure, you could bookmark each of them in your browser, but that's boring! And bookmarks are hard to share. Thankfully, CodePen has sent collections to the rescue.
As you come across a Pen you want to add to a collection, use the "Collections" control at the bottom of the Pen's default Pens view. Collections show up in your dashboard and have a link which you can share with teammates.
Things you can do with the CodePen editor
Expecting an in-depth tutorial on every detail of how to use the CodePen editor? Oh, sorry. We're not doing that here. Yeah, yeah, I know: how can I write a tutorial on CodePen without exploring the editor's every nook and cranny?
But two facts remain. First, like all web applications, the CodePen editor evolves. It doesn't sit in a cocoon. So if I included a bunch of screenshots and words telling you where all the buttons are and what they do, this guide would go stale in short order. Second, the written word is a poor medium for documenting a user interface. For this reason, video tutorials and the plain old "clicking around on things to see what they do" approach are far better tutors.
So instead, I'll only talk about things you can do with the editor, not how to do them. If you want to read the how, check out the official CodePen documentation. The CodePen staff do the hard work of keeping it up to date, for which I am grateful.
Fork an existing Pen
Say you come across a Pen that looks somewhat cool or uses a technique almost flawlessly, but something is lacking. It needs a tweak. Don't waste time recreating the Pen from scratch. And don't steal the code by copying and pasting (not cool, bro). Instead, fork the Pen by clicking the "Fork" button in the Pen's default Pen View. This action copies the entire pen into a new one which belongs to you. Equally impressive, CodePen tracks how often a Pen is forked and by whom, thus giving some love to the original author. Isn't that nice?
Create a Pen from scratch
Creating a new Pen is the digital equivalent of stretching a blank canvass across your easel. It's great for doodling when you don't have a clear picture of where you're heading. But it also means you're going to write all of your code from scratch, so be prepared to work. I recommend creating a Pen from scratch only when you don't have a relevant Pen from which to fork.
Embedding a Pen
Finally, you can embed a Pen in another Pen, in a post, or pretty much anywhere else on the web. Click the "Embed" button on the bottom of the Pen's default Pen view to get started. Use the resulting dialog window to change things around in the embedded Pen to get the exact look you want. If the dialog's buttons don't give you enough control, you can always change the styling values within the code snippet itself.
7 habits for getting the most out of CodePen
- Find a cool pen or project twice a week. Ask yourself “how did the author do that?” Read through the source code until you can answer that question.
- Each time you face a thorny web design problem, search CodePen for solutions. If you find more than one, create a collection from them. Promote the collection on your blog or social media.
- Submit an entry to a CodePen challenge at least once a month.
- Each time you read a bug ticket for your favorite open-source web project, notice whether the issue has a demo which reproduces the bug in a minimal environment. If not, make one on CodePen. Add your demo to the bug ticket.
- Sign up for the CodePen Sparks newsletter. Heart each Pen which tickles your fancy.
- Each time you make a Pen which represents your best work, add it to your personal online portfolio.
- Write a tutorial on a design or development topic once per month. Post it on CodePen.