Portfolio Page Last Project

Hey there!

Just finished my last project for the CSS/HTML course. I feel like improved a lot through out the journey and there will be no stopping at all. Thanks to FCC this has been amazing so far!

Any feedback is very welcome!

Please NOTE: Boy image in the front is actually responsive and aligned up well. I have coded with using Brackets and not codepen.io website. Tested it on Edge, Chrome, Firefox and it’s working fine… Internet Explorer - not so much.

Thank you! :slight_smile:

Hello @eddye
Your portfolio looks really cool. Especially when scrolling down your icons dont hide behind you navbar but your text does.
There is only one problem the navbar does not seems to work properly when you click on contact or about me it does not navigate to the particular section.

Happy Coding and have a good weekend.

1 Like

Your portfolio page definitely looks nice. Just a few minor issues underneath.

  • Your label tags are not working correctly. Give each input an id and then set the for attribute on the label to the input id.
  • Is there a specific reason your top menu items are displaying in the opposite order they are listed in the HTML? When you are navigating by keyboard this makes it slightly confusing. I think it would be expected that keyboard focus would go from left to right instead of right to left.
  • You’ve got an <a> tag at the bottom each list that is not in an <li> but is in the <ul>. This is technically incorrect. Move it oustide of the <ul>.
  • You are using an <h3> to display a whole paragraph’s worth of content. Headers should be short and concise. Move that content to an appropriate tag. Same with the <h2> under following the <h1>.
  • You are making a jump from <h2> to <h4> in your three project boxes. You should only jump one heading level at a time.
  • I feel like you are using the alt text for each image in the project boxes as a header, but since it is an alt tag the user won’t see the text. If these icons represent actual header content then you need to use header tags and put the alt text in there. If they are just decorative then you should hide them from screen readers with aria-hidden=“true”. My guess is that these should be decorative and you need better headers for each of these boxes.
  • Speaking of headers, it would not hurt to add one to introduce the three project boxes, especially for accessibility.
  • At larger font sizes the menu items at the top break out of the <nav> Check out the overflow CSS property to solve this.
  • Also at larger text sizes your menu items shift around awkwardly when narrowing the browser. I would not use floats to position these.
  • You might want to make they keyboard focus outline stand out a little more. I have to look real hard to tell the difference between a focused and non-focused ‘Visit Website’ button.
1 Like


Thank you so much! Will fix these asap then I will have some more free time :slight_smile:

1 Like


Thank you for your time looking at this. I will definitely look into this! :slight_smile: