Beta RWD Certificate - Tribute Page - Feeback Welcome

Code Feedback
1

Finished my tribute page, its fairly basic but I wanted to make sure that I got the test criteria correct before putting some CSS into it. Feedback welcome.

1 Like
2

Hi,

Tribute page itself look good for me, few things I have noticed in a code is no figure, figcaption and other semantic tags. Line 12 img tag is self closing so you doesn’t need to close it. I have heard styling by IDs are a bad practise, but I did same because FCC user stories confused me. One more thing is lines are very crowded, I would use higher line-height to make reading easier. That’s everything from me:)

2 Likes
3

Nice work! The black and white is pretty clean. I like that. I also like the links to things besides the wikipedia page.

Possible changes:

  • I see you made divs for each of his bands (and death :frowning: ). That’s a helpful start. Consider adding more spacing between the end of one div and the start of another.
  • Bonus points if you can figure out how to link the band name in the list to the band div with the description!
  • Last, maybe figure out how to get the caption of the photo closer to the photo itself (exploring the figure and figcaption tags might be a good option like @HaiCia mentions.
1 Like
4

@HaiCia @bdfoz thanks for taking a look, I have changed some things like you suggested and it does look better. Thanks for the input :smile:

5

@angelinalblyth Great work! All the tests pass successfully. :rocket: I like that you have links to content later in the page. Here are some things to consider if you want to make improvements:

  • HTML5 Semantic Elements: I see you’re using figure and figcaption elements! Are you familiar with other HTML5 semantic elements? In your code, you can replace div elements like <div id="main"> and <div id="title-header"> with main and header respectively. In the test it states:

    1. My tribute page should have an element with corresponding id="main", which contains all other elements.

    This can be accomplished like this: <main id="main">. Then, in your CSS where you select #main, you can select main instead, avoiding the need to select an id. You’ll want to make sure you fix the closing tag as well. I mentioned this, adding more details, in my comment in the HTML/CSS topic.

  • Alt Attribute: Every image in HTML needs an alt attribute!

    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.

    You can read more about this on the WebAIM site and in the Add Images to Your Website challenge in the beta curriculum.

  • Skipped Heading Levels: It looks like you go from h1 to h3 and then from h3 to h5 later on. The Mozilla Developer Network (MDN) states this about headings:

    • Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

    • Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

    • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

    • You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.

    I commented about this in more detail in the HTML/CSS topic

  • Avoid Inline Styles: I think I only see this once <p style="text-align:left">, so that’s good. It’s considered best practice to separate the content from design (i.e. separate HTML from CSS). I find this article about inline styles to be very helpful.

  • Line-Height Value: Even though line-height: 150%; works, MDN suggests that it’s better to use number values instead:

    Avoid unexpected results by using unitless line-height, length and percentage line-heights have poor inheritance behavior …

Those are pretty much the only issues I see! This is excellent work so far, I’m looking forward to seeing your future projects! :sunny: