Good Afternoon, I’m building my own Personal portfolio of all the projects I’ve completed so far. How can I included them into my Personal Portfolio page?.
This is the link to my page https://codepen.io/owainbennett10/pen/XWmzgmR.
Can you please help me to achieve this I’ve done other projects that’s not on codepen how can I include them on here as well?.
Can I please have some help I would be ever so great full for some assistance it would allow me to continue
Hello there.
If they are purely HTML, CSS, and JS based, you could create more Pens by copy-pasting, and making it suitable for CodePen.
Otherwise, you can host them elsewhere (Glitch, GitHub), and link to them, as you have the others.
Some things I noticed about your Portfolio:
Hope this helps
Can you please help me with adding projects to my portfolio and ensuring they are the correct project as the tribute page has the correct link wrong photo how can that be rectified. Can you please help me
Also can you help me link my tribute page to the correct photo?.
I hope I can have some help to overcome my the problems in my portfolio as I stressed out about correcting them can anyone please help me
I’ve done the amendments as suggested and looks much better now thank you. Can you please help me with adding the projects I’ve done to the section projects I’ve done I can add the link to the project no problem but the picture part I’m struggling with can anyone help me with that I would be ever so great full for the assistance.
Codepen creates large and small screen shots of your pens that can be used in your portfolio.
Access them from;
https://codepen.io/userName/pen/penName/image/large.png (for the large screenshot)
and
https://codepen.io/userName/pen/penName/image/small.png (for the small screenshot)
I am sorry but those links do not work is there another option we could try?.
Those links do work. Read the included instructions about replacing the userName and penName
You can’t copy/paste what I provided into your page. You have to copy/paste the link that those links give you.
Hello Owain!
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: https://codepen.io/owainbennett10/pen/XWmzgmR
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
= 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:
(https://codepen.io/owainbennett10/pen/XWmzgmR/image/large.png
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 " />
</a>
</"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 <a href="...">
So for your code, inside your
//Tribute page grid element
<div class="project-tile">
<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" />
</a>
</div>//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 <a href=".....">
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:
https://codepen.io/thaisthaisthaisthaisthais/full/ZEbWXZL
Sorry if I’ve made mistakes and my explanations aren’t too clear! I hope this might help someone a little bit.
Done the changes all works now thank you.