HELP - Build a Tribute Page - Same 3 problems as others with no clear solution on other posts

Tell us what’s happening:

Iv been doing this for the last 3 hours!! no past post has any clear answers everyone seems to not agree on one solution yet somehow all never work !!
iv Added and removed elements on the code to just have the requirements and still getting an error. Iv changed the names the tags everything like 10 times!! it seems as tho other people getting help are replying back with “that didnt work” pretty often

  • Your #image should be centered within its parent.
    -Your #image should have a max-width of 100%.
    -Your img element should have a display of block.

Your code so far

<html>

<head>
    <meta charset="UTF-8" />
    <meta name="Viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tribubte Page</title>
    <link rel="stylesheet" href="style.css">
</head>
  
  <main id="main">
    <div class="card">
    <h1 id="title">Dr. Norman Borlaug</h1>
    <p>The man who saved a billion lives</p>
  <figure id="img-div">
 <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"></a>
    <div class="img-caption">
  <figcaption id="img-caption">
    <b>Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</b>
  </figcaption>
    </div>
  </figure>
    </div>
   <div class="h3-box" id="h3-box">
      <h3>
      Here's a time line of Dr. Borlaug's life:
      </h3>
    </div>
    <ul id="tribute-info">
      <li>
        1914 - Born in Cresco, Iowa
      </li>
      <li>
        1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
      </li>
      <li>
        1935 - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
      </li>
      <li>
        1937 - Finishes university and takes a job in the US Forestry Service
      </li>
      <li>
        1938 - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
      </li>
      <li>
        1941 - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
      </li>
      <li>
        1942 - Receives a Ph.D. in Genetics and Plant Pathology
      </li>
      <li>
        1944 - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.
      </li>
      <li>
        1945 - Discovers a way to grown wheat twice each season, doubling wheat yields1953 - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
      </li>
      <li>
        1953 - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
      </li>
    </ul>
    
<footer class="footer">
  <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wiki Info</a>
</footer>
 </html>
</main>

<style>

body {
  background: #00000;
}

h1 {
  color: black;
  font-family: Tahoma;
  text-align: center;
  min-height: 70px;
  background: #;
}

p {
  text-align: center;
  font-family: Verdana;
  color: black;
  font-size: 16px;
  min-height: 25px;
  background: #;
  
  }

figcaption {
  text-align: center;
  font-family: Arial;
  font-size: 14px; 
  min-height: 50px;
}

h3 {
  Font-family: Arial;
  text-align: center;
  min-height: px;
}
.h3-box {
  background: lightgrey;
  min-height: 0px;
  display: grid;
  grid-template-column: 1fr;
}
img {
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  max-width:1830px;
}
#img-caption {
  background: ;
}
.img-caption {
  background: ;
  height: 50px;
}
.card {
  width: 1830px;
}

}


</style>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

Hi @NELT !

Welcome to the forum!

It looks like you have some syntax errors to cleanup in your css file.
You can use this validator to fix those

https://jigsaw.w3.org/css-validator/

Also, you should remove the <styles> tags.

Once that is cleaned up, you are using the wrong file name here

Then the last test says you need to have a max width of 100%
but that is not what you wrote here

once I fix all of those things, then it passes for me

hope that helps

i deleted the styles tags and changed the px to 100px and still the same error and thats all i touched, but it still says all 3 failed no matter what


body {
  background: #00000;
}

h1 {
  color: black;
  font-family: Tahoma;
  text-align: center;
  min-height: 70px;
  background: #;
}

p {
  text-align: center;
  font-family: Verdana;
  color: black;
  font-size: 16px;
  min-height: 25px;
  background: #;
  
  }

figcaption {
  text-align: center;
  font-family: Arial;
  font-size: 14px; 
  min-height: 50px;
}

h3 {
  Font-family: Arial;
  text-align: center;
  min-height: px;
}
.h3-box {
  background: lightgrey;
  min-height: 0px;
  display: grid;
  grid-template-column: 1fr;
}
img {
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  max-width:100px;
}
#img-caption {
  background: ;
}
.img-caption {
  background: ;
  height: 50px;
}
.card {
  width: 1830px;
}

}

I’ve edited your code for readability. When you enter 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 (').

that is not correct either

the directions say to change it to 100% not 100px
100% is more responsive then fixed pixels

hope that helps

changed it to 100% still error on all 3. I used the Validator tool and it doesn’t tell me much other than give me red code and doesn’t say what needs to be fixed unless it means all of it.

Target: body { background: #00000; } h1 { color: black; font-family: Tahoma; text-align: center; min-height: 70px; background: #; } p { text-align: center; font-family: Verdana; color: black; font-size: 16px; min-height: 25px; background: #; } figcaption { text-align: center; font-family: Arial; font-size: 14px; min-height: 50px; } h3 { Font-family: Arial; text-align: center; min-height: px; } .h3-box { background: lightgrey; min-height: 0px; display: grid; grid-template-column: 1fr; } img { height: auto; display: block; margin-left: auto; margin-right: auto; width: 40%; max-width:100px; } #img-caption { background: ; } .img-caption { background: ; height: 50px; } .card { width: 1830px; } }
I/O Error: Error at index 0 in: " "

did you fix this? You need to resolve this too

the issues are these incomplete properties here

background: ;

I would just remove those for now

also it looks like you have a an extra } at the end here

changed even those and guess what still same 3 errors as before no progress has been made for 4 hours now :pensive:



body {
  background: #00000;
}

h1 {
  color: black;
  font-family: Tahoma;
  text-align: center;
  min-height: 70px;
  background: #;
}

p {
  text-align: center;
  font-family: Verdana;
  color: black;
  font-size: 16px;
  min-height: 25px;
  background: #;
  
  }

figcaption {
  text-align: center;
  font-family: Arial;
  font-size: 14px; 
  min-height: 50px;
}

h3 {
  Font-family: Arial;
  text-align: center;
  min-height: px;
}
.h3-box {
  background: lightgrey;
  min-height: 0px;
  display: grid;
  grid-template-column: 1fr;
}
img {
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  max-width:100%;
}

.img-caption {

  height: 50px;
}
.card {
  width: 1830px;
}

can I see your updated HTML too?

<html>

<head>
    <meta charset="UTF-8" />
    <meta name="Viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tribubte Page</title>
    <link rel="stylesheet" href="style.css">
</head>
  
  <main id="main">
    <div class="card">
    <h1 id="title">Dr. Norman Borlaug</h1>
    <p>The man who saved a billion lives</p>
  <figure id="img-div">
 <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"></a>
    <div class="img-caption">
  <figcaption id="img-caption">
    <b>Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</b>
  </figcaption>
    </div>
  </figure>
    </div>
   <div class="h3-box" id="h3-box">
      <h3>
      Here's a time line of Dr. Borlaug's life:
      </h3>
    </div>
    <ul id="tribute-info">
      <li>
        1914 - Born in Cresco, Iowa
      </li>
      <li>
        1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
      </li>
      <li>
        1935 - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
      </li>
      <li>
        1937 - Finishes university and takes a job in the US Forestry Service
      </li>
      <li>
        1938 - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
      </li>
      <li>
        1941 - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
      </li>
      <li>
        1942 - Receives a Ph.D. in Genetics and Plant Pathology
      </li>
      <li>
        1944 - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.
      </li>
      <li>
        1945 - Discovers a way to grown wheat twice each season, doubling wheat yields1953 - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
      </li>
      <li>
        1953 - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
      </li>
    </ul>
    
<footer class="footer">
  <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wiki Info</a>
</footer>
 </html>
</main>

You still need to change this

you are missing a character in that file name

that is why you are still failing the 3 tests for the css portion.
because the file is not correctly linked to the html document

make sense?

Here is the note left in the directions

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

now compare that with what you wrote here

that should help you see what you are missing

Thank God :sob:, I hate this so much its always that one little thing. i took a break from coding for a few months and Jeez iv got some practicing to do. Thank YOU :sunglasses::man_dancing:

1 Like