Tribute page. Please give me feedback

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Hi everyone. I finished my tribute page a few weeks ago, but totally neglected to ask for feedback. I would appreciate any feedback you have. :slightly_smiling_face:

https://codepen.io/michelz/full/VoPqGo

Hi @michel-z
Your page looks good. Some things to revisit;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • In CSS you have duplicates that could affect how you wanted your page to display.
  • Try not to use the <br> tag. In your section you have one big paragraph and break it up with <br>. Make multiple paragraphs instead.
    You can also use margin and/or padding in CSS.

Thanks for the feedback :slight_smile: I’ve made the chances you suggested.
I got sloppy with the CSS and forgot to do a final check.

Could you explain why I should avoid using <br/> ?

Here’s a quick read @michel-z;
https://www.w3schools.com/tags/tag_br.asp

Take away from this the following points;

Tips and Notes

Tip: The <br> tag is useful for writing addresses or poems.

Note: Use the <br> tag to enter line breaks, not to separate paragraphs.

1 Like

Hey there. Minimalist, but polished (nice work with the small icons).

Just an observation: I felt that the Image got too small at small devices. Try maybe a @media that sets the width of #image to 80% when the screen is 400px or smaller?

1 Like

Thanks!

Good suggestion on the #image. I also went with justify-content: center; on the icons. Thinks that looks better on that size.