Feedback for First-Ever Project: FCC Tribute Page

Hello everyone!

I have finally completed the first project for FCC Responsive Web Design as part of TheOdinProject. I have yet to begin the other four projects but will be beginning the next one after this post.

As this is my first project, I assume there are flaws and that it is in need of constructive criticism, so I decided to come ask my lovely, helpful peers on the FCC forums.

I ask if you extremely talented programmers (whom I truly aspire to) would be willing to give me feedback on my project. If I did something wrong, or can do something easier/differently, I would love to learn. If you feel you liked certain parts, please let me know. If you feel the need to rip it apart critically, even down to the most nit-picky thing, please do so.

I appreciate the feedback and support, and hope to make it across this foggy bridge and finally leave this entry-level tutorial hell. Cheers!

Here is the link to my project: My First Project - FCC Tribute Page

2 Likes

Hey rorocipriano. Your page looks quite nice! I did notice you use <br> in your HTML and more experience people have told me to not use them but instead use CSS for the spacing.

1 Like

@rorocipriano I see you have imported the font from Google Font. You can use it by adding CSS property font-family: "Raleway", sans-serif; . The site is really great. Wiki-like layout, really great.

1 Like

Welcome to the forums @rorocipriano. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (In addition to the other errors remember, you cannot make up your own HTML elements. p1 is not valid HTML)
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Keep all your styling external. Do not use in-line styling.
  • In addition to using them incorrectly this time, you also do not want to use the <br> element to force line breaks or spacing. That’s what CSS is for.

A couple of suggestions. You don’t have to do them if you do not want to.

  1. the dates in the tribute-info are bold and colorized. Maybe get rid of the bullet points
  2. While the tribute-link is technically accessible it’s very verbose. Something like “read more about the life of Amerigo Vespucci” would suffice. Read a little more concerning accessibility at Web Accessibility in Mind.
1 Like

This is great feedback, Roma, my sincere thanks to you. I wouldn’t have known any of the things you gave me feedback on so I appreciate your thoroughness.

I will have to do some googling to find out how to replicate the desired effects of those inline elements in CSS but I will absolutely implement all your suggestions and head over to W3C.

Thanks again! :smiley:

1 Like