Thumbnail of previous sites built

I’m working through the second project now - Portfolio Page and I’ve created a gallery but I wanted to put in at least one page that I’ve built. So, the question is, what does everyone find is the best way to get a thumbnail of the sites they included to add to the gallery?

Is it as simple as screenshot it or are there sites out there that might be better?


Just take a screenshot.
Open Chrome Dev Tools (F12), -> Toggle Device Toolbar (Ctrl + Shift + M) -> Select ‘Responsive’ -> Resize the inner screen to your liking -> Click three dots on the upper right corner -> Select ‘Capture Screenshot’.


Here is the output of an online HTML to image converter:

It can be found here:

1 Like

That’s great, thanks both. I will check those out

I used web capture site. You can create png, jpeg and other formats. You can’t capture image from a locally hosted web server. So http://localhost:3001/ will not work.

How did you remove the menu bar of CodePen?

Switch to debug mode.

1 Like

Got it! Thanks so much :smiley:

Just a tip: If you want to add a cool touch, try putting the image in a browser mockup and throwing a box-shadow under it.