Tribute Page Feedback - Andy Frisella

Diving straight into making a tribute page was a bit difficult. I did some googling and referring back to the lessons. Can someone take a look at my code and give me feedback or look at my page and see what I can improve. I don’t think I used jquery because it’s a bit confusing to me. I played around with what works so it is probably really basic.
Here is a link to my codepen:

This looks great, @codingwithian! You’ve met the user stories for the project well.

One thing I notice in your code that is considered poor practice is the use of h tags for purely stylistic purposes.

<h1>, <h2><h6> tags are used to denote a hierarchy of headings on your page. They tell the browser that they are related to each other in a tree structure. For example, a standard page might have this structure:

Heading <h1>
----Sub-heading <h2>
----Sub-heading <h2>
--------Deeper sub-heading <h3>

You go from <h1> to <h3> to <h5>, which suggests that you are using them just because you like how bold they look.

The general rule is that HTML defines structure and content, whereas CSS defines style. Similarly, JavaScript defines behaviour. (There are examples of ways these lines get blurred, but the basic idea is helpful to keep in mind).

So if you need a <h2> level heading, but <h2> is too big, you can style it by writing a CSS rule for your h2 elements, or by giving the header a class or ID, and styling that in your CSS instead.

Similarly, you use <h5> to provide a nice caption to the image, but headers are not appropriate for captions. Use <figure> and <figcaption> instead.

This matters because of accessibility. Many users rely on screen readers to navigate the web and a heading is treated very differently to a caption in the way it is read. Your page looks great, but not every internet user is using their eyes :slight_smile:

Thanks for the feeback. I will make the adjustments