Tribute Page Project. Critque please

Hi Campers,

I just got my Tribute Page project in a state where I am happy with the result. Have a look and tell me what you think.

It’s done with a touch of humor in mind, and meant to have a old fashioned typewriter feel in the font and colors. One thing I would really like to improve on is to give the main body back ground an old paper texture feel, but that is beyond what I can do at this time.

Sam.

6 Likes

Hey @samWson,

Nicely done. Perhaps you can improve on the responsiveness of the site by utilising bootstrap? :grin:

Here’s mine by the way:

Didn’t change the content from the original version. Just coded this from scratch by looking at it and make it responsive with bootstrap framework.

1 Like

Agreed. I think overall it looks good, but the center column is very small when viewed phone. A bit of Bootstrap responsive CSS would take care of that nicely.

And @adrianchinghc, nice job coding the example from scratch. It looks spot-on!

While we’re linking to tribute pages, here’s mine:

1 Like

Not bad for a beginner but I will give you my honest opinion and some things that will help you spice the page up a bit.

When creating your tribute page the first thing you want to implement is your framework because that is where the design of your tribute page will start. There is an awesome framework called Bootstrap that is built for responsiveness. Your page is not responsive and if you look at my screenshot below you will see what I am talking about.

See how your image does not look good on a small screen and everything is out of proportion?


Let Me Help You Make Your Tribute Page Responsive By Using Bootstrap

1.While viewing your pen in the edit mode, click the settings button in the upper right of your screen. The settings button is between the “Fork” button and the “Change View” button, and looks like this:


2.In pen settings click the CSS tab, it looks like this:


3.Now that you are in the CSS settings scroll all the way to the bottom and you will see a drop down list that says Quick-Add. Select Bootstrap within that drop down menu, then hit close.


4.Lastly, we are going to take all the content in the body of your website and put it in a bootstrap container, this will make all your content within that container responsive. The container begins at div class=“container-fluid” and ends where you close the div tag. We want all the contents in the body to be responsive so I opened the div tag right after your opening body tag and closed the div tag right before your closing body tag. Then I added an img-responsive class to the image on your website.


5.If all else fails, watch the video I made for you. Let me know if it helps! :grin:


You can learn more about bootstrap by clicking here.

Have a great day and happy coding!
Your Friend,
Michael

6 Likes

Very nice! There’s good advice from others about using Bootstrap and making it responsive. Here’s my take on the design itself:

  1. I love the colours and the contrast. They combination feels right with the subject.

  2. The nesting of boxes makes it feel too constrained. Consider removing the top & bottom margin so the yellow box extends right to the edges of the page. I think this will also help the rounded corners of the image look a little less jarring.

  3. The use of monotype for the text is a nice touch, very appropriate! But it is hard to read large blocks of it at that. I would play around with font-size and line-height to get something that’s easier to scan through. Or, perhaps use monotype for the date and first sentence, and then a contrasting typeface for the main text.

1 Like

Mine is funnier! :grinning:
Sorry… just wanted to show mine off. I used Bootstrap (with ABBR and KBD tags) and a webfont.
Because: if freeCodeCamp has been trying to teach you Bootstrap, why NOT use it?
It’s also used in a lot of professional environments so I’d recommend that to you as well. Sites really have to be responsive these days - there are so many screen sizes out there and mobile is taking over massively.

Oh, and my quaint tribute page is about a girl. Don´t forget the girls :wink:

1 Like

Thanks for the suggestions team, and for showing me your Pens. I like what I see. I’m off to do some Bootstrap revision. Cheers.

1 Like

AWESOME :smiley: glad we were able to help you out!
as always, happy coding!

that looks really good!

1 Like

Not bad, just keep it up, keep improving

Wanted to share mine to. I added some animate.css. Check it out.

See the Pen Free Code Camp: Tribute Page by michael alegrado (@mikeale03) on CodePen.

I’ve made a few modifications based on all your suggestions: added Bootstrap, played with the fonts, sizes and padding. I’m not sure how to make the body more readable without just reducing the amount of text in there, so I may edit that when I come back to it.

Here’s my ‘tribute’ to Captain Barnacles of the Octonauts - the hero in my daughters favourite cartoon. A bit of a shallow choice for me, but a) it gave me some nice visual elements to work with and b) he really is a hero! :wink:

Full disclosure is that I already have a reasonable grounding in HTML and CSS but this is actually the first time I’ve used bootstrap, so it was cool to build something using it. Hope you like it!

1 Like

I just completed my tribute page…nothing spectacular, but very near & dear to me. Here is the link…let me know what you think:

Thanks,
Rob (Panther0214)

1 Like

Nothing original, but I really enjoyed doing it :slight_smile:

Hi Guys, check out my Tribute page! Best experienced on a tab/laptop/desktop, i have tweaked the
design for mobile view. Any feedback would be appreciated as i am new to front end development.

1 Like

Hi, could you go check out my tribute page as well ? Any suggestions are welcome :slight_smile:

Hi Friends, could you go check out my tribute page as well ? Any suggestions are welcome

Jack Ma Tribute page