Tribute page for review

@bdfoz Looking great! All tests pass. :clipboard: Here are some suggestions you can consider for improvement:

  • Bootstrap: It’s ok to use bootstrap for this project. It seems like your use of bootstrap is correct as well. Nice work! Since you finished this early and there’s plenty of time until the deadline, you may want to challenge yourself further by re-creating the site without bootstrap. Here’s the text in the test suite regarding the tech stack one is expected to use for this project:

    You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! [Emphasis Mine]

  • Heading Levels: You mostly keep the heading elements in order except for the last h4 and h6. If you’re wanting to make the font size smaller for the byline text, like the default styling for h6, I think it’s better to keep the correct order of the heading levels by changing the h6 to h5 and then changing the font size via CSS. You may also want to re-visit your h4 element that’s within the blockquote element in case you’re using that h4 for styling instead of heading hierarchy. I wrote about this in more detail in this cohort comment about headings.

  • Main Element: If you use the main element instead of <div id="main">, you can gain an interesting accessibility benefit, as mentioned in the Jump Straight to the Content Using the main Element challenge:

    The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you’ve ever seen a “Jump to Main Content” link at the top of a page, using a main tag automatically gives assistive devices that functionality.

  • Use of em: I think you may be using the em element incorrectly (<em>A Theologian Hero</em>). Your usage seems to be solely for styling and not emphasis. You can read more about the em element in the Mozilla Developer Network documentation:

    Typically this element is displayed in italic type. However, it should not be used simply to apply italic styling; use the CSS styling for that purpose.

Overall, you’ve done a really great job here :sunny: and I look forward to seeing this project with pure CSS if you choose to accept that challenge. :rocket:

2 Likes