CodePen learn

In this quick 3 steps tutorial, we’ll learn to host an image on Github Pages and use it in Codepen.

You can use codepen pro account or use other services like Github or Drive. Copy the URL link to the image on your preferd hosting . e.g. https://i.imgur.com/1aCAUZA.jpg . Open the codepen that you want to add the image.

It’s fast and easy. Just open the Assets panel, then drag and drop a file (or files) onto that area. They will upload and then slide down into the appropriate area based on their type. Click on them to get the URL to where they are hosted.

#Creating and Uploading Files Give the file a name and file extension in the yellow text field. To create a file inside a specific directory, click the directory first, then click the “New File” button . Drag and drop individual files into the Project Root, or into directories within the project.