Hey, I’m nearly finished with my portfolio website project but I have absolutely no idea how to convert my projects on Codepen into images for the projects section. How do I do this? FCC doesn’t cover this and I’m really frustrated trying to figure this out. I’d really appreciate any help I can get.
Just take a screenshot of your project.
You could also use Codepen Embed and just embed the project right on your page. Click embed at the bottom of the page of the pen to get the code.
@ArielLeslie I tried taking a screenshot but I still can’t figure out how to upload the screenshot from Codepen. I’ve even tried to copy and paste the url onto the element but I guess it’s the wrong format because that doesn’t work either. How do you move a screenshot where you want it after you take it? Sorry, I’m still pretty new to screenshots.
When you want to include images on a website, those images must exist (“be hosted”) online. The free version of CodePen does not include asset hosting, so you will need to host your images elsewhere. If you just google “free image hosting” you’ll find a multitude of options. Just don’t use Imgur, because they block CodePen.
Thanks! I think I figured it out. I just Googled how to save an image to Github. And after talking to my computer-savvy husband, I was able to figure out the steps I was missing.