DEV Community

loading...
Cover image for How to get the Codepen Pro experience for free with github

How to get the Codepen Pro experience for free with github

leviathanprogramming profile image 𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming ・2 min read

Codepen is an awesome site. You can edit and create almost any frontend thing you want. Codepen Pro is even more amazing, but do you have the money to pay for it? If you do, will you have the heart to pay almost twenty dollars a month?

I personally am not a Pro member, and here are some tips that you can use to maximize your codepen development without paying a penny.

use github

In codepen pro, you get to upload assets on your own such as images, audio, video files, and more. You can do this in the same way if you use github.

uploading an image

Create a new repository or just add on to an existing one if you want to add an image. First, upload an image to the repo and you should be redirected to the URL of the image.
You should see something like this:

Alt Text

Now, right-click on the image, copy the image address, and you can use that URL as an image now.
Here is the result:

Alt Text

uploading an audio file

Upload an audio file to a github repo and navigate over to it.

Alt Text

Click the link that says "view raw". That is the official audio URL.
Copy the URL and paste it into an <audio> tag and there you go. You have now officially uploaded and implemented an audio tag.

uploading a video

To upload a video, go through exactly the same process as uploading an audio file. Just do it as a video.

I hope you enjoy.
Happy Coding.

Discussion (0)

pic
Editor guide