How to use CodePen Code Inside Your Webpage

With the world rapidly evolving by the minute, staying on top of the in-demand skills’ curve is a voluminous task. Web Development is one such skill that is almost essential to the modern developer. With a market size of about $40Bn in 2020, the need and opportunity for quality web developers are ever so evident.

Whether you are new to the world of web development or an accomplished developer, you might have come across CodePen. CodePen is an online community for testing and showcasing user-created HTML, CSS, and JavaScript code snippets.

Once you have a good foothold on HTML, CSS, JS/Jquery, it’s not necessary to design each component of your webpage from scratch. CodePen apart from being a code editor also has unique functionality, It functions as an open-source learning environment, where developers can create code snippets, called “pens,” and test them. Most of the time CodePen would have tons of “pens” made by the developers that you can add to your website to make it more lavish.

In this article, We will look at a small example of how you can use any “pen” from CodePen and add it to your site.

Step 1: Open CodePen.io

Step 2: Type anything in the search box

You can type anything that you wish on adding to your webpage. It can be a responsive slider, a team card, about section, animations, etc. In this article, I will add a beautiful slider. So go on and search beautiful slider in the search box.

You’ll get a good astonishing options to chose from. We selected https://codepen.io/supah/pen/zZaPeE.

Step 3: Code extraction

Now as you can see, the Codepen editor shows us the amazing code that built this slider. But do you think copying the code simply from this editor and pasting it in yours would work? The answer is NO. Most of the time the “pens” that you see use external libraries that the CodePen editor does not show. So simply copying them would result in inaccuracies that would be hard to resolve if we don’t import these libraries.

To do that, navigate to the bottom right corner of your screen and click on Export -> Export as .zip. This will download a zip file of the same pen in your system. Extract it using any extracting tool such as Winrar/Winzip and see the files.

The zip contains two folders dist and src along with a readme and license text file. You can explore/read them for your interest. Now select the “dist” folder and there you’ll see index.html, style.css, and script.js files. Open all of these in a text editor(Sublime, Atom, Brackets, etc).

On opening the HTML file with any text editor, we see many external libraries apart from style.css and script.js.

Add these lines inside your index.html along with the body section( I created a sample HTML page with a “CodePen Slider” title that will be followed by this CodePen slider) and you have successfully extracted the main code.

Now save the file, don’t forget to add “script.js” and “style.css” in the same directory. If you have those files in any other location, update the href and src according to that.

Step 4: Open the index.html file

Kudos!!! You just add a “pen” to your website. Pat yourself on your back. Play around with the code. Change the source of images, text on top of images according to your liking/requirement.

Conclusion:

In this article, you learned how to use “pens” from CodePen inside your website easily. If you want to add any “pen” apart from the example in this article, the process remains the same. Keep building beautiful websites. Thanks for reading!!!