How do I make thumbnail images from my CodePen projects for my portfolio?

How do I make thumbnail images from my CodePen projects for my portfolio?

As seen on the example from the Build a Personal Portfolio Webpage:

I would like to create images that are links to the projects I have done so far. However I have no idea how to get the initial image of my CodePen projects.

Help on how to do this would be much appreciated.

My CodePen profile below:

Just take a screenshot.


Since the image is bigger than the screen it isn’t possible to get a complete screen shot, only partial. Shrinking the page doesn’t work because it has to be made so small that it isn’t readable. What am I missing?


For my portfolio, the same was true, I just took a screen shot of the top half and resized it. You can either resize in your photo editor of choice or resize via CSS. (probably smarter to resize BEFORE adding to your project lol).

only one of my projects already had a custom photo that fit perfectly.

I suggest getting an extension that allows you to screenshot the entire page, and then cropping it from there.

Firefox Quantum comes with such a feature built in. You get to it by clicking on the “Page actions” button on the address bar, and selecting “Take a screenshot.”

This creates an image like this.

Taking a screenshot of an entire page is something you might find yourself doing a lot, so its good to have an extension for it. Here are some suggestions for Chrome

From there you can use a photo editor to crop and resize the image to show what you want it to show.

I use the Chrome extension Awesome Screenshot to capture the full page… and then from there crop and size it. I use Gimp for that.

1 Like