Built Tribute Page: But I got 8 out of 10

Okay so I have built the Tribute page but I got a 8/10. I thought I have done everything correctly. If anyone would be open to looking at my code and see what went wrong?

I can’t add a webpage here yet since this my first post, but I have no problem dm-ing anyone that would be willing to look at my code.

I am trying to figure out what I forgot and missed in my coding. I thought I have done everything correctly.

Click the button with the 8/10 on it. The error messages are pretty straight forward about what is wrong, or missing.

Oh got it. I feel so silly. >_<

So having the link to your codepen (https://codepen.io/Raekelle_C/project/editor/XLkJaj) did help. And there are going to be a few coding/design suggestions.

On your tribute page from the link you sent me, the FCC test bundle isn’t included. How did you get 8/10 when the tests aren’t in there? I’m just baffled.

Awesome! Thank you. I am actually working on it now. >_<

No need to feel silly, the button really should have some info telling the user it’s function.

  1. The id is id=“tribute-info” not id=“tribute info” (spaces in attribute values makes each count as separate values). Also, it can’t be a paragraph element, try making it a div or better yet a section element.

  2. Your link to the info should have id=“tribute-link”

<a id="tribute-link" href="https://www.biography.com/people/eartha-kitt-9366124" target="_blank">Eartha Kitt story via Biography</a>

Oh freecodecamp had a link where you can test your code. So I just used that one. shrugs

So I copied your HTML into a dev environment to hammer on it a little, and there are a few things I’d suggest:

  • Structurally, there are two ul’s on that page: one for personal stats, and one for timeline. If you separate them and give them classes to reflect that (.personal-stats and .personal-timeline, for example), you can give every li in that ul.personal-timeline a margin-bottom: *** with some value and get rid of the <br> tags on every one.
  • I have said before and I’ll say again, with modern web development we can largely avoid using <div> tags! I might consider a structure like:
<article id="main">
  <header>
    <h1>Page title</h1>
    <figure>
      <img ... >
      <figcaption>...</figcaption>
    </figure>
  </header>
  <section id="tribute-info">
    ...
  </section>
  <footer>
    /* Here, all your "more information: stuff */.
  </footer>
</article>

Note that the tags actually tell you what they’re doing in the above. The article header is the header tag, in the article. The image and its caption are tidily contained in a figure tag. The footer info is in a … yup. footer tag.

Also, <img> tags are self-closing. You are wrapping that around the caption text, but that will give unpredictable results.

Just a really really quick skim, but those are things that will give you a tribute page that stands out – not only when displayed, but when someone digs into the code.

Ah, that makes sense now.

Oh wow that’s great! I didn’t think about customizing the ul tag like that. Thank you so much.

It really makes the context of the page more meaningful. When reading the code itself, you get a better idea what the intent of a given element might be. There are a LOT of tags available, check MDN for “Semantic HTML tags”.

Remove the width: 950px; from the a selector and change the width: 400px; on the ul selector to max-width: 400px;

Both are causing an overflow.