Would like to get feedback on tribute page project!

Hey, I just finished my first web project which is the tribute page.
Instead of completing it on codepen I did it on visual studio text editor
and published it on git.
here’s a link to the actual web page:
https://razzhimself.github.io/tribute-page/
and here’s a link to the git-hub repo , where you can see the actual code:

Thanks!

Welcome to the forums @razzhimself. Your page looks good. 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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • You have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • 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

Hey Roma!
so glad you gave me this crucial feedback.
I fixed all coding erros thanks to W3C , but also have read why I got such errors and understand that I won’t repeat them in the future.

I have deleted all br elements and honestly it just looks better now.

and finally made the wikipedia link text accessible.

besides that I’ve changes the Image, background and text colors and it looks so much better in my opinion , would like to hear your toughts too :slight_smile:

I have already started working on my 2nd project which is the survey-form and I’m very exhilirated using the tools you provided like the W3C validator to understand errors if there’s any . Thank you very much!

Glad to be of help @razzhimself. Your page does look better. I like the new image.

Something to look into for yourself. There’s a prettier plug-in for VSC that you should look into. It will format your code for you. Makes it easier to read.

Look forward to seeing your next project.
Have fun. Happy coding!

Good job on this @razzhimself. I just have a few minor suggestions:

  • Put a max-width on the #tribute-info div to keep it from getting too wide. Some people have trouble reading content when the line length is too long. I would recommend you use em (or rem) units for this.
  • I would soften the yellow text just a little. While the bright yellow on black definitely has enough contrast, it may be too much of a contrast for some people (I’ll raise my hand here). It doesn’t have to be much, just enough to take the shine off of it. If you do change it, but sure to double check that it has enough color contrast to be accessible.
  • You might consider using a <figure> with <figcaption> for the image.
  • If you want to get real picky, you could use the <time> element on his birth and death dates, as well as anywhere else time is referenced (e.g. dates of albums). MDN docs for time.
1 Like

Haha, it does make the code prettier.
just finished the 2nd project, check it out :smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.