Can someone help me I couldn’t complete this task for Building a Tribute Page

This is what I did:

Hey! Welcome to the freeCodeCamp’s community forums.

It would be much better for others if you add the code you’re having trouble with here so others can run it and debug it themselves.

This is what I need help with:

Hi! Welcome to the forum! Please share your html and css code. We can’t really help you from a photograph.

When you copy/paste a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

 <main id="main">
      <div id= "img-div">
        <div id="image-caption" alt="A pic of Jonghyun Reading">
        <img id="image" src="https://pbs.twimg.com/media/DbKAqXMUQAALoQG.jpg:large" alt="Shinee-Jonghyun">
        </div>
        <!--Your image should responsively resize,relative to its parent element, without exceeding its original size.Your img element should be centered within its parent element --> 
        <div id="tribute-info">Jonghyun</div>
        <div id="image-caption">A pic of Jonghyun Reading
<a id="tribute-link" href="" target="_blank"></a>
</main>

It kept on giving me errors like my “img-captions” shouldn’t be blank

Can you please share all your css and all your html? I can’t investigate why you aren’t passing the other user stories without seeing it.

However one thing I can see here is that you are missing this user story.

Within the #img-divelement, you should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in #img-div

You should not use the alt attribute for this as you have below, it can only apply to an img element, not a div. Also you are using the incorrect id, it should be img-caption.

<div id="image-caption" alt="A pic of Jonghyun Reading">

You need to put text inside the div with an id of img-caption. That means somewhere between its opening and closing tags.

This is my CSS

#img-caption {
 width: 400px;
}

img{
  display: block;
  max-width: 100%;
  height: auto;
}

You mean like this?

<main id="main">
      <div id= "img-div">
        <div id="image-caption">Jonghyun Reading</div>

Cuz it’s still giving me an X

That should be correct, but as you haven’t shared all of you html code I can’t see why it isn’t working correctly.

I need to see everything in the freecodecamp code editor html tag.

With the first bit of code you shared, I missed that you had used the id image-caption twice in the code you shared before. A given id should only be used once per html file.

I’m also noticing syntax mistakes such as divs without closing tags. You may want to try a html validator like this one to check for syntax errors.

But I can’t reliably check for these issues without seeing all of your html code.

Check the id you are using in your css to target the element, it should be called image.

Within the #img-div element, you should see an img element with a corresponding id="image"

Your css properties and values are correct however! :smiley:

This is my full code for html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tribute Page for Shinee Jonghyun</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <style></style>
</head>

<body>
  <header>
    <a href="index.html">Home</a>
    <a href="Links/Credits/KProfiles.html">Credits</a>
  <a href="Links/FactsabtJjong/ChanelKorea.html">Chanel Korea</a>
    <a href="Links/FactsabtJjong/JjongWikipedia.html" target="_blank">Jonghyun Wikipedia</a>
    <a href="Links/JjongSocialMedia/Instagram.html">Jonghyun's Instagram
    <a href="Links/JjongSocialMedia/Twitter.html">Jonghyun's Twitter</a>
      
      <h1 id= "title">Shinee Kim Jonghyun</h1>
 

  <p>
    Kim Jonghyun is a late-Shinee member who committed carbon monoxide suicided on December 18th,2017 due to depression. You can also find Jonghyun's Social Media here or below in basic Information about Jonghyun:
   </p>  
   
  <h2>Basic Information about Jonghyun</h2>
   
    <ul>Name: Kim Jonghyun</ul>
    <ul>Birth: April 8th, 1990</ul>
    <ul>Deceased: December 18th, 2017</ul>
    <ul>Group: Shinee</ul>
    <ul>Nickname: Bling bling Jonghyun, Dino, Jjong, Puppy</ul>
  <ul>Fandom name: Blingers</ul>
  <ul>Blood:AB</ul>
  <ul>Instagram: <a href="https://www.instagram.com/jonghyun.948/?hl=en" alt="Jonghyun-instagram" >@jonghyun.48
                   </a> </ul>
  <ul>Twitter: <a href="https://mobile.twitter.com/realjonghyun90" alt="jonghyun-twitter">@realjonghyun90</a></ul>
    <h3>Facts about our Jjongie</h3>
    <li>shortest of the group</li>
  <li>Ate paper clip once</li>
  <li>often flirts with key, and key flirts back (Ooooh Jongkey moment~)</li>
  <li>He threatened to eat all of Taemin’s ice cream once if he didn’t get out of bed (Onew's method)</li>
    <li>loves meat</li>
  <li>laziest member according to Minho </li>
  <li>talks fast when nervous</li>
  <li>Most sensitive out of all members. Cries easily.</li>
  <li>Jonghyun is also an author, radio host, singer, song-writer </li>

  <h4>Credits and Extra Information</h4>
  <p>
    For more information about Jonghyun, you can use the hyperlinks linked above to go to the section you're interested in </p>
    

   <main id="main">
      <div id= "img-div">
        <div id="image-caption">Jonghyun Reading</div>
        <img id="image" src="https://pbs.twimg.com/media/DbKAqXMUQAALoQG.jpg:large" alt="Shinee-Jonghyun">
        </div>
        <!--Your image should responsively resize,relative to its parent element, without exceeding its original size.Your img element should be centered within its parent element --> 
        <div id="tribute-info">Jonghyun</div>
        <div id="image-caption">A pic of Jonghyun Reading
<a id="tribute-link" href="" target="_blank"></a>
</main>
  </body>


  </html>

Okay so, lets start with the head element,

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tribute Page for Shinee Jonghyun</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <style></style>
</head>
  1. Check the address of your link element. It should be styles.css. Otherwise the html won’t link to the css.

  2. You have a second <head> opening tag in the middle of the head element. This will cause an error and should be removed.

  3. You have two title elements inside the head element. There should only be one.

  4. You don’t need an empty style element here.

Next,

<body>
  <header>
    <a href="index.html">Home</a>
    <a href="Links/Credits/KProfiles.html">Credits</a>
  <a href="Links/FactsabtJjong/ChanelKorea.html">Chanel Korea</a>
    <a href="Links/FactsabtJjong/JjongWikipedia.html" target="_blank">Jonghyun Wikipedia</a>
    <a href="Links/JjongSocialMedia/Instagram.html">Jonghyun's Instagram
    <a href="Links/JjongSocialMedia/Twitter.html">Jonghyun's Twitter</a>
  1. This header element is not closed. It needs a closing tag.
  2. A closing tag is missing for an anchor element.

For this section,

<ul>Name: Kim Jonghyun</ul>
    <ul>Birth: April 8th, 1990</ul>
    <ul>Deceased: December 18th, 2017</ul>
    <ul>Group: Shinee</ul>
    <ul>Nickname: Bling bling Jonghyun, Dino, Jjong, Puppy</ul>
  <ul>Fandom name: Blingers</ul>
  <ul>Blood:AB</ul>
  <ul>Instagram: <a href="https://www.instagram.com/jonghyun.948/?hl=en" alt="Jonghyun-instagram" >@jonghyun.48
                   </a> </ul>
  <ul>Twitter: <a href="https://mobile.twitter.com/realjonghyun90" alt="jonghyun-twitter">@realjonghyun90</a></ul>
    <h3>Facts about our Jjongie</h3>
    <li>shortest of the group</li>
  <li>Ate paper clip once</li>
  <li>often flirts with key, and key flirts back (Ooooh Jongkey moment~)</li>
  <li>He threatened to eat all of Taemin’s ice cream once if he didn’t get out of bed (Onew's method)</li>
    <li>loves meat</li>
  <li>laziest member according to Minho </li>
  <li>talks fast when nervous</li>
  <li>Most sensitive out of all members. Cries easily.</li> 
  <li>Jonghyun is also an author, radio host, singer, song-writer </li>
  1. This is incorrect syntax for the HTML ul and li elements. Refer to this W3schools page for information on how it should be written.

  2. Anchor elements do not need alt attributes.

Next the image section.

<div id= "img-div">
        <div id="image-caption">Jonghyun Reading</div>
        <img id="image" src="https://pbs.twimg.com/media/DbKAqXMUQAALoQG.jpg:large" alt="Shinee-Jonghyun">
        </div>
        <!--Your image should responsively resize,relative to its parent element, without exceeding its original size.Your img element should be centered within its parent element --> 
        <div id="tribute-info">Jonghyun</div>
        <div id="image-caption">A pic of Jonghyun Reading
<a id="tribute-link" href="" target="_blank"></a>
  1. You should use the id img-caption not image-caption.

  2. There should only be one element with an id of img-caption.

  3. Your link element needs a href value and link text so the link can be clicked.

I strongly advise using a html validator in future. It can find these syntax issues for you, such as unclosed or incorrectly used elements.

1 Like

Omg, thank you so much! You’re right, it’s styles.css not style.css and I passed!

1 Like