Let's discuss your "Tribute Page"

I finished my tribute page using the new testing system, the only problem I have with it right now is getting the wallpaper to display on mobile correctly. Please leave any feedback!

https://slamoureux.github.io/tribute-page/

swedinay · January 31, 2018, 11:52am

Hello all. Here is my (very basic) Tribute Page, I welcome feedback from all of you
I also hope for input regarding the text inside the image, how to make it consistent even when I resize the window. I hope to improve when I learn more.

Thank you ~

Project Link - https://codepen.io/SYolanda/full/pavaJe/

Hlupi · January 31, 2018, 4:25pm

Project Link - https://codepen.io/Hlupi/full/OQPpaK/

ConnectExtend · February 1, 2018, 1:46am

Hi Stephan,

I like the icons used to indicate a new section. And the nav bar with links that jump user to the specific section!

An idea for the left border on the blockquote –
Instead of purple, how about grabbing one of the colors in the portrait (greens, blues or solar yellow)?

And maybe use that same color for the section icons and header??

Good luck with the mobile/wallpaper issue. Maybe put it out on Twitter to see if someone can help?

– Janice

ConnectExtend · February 1, 2018, 1:57am

Hi Sarah,

Thanks to your tribute page, I learned about a new person in math history!

A couple of general comments:

doublecheck that the capitalization is consistent
For example, for the list items, some begin with cap and some don’t.
doublecheck the spacing (space bar) before and after punctuation marks.

Big question –
Did you already run the FCC tests for this project?

Keep at it!
– Janice

camper · February 1, 2018, 5:28am

@slamoureux Very nice! I like that you are using internal links and your site seems to be fully responsive (other than your background issue). I also like that you’re using GitHub Pages! Here are some thoughts to consider for improvement:

Units for Zero Values: When I run your CSS through csslint.net, I see a lot of warnings related to your zero px values. I think it’s safe to use 0 instead of 0px. In my reading on this, it seems there may be a difference in certain cases between 0 and 0%, but I don’t see 0% in your code so you should be fine. I’ve never written 0% in code myself, but this CodePen shows an example of why it might be used. I think there are other ways in CSS to deal with absolute and relative positioning instead of using 0%, but maybe (likely) there are use cases that I’m not aware of where this is helpful. I found the CodePen from this GitHub issue discussion, in case you’re curious.
Overqualified CSS Selectors: I see you have a couple of selectors that are more specific than they need to be: h3.honors and h3.famous-quotes. This is another warning that I saw on csslint.net. I think the CSSGuidelin.es section on Portability explains why it’s better to avoid qualified selectors whenever possible.
HTML5 Semantic Elements: There tend to be some readability and accessibility benefits to using HTML5 semantic elements like <main> and <header>. I see you are already using <nav> and <footer>! We learned about some of these benefits in the Jump Straight to the Content Using the main Element and Make Screen Reader Navigation Easier with the header Landmark challenges.
Footer in Blockquote: I wasn’t aware of the practice of using the <footer> element within a <blockquote> element, as seen in your code and described in the W3C Blockquote Specification. Thanks for including this so I can learn more about it!

This project is really well done! I’m looking forward to seeing your future projects.

Hlupi · February 1, 2018, 10:09am

Hi Pille.

Good tribute page. Only a few remarks:

When I click information link, it doesn’t open in a new window. In a video for the project they say you can add target="_blank" to your anchor tag to tackle that problem.
The facebook page doesn’t open at all. Perhaps it has to do with Codepen’s security concerns. Maybe if you add “target” it will be solved.
Totally personal preference, but inside the anchor tag for facebook page you put the link itself. I would change that to “Elize’s facebook fanpage”, but to each their own.
Finally, if I were you I would include a link to one of my social media or camp profile pages at the bottom of the page (Written and coded by P.) so people can reach me, may they want to.

Congrats on finishing your project!

Hlupi · February 1, 2018, 10:52am

Simple, but beautiful. I like that it’s clean and not cluttered.
Few comments:

When I minimise my window to sizes small and extra small, the text on the picture goes beyond its borders.
I would put caption under the picture in the centre. You can just add class “text-center” to the “p” element. Don’t know if you like it on the left more.
While the shadow effect you added to the last quote is beautiful, makes it a little hard ti read. But that may just be me.
Lastly, again personal, but i would add a bit more padding at the bottom of the container.

Good job!

PilleM · February 1, 2018, 12:29pm

Thank you for good advice!
I corrected these links

sarah00 · February 1, 2018, 6:49pm

Thanks for your feedback .
No I didn’t. if you have some useful link talk about it i would be grateful

ConnectExtend · February 1, 2018, 7:02pm

Sarah,
Here’s the general info page on FCC for Tribute Page project requirements:
General info
And here’s a link to the specific items being “tested” by FCC:
Google Doc with Tests checklist for each Project

HTH.