I understand your confusion. Maybe you already figured it out but I will leave explanation in case someone else has the same question.
Look at the address of this “page not found”. He gave you this address not for your to click on, but for you to use the same address format.
https://codepen.io/userName/pen/penName/image/large.png <- look how it ends with
/image/large.png . YOu have to take an address your YOUR codePen project and give it the same ending ->
/image/large.png if you want a large image, or
/image/small.png if you want a small image.
This is how you do it:
1. GET THE IMAGE URL
Address of your codePen pen:
If you want the small image of your codePen pen you add
/image/small.png to the end
"address of your codePen pen" + /image/small.png
https://codepen.io/owainbennett10/pen/XWmzgmR + /image/small.png
So when you click now you should see the small image.
If you want the large image you do instead:
This address are what you will put in your HTML code.
2. PUT IMAGE ADDRESS IN HTML
Inside the element that has display:grid in CSS (this is User Story #3 ), you should have for each project you can see in your portfolio an element like this:
(the example below is a little bit “pseudocode” - not exactly real code. I will put exact code example after)
<"some type of element" with class="project-tile">
<a href="address of your image">
<img class="projects__img" src="address of your FULL PAGE view " />
</"some type of element" with class="project-tile">
Owain, I see that the full page view of your codePen is not available because I try to open it says “The owner of this Pen needs to verify their email address to enable Full Page View” - so you should go to your emails, find the email you received when you created an account on code pen, and verify your address. When you do that then Full View will open correctly - but this isnt important now - the address is correct even if it does not work until you verify your email.
One way to solve:
You can put a
<img> element inside the
<a> element. This means that in the grid you will see the image of your tribute page, but because it is inside
<a>, you can click on it to open the page you put with in
So for your code, inside your
you should have elements like this:
//Tribute page grid element
<a href="https://codepen.io/owainbennett10/pen/abvwQEx" target="_blank">
<img class="projects__img" src="https://codepen.io/owainbennett10/pen/XWmzgmR/image/small.png" alt="Tribute Page Project on codePen" />
target="_blank" is just an option you can use to make the hyperlink open in a new window.
class="projects__img" is just an example of the name I gave to the grid element img class
One last thing…
You see the address I used in <a
href="https://codepen.io/owainbennett10/pen/abvwQEx" - this takes you to the editor view of your project. What would be better is if it took you to “Full view” page. To get this address you need to go to top right screen of editor and click
Change View > Full Page View. In your case the full page is not opening because you have not verified your address with Code Pen, but what SHOULD happen is when you open full page view, you can copy the address and this is what you should put in
I haven’t made it too pretty but here is a link to my project if you would to see how the code looks for my grid items:
Sorry if I’ve made mistakes and my explanations aren’t too clear! I hope this might help someone a little bit.