A portfolio I'm proud to share

Code Feedback
1

Hey guys!

Just finished my portfolio page and I’d love to have your feedback on it as this is the first bigger project that I did: https://codepen.io/Ivy_12/full/RwKKwqm

I know what I could have done better (I’m not super happy with the projects section) but all in all I’m happy with the final product.

Any advice for me?
Thank you all!

1 Like
2

Welcome to the forums @Ivy_Yord. Your portfolio looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • It would be better to have your project open in a new tab rather than the same one.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
    • Actually noticed that three out of four of the projects in your portfolio have a responsiveness issue. That is, they have a horizontal scrollbar.

Also a quick look at your survey form;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

I didn’t do any other looking at your other projects.

1 Like
3

Hi @Ivy_Yord, congrats on finishing all of the projects! I’ve got a few suggestions for your portfolio page.

  • When it first loaded I could not read a lot of the content on the page. The font size on the menu items, the tag line underneath your name, and the About me content were all way too small to read. Then I noticed that if I made my browser wider the font size on those increased enough to be readable. I see that you are making the font-size 58% when the view port width is narrower than 61.25em. I applaud you for using em units for your break points but making the font size 58% is way too small. Most people have their default font size set to 16 or 18px. Making them read text at almost half that size is too small. If you want to decrease the font size on narrower view ports then I would only decrease it a little (maybe 75% at the most ). Personally, I would not reduce the text size at all for narrower view ports. I feel it is best to respect the user’s default font size no matter what the view port width. But I understand that it is the trend to decrease the font size on narrower view ports, so just make sure you don’t decrease it too much :slight_smile:

  • The light brown text on white background does not have enough contrast to be accessible. You can use something like the WebAIM Contrast Checker to ensure that your color combinations are accessible.

  • I would suggest you wrap all of your <section>s in a <main>. Also, best practices would say that you should have just one <h1> on the page and then the other section headings would be <h2>s.

  • I think the keyboard focus indicator needs to be customized so it stands out more. I can barely see it around most of the links and I can not see it at all around the project image links (because it basically matches the color of the border). You can use the :focus selector to customize the style of the outline property.

  • @Roma already mentioned the responsiveness issue. Aside from the horizontal scroll bar, the project images also decrease at different sizes as you narrow the view port. Also, at some point I would convert them to a single column.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.