FCC Portfolio project feedback please 9.26.18

Hi all this is my FCC portfolio page. Any feedback(especially if I built the site out correct(using best practices), is super helpful and appreciated. Any tips or other project suggestions like fcc that would give me more practice would be great. This way I can get my css and html really down. https://codepen.io/raregamer/full/jeNVPQ/.

Looks fantastic!! In the second section there is a small error. One of your projects does not have the bottom part of the image and try to design your headlines a bit different, looks too much like a button


@raregamer This does look good. Just a few things to consider…

CodePen doesn’t require the “head” info because it is already prepared for you. You can call your meta viewport tag in the HTML settings. And remove everything before the header id.

You called two different style sheets. But you called them from your computer. I see that you actually placed it all in the CSS panel (which was correct). However if you were to actually call them on CodePen, you would need to reach out to a hosted url.

I love how you did the strike-through with “Hello World”.

In your projects section: remove the testing bundle X from each project now that you have passed the test. Keeping it will confuse the user. Also, each a href should include target="_blank" .

I see the image that @mblmarlon is talking about. Perhaps a light color background below the video game would help it seem less like at cut-off.

I also agree that if you remove the border from around the header, it will look less like a button. I did want to click on the Connect “button”.

These are just small details that can make the user experience better.

It really does look pretty.

1 Like

Awesome thank you guys for the feedback and I will tweak, those sections I completely hear what your saying.

Looks good.

  1. Not sure the #welcome-section image needs to be quite that big, it looks to be coming directly out of an iPhone 7 and has EXIF meta data, including GPS data, that you may not want in there. You can use a free online tool to compress and remove the meta data.

  2. The h1 Connect looks like a button but isn’t, it might be signaling to the user something that it is not (i know this was mentioned already).

  3. The left/right margin on .code-style is causing an overflow, if you just set the top/bottom that fixes it.

#projects .code-style {
    margin: 10vh 0;

#contact .code-style {
    margin: 10vh 0;
  1. The connect icon hover is causing a bit of jittery/jumpiness, one thing you might try is using grid for them.
// Give the containing div a class and use grid on it.
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-items: center;
  width: 60%;
  margin: 0 auto;
1 Like

Thank you, would you be able to help me out with the photo sizing for the phone or iphone problem in general I am not sure why I can’t get it to be responsive correctly on it. I noticed this issue, but I wasn’t sure how to actually correct it. I was thinking maybe media query or a wrapper on it. Though I really wasn’t sure how to handle it being it’s set as a background image. And thank you for the grid idea. At what point were you able to look at something like that and realize this would fix the problem I am having. I am struggling with those concepts right now.

Do you mean the sizing of the image on small screens?

So the thing is the browser is trying to maintain the aspect ratio of the image, whatever height the image has dictates how much narrower it can get. If you remove the min-height you can see what i mean.

I was not really able to just look at it and come up with the idea, i tried a few things first to see if there was an easy solution, then i tried out flexbox, then i tried grid. Although, i did suspect grid would work from the get-go.

1 Like

Hmm, I tried to do that, but it didn’t really work. I think my social div is also causing problems. Something I did when I made the layout with the css elements is conflicting and I didn’t contain parents and children correctly. I will need to sort through it and see how to make everything contained better. The weird thing is when I go to debug in code pen everything works sort of correct.

Try to view your Full Page and then Inspect it…

What did you try, and what didn’t work?

I tried removing the min-height all together, tried to just add height, tried media query. Those where the main things. I believe it is the vh unit for ios that is causing so many of the problems. I guess I shouldn’t have used vh as a unit so much. I didn’t realize it since the user story and example kind of suggested use of it. At least now I know why running so weird on the phone and not actual browsers.

Yes phones can be tricky to test for, you can try something like lambdatest or a similar service to check the page on real devices.

Just to note, my point about removing the min-height was so you were able to see how image scaling is tied to the aspect ratio (i.e. how the height dictates how small the image can get before it gets cut off).

Ahh got it. Yeah I will mess with the mobile part of it more. It seems crazy hard to develop something for so many devices.

It is, and honestly i wouldn’t stress too much about it right now in your learning journey, it will only detract from the things that, right now, are more important. And here i mean device specific testing, not mobile friendliness and responsiveness, those you do need to take into consideration.

1 Like


See in the form, there is something confusing me… don’t know how serious the questions are… but

What is your yearly income? … you should put the radio button here since there only one range one can pick… you don’t ear more than one income at a year unless you have different businesses.

In my opinion, it makes more sense have more options to tick in the question “Which would help you the most to achieve your dreams?”… so I would probably swap this.