Tribute Page Makeover: Nelson Mandela

Code Feedback
1

Hi guys, after making my first project (Tribute Page) that did not turn out so well (because I overlooked Bootstrap responsiveness code), I decided to go back and do a careful review of the code lessons. Well it helped a lot! Here is my new updated Tribute Page: http://codepen.io/jjbrooks/full/WoPqyJ/

Thanks FreeCodCamp!

2

Hey CoffeeBookRead, good job on finishing the Tribute page. It’s nice and responsive.

When the screen gets a little smaller Nelsons face starts to look a bit squashed.
This is likely because of the fixed height css you’ve written

.pics {

width: 100%;
height: 400px;
}

This could possibly be fixed by changing the height property to auto.

Also I’m not sure if intentional but there’s some whitespace at the top of the page. This can easily be removed by changing the top margin on the first header.

I love what you did with the border around the Nelson picture too, nice touch.

Hope this feedback helps :slight_smile:

3

Thanks for the feedback! Yeah, I didn’t want to use pixels :confounded: but because the project pics are from random images on the net by reference link, I wasn’t in control of sizing; I had to set the size to a fixed px because both pics are different size in reality. In a normal case, I would have uploaded the two pictures only after resizing before upload then set pics to auto to suite responsiveness.

As for the white space, I can’t see the margin coding to remove it? Or something to do with Bootstrap? In Firefox’s element inspector this looks like something related to: .container-fluid::before
Any ideas?

Thanks again for your response!

4

@CoffeeBookRead
I thought that might of been the case, It’s tricky when importing different image sizes.

h1 {
font-family: Tangerine;
padding-top: 3%;
font-size: 90px;
}

adding this to your h1 should fix it:

margin-top: 0;

and also removing the border from your #body-container.

Let me know if that does the trick. :grinning:

1 Like
5

Worked perfectly. :ok_hand: Thanks again!

6

No problem, I look forward to seeing your portfolio page!

1 Like
7

Great job! I really like it!:tada:

1 Like
8

Wow, this is really good and it looks like you have put a lot of time into it.

I can’t offer a lot of feedback really because you are obviously far more advanced than me and it’s far more complex than mine.

But it was good to look at your code and see how you set yours out. It has helped me understand more about how important (and powerful) good CSS can be,

The other I was wondering is what was your design decision around not putting the whole page content onto a background (like in Quincy’s example Tribute Page he has everything on a grey background)?

1 Like
9

Thanks Faramooond! :relaxed:

1 Like
10

Hey Arthur, this is actually my second time around making this page. The first one didn’t turnout so well so I capitalized on my mistakes to craft it again. There is nothing like making a good mistake in the process of learning: it helps us retain those important matters which we tend to overlook while learning.

As for the container (the background), I am so ‘minimalistic’ when it comes to design; I love the clean look. The content holders make me cringe. :joy:

By the way, I am just a rookie. However, I learned how to do some HTML, CSS design and setting up Wordpress etc. just by self-teaching through Google. Then I found out about things like FreeCodeCamp and so I am here. I registered about a month ago.

11

Not at all! :wink:
it would be nice if you’ll check out my portfolio site

1 Like
12

Definitely. I will be sure to check it out and get back to you.