How to use CodePen

Reading time: 3 minute(s)

What is CodePen?

CodePen is a website that lets you test your HTML and CSS code in real time. That means you’ll be able to see your changes the moment you make them.

This makes CodePen a valuable tool for learning HTML and CSS because it provides you with a testing environment to play around in.

Signing up

You don’t need an account to use CodePen, but it’s recommended. This is because having an account allows you to save your projects and come back to them in the future.

To sign up, go to https://codepen.io/ and click on the green Sign Up button at the top-right.

Using CodePen

Once you have signed up, you can go back to https://codepen.io/. Click on the Pen option on the left side, as highlighted below.

This will open a new Pen.

Think of a Pen as an instant webpage that you can mess around in. The first time you create a Pen, it will be blank. With an account, you can save Pens to come back to later.

User interface

On the left side, there are three areas. The top one is for HTML, the next one for CSS and the final one for Javascript.

The right side is for a preview of your project.

Once you start typing in the boxes, you should see the area on the right update immediately, like this:

You can use CSS in the HTML box – if you wrap it with <style></style> tags, but you can’t use HTML in the CSS box. Same goes for Javascript – you can use it in the HTML box with <script></script> tags but your HTML should only go in the HTML section.

Saving your work

Notice how the top of the image below says 6 unsaved changes in yellow. This badge is a helpful reminder for you to click the Save button at the top of the Pen.

If you do not save your Pen, your work will be lost when you leave the page.

Also, if you click the Refresh button on your browser, all work that has not been saved will be lost.

Going back to something you saved

When you save a project, it goes into the Your Work section. You can find this in the sidebar, pictured below.

This is your personal library of code. Be aware that all CodePens are public unless you have a paid account.

Linking to Your CodePen

Once you have created and saved a CodePen, you can copy and paste the URL to share it with anyone.

At the bottom right of every Pen is the option to embed your code, which helps you display your code on a website like this:

See the Pen Nesting by Sadness (@sadness97) on CodePen.

Editing and Forking Other People’s Codepens

On the Codepen homepage, there is a search bar at the top of the screen.

You can search for Pens here (alternatively, you could Google “[project] codepen”).

So, let’s say you wanted to find a code for a navigation bar. Since CodePen allows for especially fancy languages, you’ll find all sorts of projects with advanced SCSS and JS that you don’t need. I recommend adding ‘HTML and CSS’ to the end of your query to find simpler projects you can use on Neocities.

Here are the results for my navigation bar html and css query.

You can click on any of these to open the Pen.

Once you have their Pen open, you can make any changes you like to it. Changing the code will not change the original Pen.

If you’d like to make your own copy of their Pen, click on the Fork button at the bottom right of the window. Fork is just fancy coder lingo for ‘copy that belongs to me’.

This will make a copy of their project and allow you to edit it. You can save any changes you already made this way, by clicking on Save after you fork.

Playing with someone else’s creation is a great way to learn whichever language you’re interested in.

CodePen Tips

There are a few extra things you should know about CodePen that will make your experience using it to learn HTML and CSS a little easier.

HTML tags are easiest to keep track of when they are indented properly. Luckily, CodePen has this feature! Just click on the downward-facing arrow beside the HTML panel.

If you click on Format HTML, it will add the indentations automatically.