My first unperfect page - tribute page

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

Hey guys,
this is my first page and I’m very dissatisfied about it. I mean, it works exacly like I want to (until I try it on phone or in smaller window), but whole page isn’t responsive, and I know code is so messed up. Could you help me with that and suggest how it should looks like or correct it with some comments?
Thanks in advance!

https://codepen.io/Lynthius/pen/JjPXgJM

Stop using pixels to measure things. Use rem, percents, or viewport units. Then see how it looks.

Ok, thanks for advice. I’m working on totally new tribute page, and I will try do it much better.

There is nothing wrong with using px as a measurement.

At first, I had issues loading the images but once I got it to work on my browser, the site looks aesthetically pleasing. You have a great vision for what you want. Work on some of the placements of your divs and some formatting and the site will look perfect by the end.

Also, it seems you have a 6/10 score on the tribute page. Complete the project’s requirements and then mess around with it to your liking. If you want to know what you are missing to get the full score, click on the red “6/10” button and it will tell you what you are missing.

1 Like

What’s wrong is pixels lack fluidity which is the beginning of responsiveness. Which is what he wanted.

I was just generalizing based on what you said.

Not bad for a first page, (trust me, mine was worse! :smile:)

Anyways, assuming that you have completed the entire web design tutorials/lessons, I recommended trying to use grid or flex-box. It helps with responsiveness and can make styling with CSS straightforward, organized, and elegant with not much code.

Also, before starting to code, I usually like sketching out the overall layout. It doesn’t have to be perfect, but knowing what you want, can save a lot of time in the long run.

Lastly, following the FCC directions for the project can help you get an idea of what to do.

Good luck and have fun!

1 Like