Tribute-Page--Completed

Code Feedback
1

I just finished my Tribute Page! I wanted to share and get some feedback.

Thanks all!

2

OK, since you’re a CS grad I’m not going to go easy on you :slight_smile: Where did you get your degree from? I got mine from the University of Oregon way back in the early 90s (we barely even had the world wide web back then).

Just a few issues to address:

  • The color contrast between the nav links at the top and the background is not enough to be accessible. There are a ton of color contrast checkers out there. Most dev tools even have them built in. For this size of text the contrast needs to be at least 4.5:1.

  • While having multiple <h1>s on the page is not technically a WCAG failure, best practices suggest that you only have one on your page (and it should be near the top of the page and be the primary heading on the page). So leave the first one and convert the others to <h2>s (and then the headings under “About Katherine Johnson” would convert to <h3>s).

  • There is a persistent horizontal scroll bar at all widths. Granted, it doesn’t scroll much, but I would get rid of it.

  • You are removing the images for narrow widths. I think you probably want people on phones to see these images as well :slight_smile: For narrow widths, try moving to a single column layout and then there will be enough room for the images and their respective content.

  • At narrow widths you’ve got an issue with the timeline overlapping the list of links at the bottom.

  • To solve all of the narrow width issues I would recommend you use a narrow-first approach to styling your page. Narrow your browser in as far as it will go and style the page so it looks good at that width. Don’t use any CSS media query break points. There should be no horizontal scroll bar. This will be your default CSS. Then, after everything looks good you can widen your browser until you feel you have enough room to rearrange for a two column layout and add the break point there. You will use min-width for the break point (and I would recommend using rem instead of px for the units).

  • I highly recommend you install at least one accessibility checker browser extension and run it on your page. While it won’t find all accessibility issues, it will find most of the obvious ones.

1 Like
3

I went to Mizzou :slightly_smiling_face: Thanks so much for you feedback and insights.! I’ll revise with these in mind.

4

I don’t have time to duplicate the code and find solutions to some of the issues right now, which is what I prefer to do before I give advice, But I will later today.

I would echo many of @bbsmooth’s thoughts, and I am particularly concerned about the Hero Image disappearing, at smaller widths, because it is the Set piece of the whole website.

I think the design is lovely. It’s nice to see One of the Women From Hidden figures Represented here. The site just needs a series of small Adjustments, to strengthen an already good Website…

5

Thank you Alless for your feedback.

I took both of your advice and updated the page. The narrow-first approach was especially helpful, and much easier than the approach I was taking at first.

1 Like
6

Hahaha… You Changed the whole layout… It wasn’t necessary…The orange site had A beautiful design… But, I am a fan of consistently overhauling the design process for Practice.

7

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