How to upload a picture to Codepen

There are some common challenges that you are going to face while using codepen.
One such challenge that you will face is where to store the images that to use with your HTML & CSS project. When it comes to images and files, Codepen has a few limitations that might give you a headache such as:

    1. You can only host images on Codepen using a Pro or a Super Pro account. That means you have to pay to store images on codepen. You get 1GB and 5GB respectively.
    2. The maximum allowed file size is 2MB. Any image or file above 2MB will not be uploaded on codepen.
    3. You can only link to these images inside of Codepen. So if you want to use these images elsewhere, you will have to download them and then upload them to the new place you want to use them.
    4. You can only upload 10 files at one go. To upload more files, you will have to wait for the first 10 to finish uploading before adding the second batch. If you have many files you want to upload, this might be a big headache for you.

So let’s figure out how to overcome these two challenges.

You can only host images on Codepen using a Pro account.

If you can afford and are willing to pay for a pro account, by all means pay for the account and use it to host your account.
For those who cannot be able to pay for a pro account, or Codepen file storage services dont suit you, you can store your images elsewhere and then add a link to your image.
One of the places that you can save your images is on Github.
You can checkout a quick tutorial on how to upload images to github.

You can also save your image on Flickr.

Once you save the image, copy the URL/ link.

Open the codepen that you want to add the image.
Write the html image tag
Inside the double quotes, add the link that you copied previously so that it look like this.
Your image should now be visible on the codepen. You can add as many images as you want.

The maximum allowed file size is 2MB
To overcome this, you will need to reduce each of your image file size to a size of less that 2MB. You can achieve this by:
Saving the file as a .jpg instead of .png.
Lowering the quality of the image so that they are less than 2MB.

The image assets are only link-able through * domains.
If you want the ability to link your images from any website, please use other services like Github or Flickr or Drive of Dropbox since you won’t be able to do that with

You can only upload 10 files at one go.
If you have lot of image that you want to upload, you can either be very patient and upload 10 image at a go or use a different service to upload and link the images on codepen.

What is comment tag in HTML?

A comment tag is a HTML tag that is used to add comments to a HTML page. A HTML comment tag must have:

    1. <!– at the beginning of the comment.
    2. Text or HTML markup in between.
    3. –> at the end of the comment.

An example of a single-line HTML comment tag is:

<!-- This is a single line HTML comment -->

If you want to comment out a whole HTML section, you can use a multi-line HTML comment as shown below:

Continue reading What is comment tag in HTML?

How can I improve my HTML and CSS skills?Answered

three dice with the words learn practice improve

There are two steps you can use in order to improve your HTML and CSS skills:

    1. Practice HTML and CSS using the knowledge you already know by building projects.
    2. Identify the gaps in your knowledge and filling them in.

HTML and CSS are languages that you can pick up fast but takes a lot of time to master. This challenge can be overcome through lots of persistence and practice. Let look at how I can help you accomplish more using these two steps.

Continue reading How can I improve my HTML and CSS skills?Answered

What does form do in HTML?

A HTML form is used to get user input on a website(or web app) and then use the input to interact with a server. The HTML form element does three things:
    1. Holds and contain the elements that will collect the input.
    2. point to where the collected data (from the form) will be sent.
    3. Indicates how the data is sent to the server(Method).

Continue reading What does form do in HTML?