How to Insert a Webpage inside an HTML Document

[aroobanoor]

I am new to programming and doing my last project on freeCodeCamp’s responsive web design certification (that is about HTML and CSS). I am building my portfolio page in this project using HTML and CSS. What I am trying to do is to insert my earlier projects (.html files) that I made, into my portfolio page. I want them to display as webpages in a gallery-type setting that can be clicked on (individually) to open the full webpages. I have these html files on my local windows 10 pc.

I am using iframe element to insert one of these projects as follows:

<iframe src="file:///C:\Users\MC\HTML Projects\product_landing_page.html>

(C is my root directory).

But the webpage is not displaying in the preview. Only the border of the iframe element is showing.

Here is the link to an example portfolio webpage similar to what I am trying to build: https://personal-portfolio.freecodecamp.rocks/

Please provide me with comprehensive guidance. I want to know how to display webpages inside a webpage once and for all.

[Code_Camper]

Hi @aroobanoor, the example page you provided uses images with links to the codepen projects instead of completely embedding the projects on the page. It is a much simpler alternative to using iframes. Hope that helps.

[lasjorg]

Docs for getting the screenshots

Screenshots

[aroobanoor]

Thanks for suggesting. Also, I want to know how I can embed local html files in a webpage. If you could tell me that. Thanks once again

[lasjorg]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

[Code_Camper]

The link to MDN web docs @lasjorg provided is the same one I would have given. Sites like MDN or W3Schools are great any time you want to know more about a specific element.