Final project. Personal Portfolio page.Feedback

Hi , everyone! Just finished my last project in the first course and would like to get some feedback. Feels like I learned a lot from this course.

Link: https://codepen.io/deividas-enteris/pen/ExwKVNe

Happy New Year!

Hello DeiSen, you have a good portfolio, to be the first one you do seems very good, a suggestion that I can make are the images, since they do not look good, a greeting!

1 Like

Your page looks good @DeiSen. Nice job.

Have fun with JS.

1 Like

Thanks ! I will , hopefully lol

Hi and thanks for your feedback , if u mean protfolio images , there is not much I can do since its websites screenshots.

@DeiSen, Codepen creates large and small screenshots of your pens that can be used in your portfolio. Their official documentation explains how to access them.

1 Like

Overall, this is very nice. Just a few suggestions:

  • You used the :hover pseudo-class to give the “See more” links a distinct look on mouseover which is very nice. Now you need to do the same thing for keyboard users when they set focus on the links using the Tab key. You can do this with the :focus pseudo-class. I recommend you do this for all links on the page, not just the “See more” links.

  • The “Find Me” links need to come after the email/comment inputs in the HTML. As I’m Tabbing through the page the keyboard skips the inputs and goes all the way to the bottom three links and then comes back to the inputs. The keyboard focus should follow the order of the elements on the page. The way to do this is to put them in the correct order in the HTML.

  • Speaking of those inputs, they each need to have a <label>.

  • The hamburger menu icon needs to be a <button> and it should not be part of the nav list (it should come directly before the <ul>). This is known as a disclosure widget and there are a few more things that need to be done in order to make it adequately accessible. If you are interested, the following link has a good example:

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation

  • The image alt text for the project images could be better. Right now they just repeat the text in the <h3>. The alt text should describe what is in the image. So you could add a brief description for each one, but really, I think you could just leave the alt text blank (alt="") since these images are really just decoration and aren’t intended to provide actual information. Purely decorative images are one situation where it is just fine (and actually preferred) to have blank alt text.

  • I’d say the three little graphical images above could be considered decorative as well. Otherwise, you need to give them better alt text as well.

1 Like

Hi and thanks for your feedback. I tried to fix all of these issues , could u check it now?

Also im still expermenting with hamburger menu since my javascript is very limited right now

Much nicer! Just a few things:

  • The label on the textarea is not quite right. The for attribute is not pointing to the correct id (you are missing an ‘s’ at the end).

  • The focus state on the buttons is great! I would recommend you do the same thing for the links as well (such as the nav links and find me links). They don’t have to look exactly the same as the buttons, but they should have a very clear outline that stands out when focused.

  • The alt text for the three images under “Services” should probably be blank as well.

I understand about the hamburger menu. It does require JS to implement properly. But you’ve changed it to a button and moved it out of the list, so you’ve done enough for now.

Great job!

1 Like