Challenge: Build A Portfolio ... Q. How to capture an entire web page in CodePen?

In the Challenge, Build A Personal Portfolio, I’m trying to add my Tribute Page to my portfolio but am unable to capture the entire web page.

CodePen seems to have disallowed full webpage screenshots. Is there a workaround for this? If not, the only thing I can think of doing is copying the code of my Tribute Page and saving it in the appropriate file types on my computer and opening that up in a browser. Is there maybe an easier way then that?

Question Recap:

  1. How to capture entire web page in CodePen?
  2. Are there any simple alternatives to capture the entire web page, other than creating a file on my computer?

Err, why do you want a full page screenshot? And how do you judge a “full page”.
Remember there are mobiles, tablets and various sizes of monitors these days.

I personally made some small screen grabs of some of my projects and hosted those images on the internet.

I want the full page, as in very top of the page to the very bottom (not just what’s currently displayed on the screen). The only preview I can currently get doesn’t show much of the page, getting the entire web page will allow me to customize what’s shown. I want to show as much as possible so who ever sees the preview can get a good idea of what web page includes. I’ve seen other previews show quite a bit of the webpage and it looks really good in the thumbnail preview.

You could use an iframe

1 Like

Just added it and it seems to have potential, just gotta configure it some. Thanks very much for the suggestion!

1 Like