My tribute page - Tribute Page Challenge Complete

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

Hi all, my very first experience of coding and this is what I have produced as a tribute page (subject selected by my two sons!)… Would love any suggestions for how I could have made the code cleaner, better, more functional etc.!

Green Day tribute page

hey there good job on the tribute page! Here are a few ideas that might make the page more aesthetically appealing. The header text could be centered and could be followed with a sentence long phrase/sub-title right below the header [ex:

Donald Trump:

Great businessman and
the least loved leader
of the lost land

The pics on my comp are so large that i can’t see the whole image easily, try to make the images smaller or have a ‘responsive web design.’ It would be cool to be able to see the whole image and also the start of the lower text as well. Maybe the font could be a bit brighter too, it is kind of hard to read the text because it is a darker yellow and kind of blends right in with background. I like the bottom where is shows his stats. Looks good bro, these are just some ideas for the future. keep coding!

Hi there,
I would like to have some feedback on my tribute page, any constructive, ideas or improvement is always welcome!
Tribute Page - Steve Jobs
Thank You

Hi guys! It’s haven’t logged in for a while.
They all look really nice. Just maybe a few changes

@toles04 Maybe center the picture and reduce the indentation when the screen gets smaller. You can use that bootstrap class to center or that css width + margin auto combo for the image, and there is a property for that list indentation that you can use with a media query.

@PaulNewman-M add that img-responsive class so the image shrinks with the screen and maybe use another font for the large block of text so it’s easier to read.

@aaminu same as @toles04 with the indentation on smaller screens.

@maxbevans try using percentages for the margins so it adapts when you change screen sizes and it doesn’t take up so much space. You can use it on the height and widths of the divs too so text doesn’t overflow. Later you can check the twitter bootstrap classes that kinda does the same thing by just adding one extra word. There are more options but these usually solve most of the cases. Also, the title is very small and its almost the same color as the background.

@JorneM same as @toles04 with the indentation and maybe set a minimum width because the title font is too large for small screens. You could also set the font size to something other than pixels so the font scales depending on the screen size. Usually using a fixed percentage (or other relative units) will give you some problems because then the object, in this case the font, ends up either too big or too small when resizing. Because of this you can use a function called calc. There you can set some upper/lower limits to this size. Google it, it has a formula. It is a bit confusing at the beginning because you know… math is like that.

1 Like

Thanks for the comment, but i didn’t quite get the message. can you rephrase please.

Thanks

Thank you for the valuable feedback on my tribute page!

@JorneM np :slight_smile:

@aaminu Oops, I shrunk the screen and assumed those paragraphs where <li> items. Those margins made them look like unordered lists xD
Try making the window smaller. After you do that you will see that the text has a lot of margin on the left side and it’s a bit hard to read. You can change the margin units from pixels to percentages and it will scale with the window. You can also see that the text will overflow. For that you can either make the font size scale too (with % or other relative units) and/or set the container’s overflow property to hidden.

Not bad. I would suggest a couple things.
1- Add some pictures to the page.
2- Add more links, such as a page where you got some info on Harambe. You could also add these as footnotes.
If you need a site to store your pictures so you can display them on your page, try http://cloudinary.com/.

Bill Q

check out mine here.
I need your feedback…thanks in advance :slight_smile:

Hi,
Ayrton Senna tribute page

Here is my tribute page! Any feedback would be great!!!:grin:

Here is my take on the Tribute Page challenge.

This was an awesome page. I really enjoyed reading about Harambe after all these years. I liked the photo but on full-screen could argue that the circular photo should be bigger. I like the image but compared to the white boxes it’s small. Also I believe aggressor is is spelled with two g’s not g, so when you’re viewing your page just hit ctr + f to quick find where the typo is and other than that I really liked this.

I want to know , should i be exact same as the codecamp sample page or we can do modifications.
Also do tell , in order to complete the project . Will i have to use same ID names given in the instructions or i can use my own.

Hi everyone, This is my first tribute page https://codepen.io/Dzordz_92/pen/ZqQNeK . Send me yours feedback! Thanks :smiley:

Hey, nice page my friend, I am a beginner in this journey and it is good to see other people passing through the same challenges as I. The only thing that me as an user would advise you was to choose better the page’s colorization.

Hello everyone! https://codepen.io/mateussimashadlich/pen/GzgRQe I just made my first tribute page, I am on my first steps into pages development and your feedback is precious for me, feel free to criticize! Thank you.

Good job man and nice design.

Wow… your page is amazing.
very good job

Hello everyone, This is my first tribute page https://s.codepen.io/Babbz/fullpage/ydQmxz?editors=1100#. Send me your feedback! Your feedback is very important to me. Thanks in advance:grinning: