So the issue I’m having is trying to find the best way to include my projects onto my portfolio page. I was thinking of some kind of card layout where you can see maybe an image or a preview kind of like in the example project, but I’m not sure where I would upload photos to link to or if that’s even the best option. I tried doing the embedded codepen thing as well and it just wasn’t the aesthetic I’m looking for. Should I just look to take screenshots and use those as links like the example? Or is there a way to link a preview somehow?
If you are building your portfolio on CodePen, you’re unfortunately rather limited in your options. CodePen only offers asset hosting (uploading images) for Pro members - on the free tier, you’d need to use a separate image host and insert the image as an <img> element on your CodePen project.
As for taking screenshots, that’s the route I have gone for my portfolio:
Ah, yeah I kind of assumed my options were limited… but thank you for the clarification!
Maybe i’ll just find some images that are similar or use a FontAwesome icon on a card and just have it link to the codepen. I’ll mess around with it!
I would recommend that you focus on getting the tests to pass and the project to look the way you want, then later on as you are further in your journey I would consider improving on your portfolio and sourcing a different host (I use GitHub Pages) that allows all the features you need.
Yeah it’s definitely been a tough balance! I know that it’s smart (to a point) to just get the project finished to move on to bigger and better things, but at the same time that little voice in my head keeps saying MAKE EVERY PROJECT PORTFOLIO READY lol. I’ll definitely have to check out GitHub pages once I get back into the swing of things!
Not everything has to be portfolio ready. These are an opportunity to learn, for sure, and a great one, but potential employers will have seen many projects of these types - I went through the curriculum, built my projects, and then applied that learning to personal projects of my own design. That is where I focused my efforts.
Hi, I use this webpage to upload the screenshot of my projects: https://imgbb.com/
The good thing is it work perfectly, and it will provide a HTML link for you.
The bad thing is you can only choose the option of “Don’t AutoDelete”, so it will keep your screenshots forever on the web i guess.
Hope it helps!
The images I used for my portfolio on codepen for learning were linked to web addresses for pics that weren’t actually my project, which works.
If your portfolio is just for learning you can pick some photos on the web to link to.
If the intent for this portfolio is professional to showcase your work (to get hired or clients) your best option is not to use codepen (and from what I have read your projects should also not be on codepen).
I used screen shots for my projects for my actual portfolio. Someone else’s portfolio I saw used artistic pics of their laptop opened to the project, which I found creative.
Like it was already mentioned GitHub pages is a good option for static websites. If your not on GitHub already you should look into it, or another version control software.
For websites that need a server Glitch or Heroku are options. Free sites have to “wake up” so there is a delay until your website loads. FCC moved or is moving from Glitch to Repl. So that may be another option but I haven’t used Repl so I’m not sure on all they offer.
I was trying my hardest to keep it simple with codepen before resorting back to Sublime and iterm for github and the whole works lol! But i’m thinking I should just keep it simple for now and move onto the next certificate i appreciate your input!
i appreciate your input!