Personal portfolio web page feedback

Code Feedback
1

The code is spaghetti like and the imgs load so slow because i hosted them on a trashy free host also i put the svg img directly into the html which made it longer than it needs to be
but i am done with it i wanna move to the javascript section anyhow
Do you like the design? i did it on figma, i think it looks good.

https://codepen.io/code2022/full/vYgwKVr

1 Like
2

Hey @hana1, I won’t comment too much on the design because I’m not a designer and don’t have a good eye for style (just ask my wife), but I do have a few suggestions about the coding.

  • You’ve got some HTML issues. For example, in your <nav>, you have an <li> that isn’t inside a list. The <nav> itself probably shouldn’t be in a <section>, it can stand alone on it’s own. You’ll want to wrap the <section>s in a <main>. The <header> tags in projects/contact sections should probably be <h2>s. Each of the project names under the image links should probably be <h3>s.

  • Speaking of the nav menu, when I Tab through the links with my keyboard, the keyboard focus goes from right to left instead of left to right. You should put the links in the proper order in the HTML (“About”, “Work”, “Contact”) so that the Tab order is correct and then use CSS to make make them vertical. I’ll give you a hint, you can use display: flex to do this.

  • Similar ordering issue for the projects. Assuming you changed the <p>s to <h3>s, the <h3>s should probably come before the links in the HTML. People using a screen reader would expect this as they are most likely navigating your page by headings and they would expect all of the information for each project to come after the heading. Even though the heading is before the link in the HTML you can still use CSS to put it after/below the link visually on the page.

  • You’ve added alt text to the images in your social media links, which is great, but you shouldn’t include the word “link” in the alt text itself. When screen readers read announce those links they will say “lint to my github link”, saying the work “link” twice, because they automatically add the word “link” since the image is inside an <a> tag. I think you could get away with having just “github” and “skype” for the alt text, but if you wanted you could be a little more verbose, perhaps “explore my github repos” and “contact me on skype”.

  • Similar alt text issue with the logos under your name, it is awesome that you included alt text, you just don’t want to have “logo” in the alt text, you can just have the name of logo (“html”, “css”, “javascript”, “react”). A screen reader will announce that it is an image so you don’t have to add the fact that it is an image/logo in the alt text.

  • You might also want to add a lead in for those skills icons, something like “I have experience using the following” or “My skills include:”, just to make it clearer what the logos represent for people who use screen readers. And then perhaps put those images in a list, since they are a list of your skills.

2 Likes
3

Your personal Portfolio looks pretty good…Nice Work!:+1:

1 Like
4

Thank you for explaining in detail :upside_down_face:

5

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