Help with Codepen Layout

Hey all,

I’m working on my HTML / CSS Project Portfolio. At the same time, I’m going to be applying for some jobs in IT. I have my portfolio page linked in my resume.

My questions / issues are:

  1. When you click on a link from My Portfolio page to navigate to one of my projects, instead of pulling-up a new window, codepen just opens an additional console on My Portfolio page so there are essentially 2 sets of consoles and 2 sets of web pages. I’m trying to make this easier for a prospective employer so when they click on a project, it opens into a new browser. Is it possible to adjust this from codepen?

  2. When I started a lot of my HTML/CSS projects, it was through the legacy course so many of my projects have the freecodecamp menu (3 green bars) that show if you’ve completed all of the objectives for the project. Is there any way to remove that menu?

Thank you!

EDIT: Here is a link to my portfolio page: https://codepen.io/PickNStrum/pen/ZExJRgg

If you click on one of “My Projects” projects, I think you’ll see what I’m saying. Instead of opening a new browser, it opens underneath “My Portfolio” project in the same browser.

I am not sure what it is exactly you mean but if you have a target=blank element, it promps to open a new window. Although it is best practice to have clickable items open in new window.

Try having a look at what type of menu you are using maybe you’re using dropdown

Yes! Ideally, I would like people to be able to click on a project photo and it opens in a new window.

As it sits, I have my photos coded in HTML to open via “href=[link to project]” - with this, when clicking on a photo, it doesn’t open in a new window but opens within my portfolio, right underneath instead of in a new window.

Are you saying I should change the “href” to “target?”

Delete the line of code you added to each project that has the link to the test code.

No, each type of HTML tag can have a set of attributes. For anchors, one of those is “href”. That one is where you specify the URL the anchor is a link to. Another one is “target”

I would very, very strongly suggest not using Codepen to showcase things. It’s very useful for writing small pieces of code and getting immediate visual feedback, but it is not pleasant to look at entire websites embedded in a pen. In addition, because CodePen is a code editing app, it needs to load that entire app just to show these basic web pages, so it’s incredibly slow and males it difficult to do basic things like you are trying do (because it’s not designed to support them).

Here is what I get when I navigate to your link:

The actual content is inside an iframe, I can’t even zoom out. I know theres a full-page view option somewhere, so it won’t take me long to find it, but I shouldn’t need to.

Secondary here , but I would also very strongly suggest producing something that isn’t obviously a basic course project, something that you care about – the aim is to demonstrate you have some specific technical skills, whereas this demonstrates you’ve [possibly] done a free online course in web development basics.


Just as an example that I like [and this is just an example, it’s something that interested them and they tried to do it], someone on the forums wrote a first-person shooter in Codepen. It wasn’t very good, and it didn’t work very well, but it was interesting enough that I spent time trying to play around with it on my phone (it only supported keyboard input), went through the code on my phone, then when I was in front of a computer, played around with it. If someone just starting out linked that on a resume, I don’t think that I would be alone in spending a relatively large amount of time investigating it. And in an interview, it’s not unlikely that a fair amount of time would be spent talking about it.

[quote=“DanCouper, post:4, topic:537278, full:true”]

Delete the line of code you added to each project that has the link to the test code.

No, each type of HTML tag can have a set of attributes. For anchors, one of those is “href”. That one is where you specify the URL the anchor is a link to. Another one is “target”

Thank you - adding “target=_blank” to the anchor element solved it.

As to Codepen being less than ideal, I completely agree. If you have a recommendation on what I can use, feel free to let me know. Short of hosting a web site, I thought this was the next best thing.

Also, for reference, I’m not applying to a programming / coding job. This is just a small piece on my resume to possibly set me a part from the crowd. Also, formatting for all of my pages isn’t there yet. Thanks for the suggestions!

1 Like

You can look at using GitHub pages or Netlify (both are free). If you already have a GitHub account, then you are halfway there.

Ahh - got it! Thank you!