Jan's Tribute Page

Code Feedback
1

This is my Tribute Page, and I’m looking for feedback.


Thank You
Jan :wink:

2

That’s actually really good. I’m very impressed you handled grid so well as a total beginner. I’m just nitpicking very minor details here to give you something to work with, four of these five aren’t even technical details but design things (in other words, totally subjective).

  • In the Early Years section, the first line is indented, but it’s not really a “paragraph” in the sense that it should be indented in that way. The way the data is presented, a list may be more suitable (or you could change how the data is presented)
  • The citations at the bottom are very small font. I have a giant monitor but it’s still so small not all letters display properly (eg. “a”). You might want the font a little bigger so we don’t need to squint, or at least change the font to one that has less detail.
  • The citations could be centered. As a hint, 3 lines of flexbox in .grid-item5 will do it
  • Your media query doesn’t kick in until it’s really small, using pixels (see next note) I would probably have it kick in around 700px or so. 250px columns are no fun to read.
  • From a technical perspective, consider changing your media query to be based on ems. At a default text size, 640px for example is the same as 40ems, and will resize at the same time. However, if the user uses their browser to increase (or decrease) the text size, then that will increase the default font size, and therefore trigger the media query at a larger screen width (measured in pixels). Is this a good thing? Depends, but at some point if the text is big enough, the layout isn’t going to look good anymore, even if it does when the text is the default 16px. The way I see it, if someone is close to the threshold of your media query and also zooms in their browser text, they probably would appreciate the smaller media layout.
    Please not: I played around with your pen a bit testing the em-based media query out, and noticed that CodePen doesn’t reflect this accurately: it seems that on CodePen, if you increase your browser zoom, it actually scales your output by the same ratio (for example, once I zoomed to 170%, if I tried to resize to 501px it actually took up about 45% of my monitor despite the fact that my monitor is 1920px wide (effectively making px behave exactly like the equivalent amount of ems). I’m not sure if presentation mode (for PRO users like yourself) represents this scenario accurately or not, but you can try. If not, to demonstrate this effect on an actual deployed site, check out my google result clone, which uses an em media query. First, resize your browser until the media query kicks in (probably about 500px). Then go a little bigger, so the media query isn’t in effect, and try increasing the font size on your browser. You will see that the media query kicks in when the screen looks roughly the same as it does when the browser is at default zoom.
2 Likes
3

Thank You! I can work on that after this week-end.
I learned alot from your reply.
:smiley: Jan

4

Not sure if you where going for it, but that is a very retro look.

You can’t use the button element as a parent for anchor elements, which is why your two “Back to Top” links are not working.

Permitted content: Phrasing content but there must be no Interactive content

Change the buttons to something else like a div, or just use the <a> tag on it’s own with no parent container. Use the class you already have (.btn-top class). You will likely have to readjust the style a bit.