Hello! Very pleased to complete my first FCC project! Feel free to add any suggestions!
See the Pen FCC Project -- Tribute Page by Morgan Marshall on CodePen.
Looks so cool, I like the colour scheme, but I think more contrast between foreground and background colour could be better. (e.g. lighter text colour)
Using caption for image, very good, and pro. Since this is only one image, it might not be necessary, but some pages number captions, and objects as “figure 1: Octavia E. Butler sitting in her library.”
I see in some sections, you specified font-size using absolute pixel unit, please don’t (e.g. font-size: 25px; for #tribute-info h3 ).
This is becasue for user(assume me) that 25px is normal text size, and when you supposed to enlarge it by 25px(which is larger for you, but mine), I see no difference!
So the fix is simple, instead of pixel, try using em. simply when you set 1.2em, it means 20% larger than parent font-size, whatever it is. Now that 1.2 make you sure this text will be always larger at any setup.
Another thing is about Baskerville font, not everyone come with that font installed. If it has a web ready version, import it then.
I also suggest you use alias/generic serif and sans-serif font alias names. Anyone would select one font she/he likes as sans, and sans-serif(also same about monospace). For me I use georgia for serif. You could be something else.
Not telling you to not use custom fonts, but if you do, make sure you import it. Using the alias fonts is kind of suggestion.
For mobile view, I suggest you add a little more line-height spacing, plus a little more space after each list element.
Same for both header and footer, since they come with background colour not same as body bg, I suggest you add a little padding to not let text start from header/footer border.
The image you sued, also has same-origin policy. In development, when you are looking for an image, you are probably searching with same-origin. and once you view the image, it’s cached, and it’s visible for your code(not-same origin).
But for everyone has no this image cached(probably everyone), this image is not visible becasue of policy stated.
So how to find out?! easy, after you finished work, check the page(your work) with another browser(you sure image is not cached) and validate if image could be loaded.
I also see you set max-width:6000px for image. 6000? pixel? Let me tell you, this is true 6000px is kind of too much for now. but that 6000px is around 3 feet for a 1080p 23" screen, and 2 feet for a 4k 23" screen. so it’s vary. and soon it could be even 10in.
but max-width:15in is always 15in, no matter it’s VGA, or a 8k screen. So please use relative units when possible, here inch makes you sure what real size you see in your screen, is the same as I see in mine, no matter the config.
Overall looks very good. Well done.
Keep goin on great work, happy programming.
1 Like
Thank you for this! I will be sure to make changes tomorrow morning. As always, it’s great to get a fresh look at projects!