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.
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:
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!
You can learn more about bootstrap by clicking here.
Have a great day and happy coding!
Your Friend,
Michael
Very nice! There’s good advice from others about using Bootstrap and making it responsive. Here’s my take on the design itself:
I love the colours and the contrast. They combination feels right with the subject.
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.
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.
Mine is funnier!
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
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!
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!
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.