Tribute Page Project - Feedback Appreciated!

Code Feedback
1

Hey guys so I just finished the Tribute Page Project.

I tried to keep things fairly simple but I also wanted to test out some jQuery & Animate.css stuff as well.
Please feel free to comment and let me know what you think.

Nothing fancy.

Here is the link!

Cheers!

3 Likes
2

Great effort and well done!

3

Thank you!
I appreciate it.

4

@dayashton I just saw this! I added it here and I’ll review it as soon as I get a chance, hopefully sometime later today. :sunny:

I noticed you posted your portfolio project as well, so I already added it to the Portfolio Project discussion topic.

5

@dayashton This is very nice! :tada: I like the fade animations. Your code is well-structured, concise, and easy to read. It’s clear that you have a strong understanding of HTML, CSS, bootstrap, and jQuery. Here are a few ways I think this can be improved:

  • Your image has an alt attribute, but it’s redundant. It’s ok to drop the Picture of part because the img tag tells screen readers that it’s a picture. It may even be possible for you to leave it empty alt="", although I’m not totally sure about that. You’ll want to read WebAIM’s guidance on this to be sure.

    The alt attribute should typically:

    • Be accurate and equivalent in presenting the same content and function of the image.

    • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

    • NOT be redundant or provide the same information as text within the context of the image.

    • NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

  • Instead of <p class="text-center text-muted lead">, you can use the blockquote element. I think that’s more descriptive: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

  • The only other thing I notice is that you may be able to use some of the HTML5 semantic elements like <header> and <section>.

That’s all I see. The rest looks perfect to me. :sunny: