Request for help with Tribute Challenge, `img-div' `id="img-caption"`

User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div .

I am having trouble implementing the above condition, otherwise my challenge is complete. I feel like my code is getting messy with all of the ids and divs that feel unnecessary, but I can’t seem to figure this one out. Could anyone help me figure out how to fulfill this component?


--CSS-
#title {   
  font-size: 44px;
  margin-block: 0 0 0 0;
  padding: 5px;
  text-align: center;
}
#main {
  font-family: 'Orelega One', cursive;
   left-margin: 0;  
}  
  h2 {
 font-size: 18px;
 background-color:rgb(251, 251, 251);
}
img {
  max-width: 90%;
  margin: 0 auto;
  display: block;
}


--HTML--
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">

<link rel="preconnect" href="https://fonts.gstatic.com">
</script>
<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">

<div id="main">
  <div id="title">Grace Hopper</div>
  <d id="img-div"> <id="img-caption" photo introducing grace></id> 
  <img id="image" src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/007/117/original/4fec947d58ebd54bb21eee948b665331.jpg?1618367098" alt="photo of grace with highlights of her life"></div>
      
      <h2 id= "tribute-info">The woman who transformed how we use and operate computers </h2> 
Life Timeline:
        <ul>
          <li>1906 - Born in New York City, New York, USA
           </li>
         <li>1924 - Grace graduated from Graham High School
          </li>
         <li>1925 - Attends Vassar College to study math and physics
        </li>
         <li>1928 - Grace graduates college and is accepted  to a full scholership with Yale University
       </li>
        <li>1930 - Recieves a Masters degree in math and physics!
       </li>
        <li> 1931 - Grace begins her teaching career with Vassar, and continues to study with Yale
       </li>
        <li>1934 - Grace earns her PhD in math - the first woman to earn one in the US!
      </li>
       <li>1943 - Finally accepted into the Navy on her 3rd attempt, with a desire to serve her country. She is later assigned to the Bureau of Ordnance Project at Harvard, where she learns to program a Mark I computer
    </li>
      <li>1952 - Grace developes the first computer compiler called the A-o system, it is the first computer system to become more efficient reading code
    </li>
     <li> 1967 - Hopper retired from the Naval Reserve in 1966, but her pioneering computer work meant that she was recalled to active duty—at the age of 60—to tackle standardizing communication between different computer languages. She would remain with the Navy for 19 years. 
    </li>
      <li>1969 - She wins the title of computer science Man of the Year by the data processing management association
    </li>
  <li>1973 - Becomes the only american or woman to be distinguised in the British Computer Society
    </li>
     <li>1983 - Grace's work was recognized by her promotion to the rank of Commodore
    </li>
     <li> 1985 - Grace is promoted to Rear Admiral of the US Navy
    </li>
     <li> 1986 - Grace retired from the Navy as the oldest serviing officer in office, as well as a Rear Admiral </li>
     <li>1992 - Died in Arlington, Virginia, USA
    </li>
     <li> 2006 - Posthumously honored with the Presidential Medal of Freedom by Barack Obama
    </li>
  
  <img id="img-div"src="http://cdn.quotationof.com/images/grace-hoppers-quotes-3.jpg">
  <br>
  <footer>  To learn more about this amazing woman, try her 
    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Grace_Hopper#See_also" target= "_blank" >wikipedia page</a>
  </footer>
</div>

Check the tags as a starting point: https://jsfiddle.net/4b9mjfsy/

1 Like

Hi @bojmnic !

Welcome to the forum!

These are not valid html tags.

You should use a div tag instead there.
Also you cannot have two ids with the same name

Also, there are a few errors with your html.
I would suggest running your code though the html validator

Thank you very much! I’ll try the validator now. I think I was trying so hard to make the condition work that I ended up with some typos and it’s so hard to see everything in Codepen!

Hi again, I’ve tried running the validator, but it wasn’t helpful. I moved everything to VS Code and edited it, sent it back to Codepen… I feel it should run now but it won’t. Could you take another look at my code?

<div id="img-div">    
  <img id="image" src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/007/117/original/4fec947d58ebd54bb21eee948b665331.jpg?1618367098" 
  alt="photo of grace with highlights of her life">
<id="img-caption" img-div is a photo introducing grace></div></div>

The problem is here

You need to start with a html tag. Not an id.

Also this part should not be in the opening tag

Here is the correct version

<div id="img-div">
  <img id="image" src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/007/117/original/4fec947d58ebd54bb21eee948b665331.jpg?1618367098" alt="photo of grace with highlights of her life">
  <div id="img-caption">This is a photo of Grace Hopper</div>
</div>

You are a wizard! That makes a lot of sense. TYSM :smiling_face_with_three_hearts: :grinning: :partying_face:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.