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?

TYIA

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’.

3 Likes

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

It can be found here:
http://www.page2images.com/

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.
https://dcrazed.com/free-web-browser-mockups-psd/