Personal Portfolio Project - Feedback

Hey,

I just finished my Personal Portfolio.

https://codepen.io/samrosenf/full/LYWRqOM

Unlike the previous projects, I built this one thinking about mobile first, and afterwards I added media queries for larger screens.
In previous projects I sometimes used the example as a reference to learn why sometimes stuff didn’t work on my project as expected. After seeing a few feedback topics here, I realized I was doing to myself disservice by using this method.
I improved previous projects and went over the material + a lot of googles, only than I started doing the Portfolio, this time I really did it from scratch. (and finally used grid and not just flex). I learned a lot more by digging deeper instead of trying to find the quickest way to finish the projects.

Also, this may help someone else, when stuff didn’t work as expected (stuff moving to wrong side, wrong width. etc. …) I used the inspect option within the browser to find out what’s happening and fixed my CSS code. Using the inspect you could change things there and see how it changes the page before changing your code.

I would love to hear what you think about it.
Thank you, and I appreciate your comments. :slight_smile:

Hey @samrosenf, nice job on the portfolio and congrats on getting through all the responsive design projects. I’ll just point out a few suggestions to consider.

  • I don’t see your name anywhere on the page. Maybe this was intentional?
  • In your nav menu you have Contact before Work but Work comes before Contact on the page. Was this intentional? Seems like logically the nav menu should follow the order of the page.
  • For your contact links at the bottom, you should set the alt text on the images to be blank (alt=""). Since you are using plain text for the links, the images are just decorations and do not need alt text. A screen reader user would hear the text and then the alt text, so it would be unnecessary duplication.
  • Same issue with your project links. Also, there is no alt attribute for <a> elements so you can get rid of that completely.
  • I can see the keyboard focus outline for the nav links and contact links but I cannot see it for the project links. I would recommend you customize the focus outline so that it is obvious for the project links and then I would also use that customization for the other links as well.
  • I am getting a horizontal scroll bar no matter what width I have my browser. Granted, it does not scroll far, but I think it is best not to be there at all. I’m using Firefox.
  • Very picky: When I hover over the Work nav link it grows in size and pushes the Contact link so that it moves a little sideways. There are ways to have the link grow without disturbing the other link. I would look into the CSS scale function.

Welcome to the forums @samrosenf. Your portfolio looks good. In addition to what was mentioned above some other things to revisit;

  • Your page passes 11/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (you may have to run it again after correcting one issue)
    • (The one for HTML misses things which is why I recommend W3C)

Side notes;

  • there’s a stray closing div tag at the top of the HTML editor
  • imgur does not always play well with codepen and sometimes images do not display. Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
    https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
    or
    https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio

That was kind of intentional, I treated this is as a mock portfolio, so I didn’t put a name in it, but I get it looks weird without a name anywhere… so I added it as well.

Completely missed those, thank you for pointing them out.

I fixed the rest of the stuff as you suggested.
Thank you @bbsmooth for you detailed reply, it has been really helpful!

It did pass when I first posted it, than I tried to fix stuff after @bbsmooth replayed.
Originally, I used height: 100vh; for the welcome section.
Yesterday I changed it to height: 99.5vh; in order for it to pass, which worked.
But it seems odd to me that it passed first with 100, so I tried to change back to 100 and see if there is still a problem, and all the tests passed.
So I have no idea what caused the problem, nor what fixed it…

I used the one inside Codepen as I worked on the project, I probably forgot to run it before posting. Also I didn’t the W3C was better, so that’s good to know.

I looked for it inside Codepen and didn’t find it. Defiantly better to use something like this instead of pictures in imgur (not to mention that the ones in imgur are static unlike the ones in Codepen).

Fixed the rest of the stuff you mentioned.

Thanks a lot @Roma for the feedback and the warm welcome!

I don’t understand this. I gave links on how to access either a large or small screenshot.

  1. did you use the provided links?
  2. did you replace userName and slug as needed?

Yes, I used what you said, and it worked perfectly.
I was trying to say that before your replay I tried to search for something like this inside Codepen site but couldn’t find anything like that. :slight_smile:

1 Like

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