My tribute page - Tribute Page Challenge Complete

Here it is

Typing all that info took me a while but I finally finished it (or at least it has enough info to keep viewers interested… I hope :sweat_smile:)

Some feedback would be nice. Thanks in advance :wave:

18 Likes

Cool design !!

Although you can reduce the intensity of white color for the headings as it really sticks into the eye due to the color contrast with the background. Atleast i felt it or there might be something wrong with my eye :slight_smile:

Keep moving forward!!

Regards,
Kush

Really nice design, though unfortunately it does not seem to play nice on smaller screens. I would look at trying to make it more responsive

Thanks for the feedback guys! I made the changes :smiley_cat:

can you share a little bit about how you got started with this. I saw many syntaxes in your code that is not in any of the previous challenges. How did you learn them? By looking at other people’s finished projects?

1 Like

I remember just building everything from scratch, not looking at any projects. I started by building the html and then the css with the things the freecodecamp challenges teached. Then I remembered bootstrap and how it has classes to style stuff so I incorporated those and replaced some css properties. Then someone told me that it looked bad in small screens. Using the col-something classes didn’t adjust my page precisely so I found that @media thing in css.

Summary: I built the page with what I knew at the time and looked for more info as I needed it.

3 Likes

Thanks Shin8. Just got my Tribute Page done. Give any suggestion you have as to how I can improve it, if convenient.

2 Likes

It looks nice. The advice most people give me when I make a feedback thread is to make the page more responsive. Adding more css properties, animations, etc can improve the page but I think it’s better if you continue with the other challenges. Later on you can go back to the tribute page and improve it with what you learned from those challenges.

Thank you for the feedback.

check out mine here. Your comments are welcome.

1 Like

Looks good to me. Maybe check the @media css property to customize a little bit more the page when the screen is smaller. That’s what I did with mine after somebody told me that the page looked a bit messy on smaller screens. I removed the margins on the main section and put a little padding.

This is awesome #ripharambe

I really loved the design and the colors.

Nice work!

My only suggestions are:

  • Don’t justify the text for small screens (phone). Large gaps are forming in the text using justify on a small screen.
  • The font size is a bit small for large screens.

I really loved your work!

Hi Shin8!
So, you had some problems on boolstrap too with the tribute page? I see your page and noticed that you used bootstrap col-classes AND @media because the first ones didn’t work… Actually, these methods are equivalent, so in real project you will use (or not, at your choice) Bootstrap to avoid using media queries and do things faster. It’s really strange that they don’t work on that platform… if you have solved in the while, please let me know!
Thanks! And your’s really a good work :slight_smile:

Hi guys!

@SoSoDeft
Thanks #ripharambe

@cecilebertin
If I remember well, I put that text justified exactly for that because the normal alignment makes the paragraphs look like a graph. But now that you mention it, it does look strange and it’s harder to read on a very small resolution.
About the font, I was starting back then so I used pixels. Right now I sometimes use vw + some calculations for it for it to scale.

@Aloap
I think it was because of the margins. The bootstrap classes do resize the containers after x width (it’s a fixed amount) but things were looking a bit strange a few pixels before it resized so I used the media queries to make that adjustment when it reached that ‘look weird point’. I also used it to hide the margins when the screen was too small.

@everyone
Thanks for the feedback!

1 Like

Nice job guys. Kindly check this link for my own tribute page. Your comments and contributions will mean a lot to me. Thanks.

You can make the image responsive by adding the ‘img-responsive’ class to the image tag (it’s from bootstrap, it will scale it down if you have a smaller screen size/window).

You can also put a custom font. Check google fonts, they have a ton of free fonts. Use with the tag in html or @import inside the css files, no downloads needed!

Also, as @cecilebertin said, justified text looks a bit strange if the screen gets too small. Change it and see if you like it better.

Thanks so much @Shin8. i will improve on it. Gracias

Hi guys, just designed a simple tribute page . Please view and drop your comments. `my tribute page

Thanks in Advance`

1 Like

Tribute Page Suggestions Welcomed!

1 Like