Project Feedback for my Tribute Page

Hello,
Just finished the tribute page (am not entirely happy with the layout, but will keep working on it).
Can someone please provide feedback?
Here is the link: https://codepen.io/battlelemon/pen/NWbOjPB
And also, trying to center the timeline so it appears more like the sample tribute page… I know I learned this but can someone drop me a hint on where I can brush up on that?
Thanks so much :slight_smile:

HTML - doctype - this should be the first line.

CSS - you wrote text-align: center 3 times.
It can be written on one line - code looks cleaner and is easier to refactor later.
There is a saying in coding: “Do not repeat yourself”.

CSS - inconsistent code formatting in a few places (very small, I’m nitpicking).
Try to maintain one, consistent style of coding.

I would change margins. When screen width is small enough, image margins can take half of the width.

Page is looking clean and good. Is responsive, which is also nice.
Font-resizing working well.

Have you tried playing with <li> elements in css (for centering)?

Hi @battlelemon !

Welcome to the forum!

If you google how to center a block level element then you will get the answer you are looking for. You are interested in centering the ul. If you want it to look exactly like the sample then they set a max-width for the ul. Maybe like 600px for the max-width(you can experiment with that)

Speaking of the sample, the goal is not to recreate the samples.
For future projects, create your own designs and subject matters.

Is this harder to do?
Yes.
Will you learn more doing this?
Yes. :grinning:

In codepen, there is an option to format your code.
I would use that for the html section.

You have a few errors in your html
Run your code through the html validator to find and fix those errors.
https://validator.w3.org/

Hope that helps!

Thank you so much for the constructive criticism and help. Will work on it.

Thank you for your time and advice. Will keep working!

@battlelemon it is very nice just increase your font size.

1 Like

Your page looks okay @battlelemon. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
  • 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.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address. Many of them are because of the previous bullet point.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • wikipedia entry” is not accessible
  • As you learn semantics you’ll learn that the footer, a semantic element itself, would not be in the main element.

And as mentioned, don’t try and replicate the sample projects. They are just that, samples. An example of one way to do the project.

Thank you. I will scrap this and start from scratch with all the advice I’ve learned. Also, I will come up with my own tribute.
Thank you all :slight_smile:

You don’t have to scrap this one. Go ahead and clean it up.
Just for future projects don’t try and replicate the examples.

1 Like