“Build a Personal Portfolio Page” - feedback?

Project Feedback
#1

Hi boys and girls, I am Simone 33y old from Italy (actually living in Portugal).

I want to share with you all my 5th test for the Responsive Web Design course, to get feedback on it (and also on the other tests, which you will find in the “projects” section).

I’m happy with the result: these are the colors I love the most, I like the transition effects and so on … so I’m looking for feedback from eyes other than mine.

Let me know!

https://codepen.io/jollanza/pen/JjbpLqJ

#2

Hey,

I like your design but I have one thing for you to look at.

Your profile link icons responsive behavior doesn’t work on all viewport sizes and overlap your content. Browser Developer tools can be fantastic to test different viewport sizes.

Nice work, hope this helps

1 Like
#3

Your portfolio looks good @Jollanza. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for. (Noticed you used it in other projects too)

Side note, I took a quick look at some of your other projects. As mentioned, don’t use <br> to force line breaks or spacing.
Also, in your survey form, users should be able to click on the label to toggle a selection, not just the radio button / checkbox

1 Like
#4

Hey @Jollanza, overall, nice looking portfolio page. Just a few suggestions for you to consider:

  • Generally there is usually only one <h1> on the page. I’d make the last two headings <h2>.
  • While we are on semantics, you should wrap the three <section>s in a <main>.
  • You are relying on the browser’s default focus indicators for the links. In my browser (FF on Linux) I can see them for the menu links at the top and social icon links at the bottom but cannot see them at all for the project links. I highly recommend that you customize the focus indicators so they stand out a little more and are consistent across all browsers.
  • You’ve got some weak color contrast, especially the light gray text over orange. Be sure to check for color accessibility so that everyone can read the content on your page.
  • If I increase the text size only then the text content on the project boxes break out of their container. One way to fix this is to use em units instead of px when setting width/height for any elements that contain text. By the way, I’m referring to ‘text only zoom’ here, not ‘page zoom’. If you aren’t familiar with text only zoom, google ‘text only zoom [your browser]’ to find out how to do it. I find Firefox the best/easiest browser to test text only zoom in.
  • Another thing I highly recommend is to use em units for your breakpoints. This way the break point takes into consideration both view port width and text size. An easy way to ball park the em value is to divide the value of your current px break point by 16 and then adjust slightly from there if needed.
  • I see that your social media icons display text below them on mouseover, but not on keyboard focus. I think you should add that.
1 Like
#5

Ok guys!

To get started: thanks for the feedback. I really wanted some real constructive suggestions because I’m still learning.

For example @Minstriker: you are right, I just followed the test guidelines to pass them, nothing more. I should show more attention to my code, because it will be like a “business card” for the future.
Okay, maybe not these little works for FCC, but it’s a start anyway.

@Roma I found your suggestions on the tools I should use very helpful, and I want to say the same to @bbsmooth about the colors and other adjustments!

Following these few guidelines and tips, I started reworking my pages. For now the validations are good and I am working on responsive viewporting, you should already see some change in the first 3 projects. I’ve not finished yet, but I’m working on it.

in short: THANK YOU