Can You Give Me Tribute Page Feedback?

Hey everyone,

Take a look at my tribute page. Had a lot of fun working through this. Took me a second to get that pesky <ul> aligned correctly.

As you’ll see I like to add colors to my elements to see where they are spaced, how much space they take up in their parent elements, etc.

Let me know what you think, thanks!

Make sure to put all of your styling in the CSS section. Move the display: block; out of the html for the ul element and put in the the ul selector. I also suggest a little padding on the top and bottom of the ul element.

  padding-top: 15px;
  padding-bottom: 15px; 

I also noticed there is no space between the top yellow section and the ul element, but at the bottom there is a space between the ul element and the black bar section. Was that on purpose? To me, space between the top and bottom of the ul should be the same.

In the black background container, I recommend a lighter font color for the “Learn more about Jerry Brown’s long political career by visiting his”, because there is not enough contrast between it and the black background which makes it difficult to read.

1 Like

Thanks @RandellDawson! Really appreciate your thoughtful feedback. Looks like you’re a leader on the site here, very happy to meet you and have you as a resource.

In answer your question about the space between the top yellow section (which is actually my Bootstrap .container) and the white background <ul>:

One of the most difficult parts of learning CSS, and the Bootstrap framework as an extension, is that it’s so hard to know what all of the default values are for all the different properties related to an element.

So for example, in BS3 the <ul> element has a default margin-top: 0px while its default margin-bottom: 10px.

I’m no expert, but that doesn’t make a lot of sense to me. I would figure, like you mentioned, that an element should default with equal top and bottom margin (and right and left margin as well for that matter).

To complicate matters further the <h3> element I use right beneath the <ul> has margin-top: 20px and margin-bottom: 10px !

I had to download the actual CSS file of BS3 to dig through and find the <ul> and <h3>default values. Let me know if you understand why the default values are so whacky and if you know an easier way to learn default values.

Thanks again.

Each browser has a slight variation in the default style definition of each element. Why? I don’t know.

So you do not have to search through Bootstrap code, you can take advantage of the Developer Tools in modern browsers. If you use Chrome, you can open the tools with Ctrl+Shft+J and select the Elements tab. Then make sure the Styles sub tab is show and you can mouseover the various elements shown. If you click on an element, then you can see all the styles being applied to the element. You can check/uncheck properties and even directly change the property values and see how it changes the page.

1 Like

Awesome, just what the doctor ordered :+1: