Feedback on Tribute Page (and responsiveness help)

EDIT: I’ve made all the changes I felt necessary and I’m going to submit it as I’m ready to move on to the next project. Any feedback is still appreciated though as I’m sure I’ll come back and make changes once I gain more knowledge!

Thank you!

Hey, so here’s my tribute page: https://codepen.io/homtanks/full/agJzMw

A few things to note:

  • The page isn't really big enough to need navigation, but I wanted to practice it anyway, so it's there.
  • I wanted to try and make it as accessible as I could using accesskey and proper tags, so feedback on that is appreciated.
  • I need help with the responsiveness of the text. Specifically the #home id, and the .navbox, and .navitem classes. So far I've just kind of screwed around with different heights, widths, and font sizes but I can't really figure it out. I've been trying to mess with viewport dimensions and getting closer I think, but still not there.

    They have the borders around them right now to help with my visualisation, but those will go away once I finish.

  • Any other feedback is appreciated!
  • Thanks

@fram Nice page!

Here is my feedback:

  1. I like the navigation. Now, add scroll-behaviour: smooth to the body.
  2. To add responsiveness you need to add media queries. Right now, you do not have any.
  3. The list item text blends with the background too much and is hard to read. I suggest adding more contrast.
  4. Those borders look cool. I say keep them.

Good job on creating this page.
Here are few remarks just to help you improve your design skills:

the box around the page title and the navigation don’t fit right, it looks awkward to the eye.
the short separation line does not offer anything to the flow of the page
the list bullet next to the question is cool, however the empty bullets before the answers is not needed

Good work!

Thanks @brandon_wallace, I appreciate the feedback!

  1. Great idea! Done.

  2. Media Query…of course! You know sometimes you learn something in the curriculum and it’s done so fast and you move on that you completely forget about it…this is something I forgot about. I don’t have the time right now to mess with it, but I will later in the day.

  3. Yeah, I can see that. I changed it a little darker and I think it’s better.

  4. This…I’m not so sure about. Your other ideas were great and I’ll implement them, but I can’t get behind this one, haha.

Thank you for your suggestions!

Hey @jsnmgroup, thanks for the feedback!

Yeah I agree with the boxes, as I said they were only there for positioning purposes, but I’ve removed them now!

I think the line helps to separate the title/tagline from the information part of the page. To be honest I’m not so sure how much the title/tagline is actually offering to the page, but I want to keep it for now.

I’ve gone back and forth on the bullets. I have them now, but I didn’t have them earlier. I’ll mess with them to see which I think looks better to me.

Thank you!

I’ve made all adjustments I felt were necessary and will be submitting my page, thanks for the input! Check out the updated link in the original post.

@fram :sob: I miss the boxes. Lol.
Nice page fram.
How about vertical centering the menu links?