Let's discuss your "Tribute Page"

I want to take this opportunity to welcome you all and ask for feedback.
https://codepen.io/LA_Gwarda/full/jYjpON

Pretty, pretty pretty good!

Project Link - https://codepen.io/drood87/pen/jYjaGq?editors=1100

Hello everyone

Could you please give me a feedback about my Tribute Page?I would really appreciate your opinion.

project link- [https://codepen.io/sarah00/pen/JMgLWy]

Project Link -https://codepen.io/PilleM/pen/jYjayb

https://s.codepen.io/PilleM/debug/jYjayb/bYMdyGQXxNJr

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/

1 Like

Hello all. Here is my (very basic) Tribute Page, I welcome feedback from all of you :smiley:
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/

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

1 Like

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

1 Like

Hi Sarah,

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

A couple of general comments:

  1. doublecheck that the capitalization is consistent
    For example, for the list items, some begin with cap and some don’t.

  2. 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

@slamoureux Very nice! :tada: 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! :100: 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>! :rocket: 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. :sunny:

2 Likes

Hi Pille.

Good tribute page. Only a few remarks:

  1. 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.
  2. 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.
  3. 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.
  4. 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!

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

  1. When I minimise my window to sizes small and extra small, the text on the picture goes beyond its borders.
  2. 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.
  3. 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.
  4. Lastly, again personal, but i would add a bit more padding at the bottom of the container.

Good job!

Thank you for good advice! :slight_smile:
I corrected these links :slight_smile:

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

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.

2 Likes

Thanks for the feedback i’m going to mess around with some new colors tonight :grin:

Thanks so much, I really appreciate all of the feedback! Those are the all great tips, exactly what I was looking for and I didn’t know about csslint :rofl:

Project link - https://codepen.io/cuckoolove/full/rJxebG

Ola campers! I’m an interior designer, and I’m new to coding.
The tribute page features a heroine from my home country.

I initially formatted the tribute with an unordered list like the example by freecodecamp, but due to the lack of dates in the timeline (because of her brief life), I decided to format it in a different style while still fulfilling the user stories and objective.

Critiques and suggestions are most welcome!

Project link - https://codepen.io/1DVS_BSTD/full/KQVEWm/

Hi campers!

Please check my tribute page, it’s nothing special (I didn’t use any bootstrap, should I?) but any feedback and critique is welcome :slight_smile:

Have a nice day!