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.

Why do we use Flexbox? – Answered

We use flexbox because we want to:

    1. display a collection of items in either the horizontal or vertical direction.
    2. control the dimensions of the items in that one dimension(horizontal or vertical) of your choice.
    3. control the spacing between the items.
    4. centering items.

1. Display a group of items(vertically or horizontally)

Flexbox is ideal for displaying a group of items because:

    • It allocates space to a group of items automatically.
    • You can set the items to stay in one row or to reflow to a second or third row.
    • If the number of the items changes(is not fixed, the size and order will be taken care of.)
    • You can control the order of the items.

2. Control the dimension of items

You can use flexbox if you want to maintain the ratio of width or height between the items.
When you area using flexbox, you can create card components of equal width and height. Their heights will be the height of the card with the most content.

3. Control spacing between HTML elements

Flexbox has 3 ways to control the space between the elements. These are: space-around, space-evenly and space-between. These cater for majority of the issues that usually arose from setting the spacing between items.

4. Centering items

CSS makes centering items both horizontally and vertically straight forward. To center items horizontally, just set the flex direction to row. To center items vertically, set the flex direction to columns.

Reasons to use flexbox

    • Flexbox is well supported by all major browsers.
    • Flexbox syntax is easy to understand and pick up.

When not to use flexbox

Don’t use flexbox for the main layout of the page. Instead use media queries and max-width to create resposive pages.
Don’t add flex property to all containers in the page. It is not a silver bullet. Instead, use it only when its the simplest solution to the problem of layout(alignment, scaling, or order) of containers.

Why was flexbox introduced

Previously, CSS layout and positioning were some of the most difficult concepts for web designers, regardless of experience.  Infact some of the ways items were laidout involved using hacks. With CSS flexbox, positioning and layout is straight forward.
With display: flexbox; designers and developers are also in control of the direction, alignment, and spacing of page elements.

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

Changing padding using javascript

When you create a webpage, and it is loaded on the browser, everything looks good. However, when the user interacts with your webpage, the perfect look may change or become distorted.

There are two ways you can go about doing this.

So, you want to make changes to the amount of padding once a user adds something on a web page. Therefore, it is important to know how to make such changes using javascript.

Continue reading Changing padding using javascript