Tribute page for Protest the Hero

Code Feedback
1

Here’s a link to my Tribute page on Codepen. I would love some feedback.
Thank you.
Link: Protest the Hero Tribute Page

1 Like
2

This looks great. Awesome

3

Very nice! Nice use of the @media rule to make the columns more responsive.

Only thing I can think of is the use of the <br> elements. Personally I always try to avoid this and see if I can use margin or padding instead.

1 Like
4

Thanks for the feedback :slight_smile: Can you perhaps link me to a video or article that explains how to do that and why it’s better practice?

5

I don’t have an article or video about this. I’m also still learning, so maybe it’s only a matter of preference or style. In the online courses I did the br element was only used within paragraphs for example te seperate alinea’s. The space on the top, side and bottom is arranged with margin and/or padding.

On your page I can see you have headings that are styled as paragraph and then make them strong. The way I would do this is make them headings with an h# element. Then give the heading some margin, so there is always enough space between the heading and paragraph. But your way of using br elements gives the same result.

If there is a video or article what is best practice then I would also like to know :slight_smile:

6

Ah, okay. That makes sense. I suppose it also just gives more meaning to an element using the correct tags. Like the h# in this case might also help people using screen readers.

Thanks for the help, surely made some good points :slight_smile:

1 Like
7

you’re welcome :slight_smile: