Tribute page feedback, not much in terms of style suggestions welcoome

2 Likes

I like it a lot. The picture looks good. Also, nice choice of colors.

1 Like

Thank you.

Itā€™s not as flashy as some of the tribute pages. I guess itā€™s pretty simple.

Iā€™m not a designer.

To pass the final test you can change the css for your image class to

#image{
  margin: auto;
  display: block;
  max-width: 370px;
  border-radius: 90px;
}
1 Like

Thank you that solution worked. I had tried max-width: 370px;, but some how pairing it with margin auto and display block made it workā€¦ i would hit the solution tab, but I donā€™t see it.

Thanks again.

1 Like

I like your choice of a person to write about. :slight_smile: As for the media queries, there is a typo (max-with) + lack of units (600px, perhaps?), I do not know if it would fix the issue, but it might be part of it!

From a designerā€™s point of view, you picked really nice, subtle, matching colours and a good picture!
I would suggest watching out for little details like space on both sides of a hypnen (ā€œ1929- Aprilā€), and I have one more suggestion: if you limit the max width of the page, the text will be a little easier to read on big screens!

1 Like

Donā€™t knock your work, simple is often better. The flashier a page, the more distracting from its content. I like the color choices, I like the simplicity, and I like the content itself. Very well done.

Of course, I usually try to poke folks to go a little beyond what theyā€™re already doing to consider how to improve. I noticed you used the <footer> on the page exactly as one ought. Good start to using semantic HTML. Also, I saw you had a <figcaption> tag in there, which is nice, but consider its container ā€“ why use a <div> tag when its content is an image, and its caption?

And one other note, as you have a <footer>, why not have a <header>?

<header>
  <h1 id="title"><strong>Dr. Martin Luther King Jr.</h1>
  <h2 id="subtitle">January 15, 1929- April 4, 1968</h2>
  <figure id="img-div">
    <img id="image" src="..." alt="Martin Luther King Jr, Minister and Civil Rights Leader">
    <figcaption id="img-caption">Minister and Civil Rights Leader</figcaption>
  </figure>
</header>

As I was editing that, there were two things I saw: First, IDā€™s are unique. You should avoid using title for both the <h1> and the <h2>. Second, the <img> tag is self-closing, you donā€™t need to (and shouldnā€™t) close it after the <figcaption>.

1 Like

Thank you for the tips. Iā€™ll revisit later.

Thank you.

I thought it would be simpler. Ran into some problems with padding causing my paragraph text to over lap. Iā€™m not at all sure why, but when I removed the padding the text was fine.

Html is simple at first glace until one starts using it.

Hiā€¦ I really liked your Tribute page , the design and specially the background colorā€¦

1 Like

Some things I would do:

Use @media to reduce the margins on small screens. I tried it out on your code and it looks nice:

  @media screen and (max-width: 600px) {
      p {
        margin: 5px;
      }
   }

And as per the example, maybe play around with a UL / LI to create a timeline of his life, rather than just a big block of text which you have now. It would add some visual flair without having to do too much to the site.

Apart from that - good job.

I made the changes you suggested.

Thank you,
Helen

1 Like

So close :slight_smile:

You have spelled ā€œwidthā€ as ā€œwithā€ in your media query and you need a space between ā€˜andā€™ & (max-width:

Youā€™ll see the difference once you change that.

1 Like

Thank you, I totally missed that error. It solved the problem.

2 Likes

Than you. Iā€™ll go back and put in an in order list for his education, but not the whole page. The king center has a time line, and I have to be careful not to plagiarize that site. Thatā€™s why I donā€™t have quotes or pictures.

1 Like

Yup yup! Just revisited your page, very well done! Keep up the good work, looking forward to more! :wink:

Thank you. I appreciate your feedback.