First HTML project, ever...stuck!

Tell us what’s happening:
I’d just like someone to look this over and see what I need to correct. I believe I’m about 60-70% completed, but I’m still stuck on things like the image resizing. Any input is greatly appreciated.

-brock

Your code so far


<!DOCTYPE html>
<html lang="en">
<html>
  <head>
    <title>Dr. Norman Borlaug</title>
    <style>
      #main {
        background-color: #c5d4d1;
      }
      #title{
        text-align: center;
        font-family: monospace; 
        background-color: #ebf5f3;
        border-style: solid;
        height: 100px;
        width: 1025px;
        margin: 50px 100px 50px 100px;
        margin: auto; 
      }
      #image{
       height: 500px;
       border-style: solid;
       border-width: 5px;
       margin: auto; 
      }
      #img-caption{
        font-size: 14px;
        text-align: center;
        margin: 0px 50px 20px 50px; 
      }
      #tribute-title{
        text-align: center;
        padding: 50px;
        margin: 10px;
        font-family: monospace;
        margin: auto;
      }
      #tribute-info{
        padding: 20px 100px 20px 100px;
        margin: auto;
        border-style: solid;
        }
      #tribute-link{
        text-align: center;
        margin: 50px;
      }
      #bulletpoints{
        padding: 20px 250px 20px 250px;
      }
      #quote{
        border-style: solid;
        padding: 10px 100px 10px 100px;
        margin: 0px 150px 0px 150px; 
      }
    </style>
  </head>
  
  <body id="main">
    
    <div id="title">
    <h1><strong>Dr. Norman Borlaug</strong></h1>
    <h2><em>The man who saved a billion lives.</em></h2>
    </div> 
    
    <div>
    <p style="text-align: center;"><img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Dr. Borlaug and others inspecting wheat in the field"></p>
    </div>
    <div id="img-caption"><em>
      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.</em>
    </div>
    <div id="tribute-info" style="background-color: #ebf5f3">
      <main>
        <div id="tribute-title">
        <h2>Here's a timeline of Dr. Borlaug's life:</h2>
        </div>
        <div id="bulletpoints">
        <ul>
          <li><strong>1914:</strong> Born in Cresco, Iowa</li>
          <br>
           <li><strong>1933:</strong>Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration" </li>
          <br>
           <li><strong>1935:</strong> 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>
          <br>
           <li><strong>1937:</strong> Finishes university and takes a job in the US Forestry Service
</li>
          <br>
           <li><strong>1938:</strong> 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>
          <br>
           <li><strong>1941:</strong> 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>
          <br>
           <li><strong>1942:</strong> Receives a Ph.D. in Genetics and Plant Pathology </li>
          <br>
           <li><strong>1944:</strong> 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>
          <br>
           <li><strong>1945:</strong> Discovers a way to grown wheat twice each season, doubling wheat </li>
          <br>
           <li><strong>1953:</strong> 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>
          <br>
           <li><strong>1962:</strong> Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population </li>
          <br>
           <li><strong>1970:</strong> Receives the Nobel Peace Prize</li>
          <br>
           <li><strong>1983:</strong> Helps seven African countries dramatically increase their maize and sorghum yields </li>
          <br>
           <li><strong>1984:</strong> Becomes a distinguished professor at Texas A&M University </li>
          <br>
          <li><strong>2005:</strong> States "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds." </li>
          <br>
          <li><strong>2009:</strong> Dies at the age of 95.</li>
        </ul>
        </div>
        <div id="quote">
      <p><em>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress." 
      <br>
      <br>
        -- Indian Prime Minister Manmohan Singh </em></></p></div>
        
        <div id="tribute-link"><em>
          If you have time, you should read more about this incredible human being on <a href="https://en.wikipedia.org/wiki/Norman_Borlaug"> his Wikipedia entry.</em></a>
        </div>
      </main>
  </body>
  </html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0.

Challenge: Build a Tribute Page

Link to the challenge:

Hi @bwl772,

Where are you working on your code, would you be able to share your link ? :slight_smile:

So here would be my initial round of clean up on this. I commented on where I changed things. Will post a even more cleaned up version in a bit (hopefully).

<!doctype html>
<html>
    <head>
        <title>Dr. Norman Borlaug</title>
        <style>
            /*This was originally  #main, but I assume you actually want to target the tag main, not an element with the id of main*/
            main {
                background-color: #C5D4D1;
            }

            /* with this:
                margin: 50px 100px 50px 100px;
                margin: auto;
                the second margin definition competes with the first and would override it. Which one do you actually want?
                */
            #title {
                background-color: #EBF5F3;
                border-style: solid;
                font-family: monospace;
                height: 100px;
                margin: 50px 100px 50px 100px;
                margin: auto;
                text-align: center;
                width: 1025px;
            }

            #image {
                border-style: solid;
                border-width: 5px;
                height: 500px;
                margin: auto;
            }

            /*The unit of measure px is not needed when the value is 0*/
            #img-caption {
                font-size: 14px;
                margin: 0 50px 20px 50px;
                text-align: center;
            }

            /* again: the second margin definition competes with the first and would override it. Which one do you actually want?*/
            #tribute-title {
                font-family: monospace;
                margin: 10px;
                margin: auto;
                padding: 50px;
                text-align: center;
            }

            #tribute-info {
                border-style: solid;
                margin: auto;
                padding: 20px 100px 20px 100px;
            }

            #tribute-link {
                margin: 50px;
                text-align: center;
            }

            #bulletpoints {
                padding: 20px 250px 20px 250px;
            }

            /*This rule does not seem to match any elements on the page.
            The unit of measure px is not needed when the value is 0.
            */
            #quote {
                border-style: solid;
                margin: 0 150px 0 150px;
                padding: 10px 100px 10px 100px;
            }
        </style>
    </head>
    <body>
        <div id="title">
            <h1><strong>Dr. Norman Borlaug</strong></h1>
            <h2><em>The man who saved a billion lives.</em></h2>
        </div>
        <div>
            <p style="text-align: center;"><img alt="Dr. Borlaug and others inspecting wheat in the field" id="image"
                                                src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
            </p>
        </div>
        <div id="img-caption"><em>
            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.</em>
        </div>
        <div id="tribute-info" style="background-color: #EBF5F3">
            <main>
                <div id="tribute-title">
                    <h2>Here's a timeline of Dr. Borlaug's life:</h2>
                </div>
                <!--Removed br tags as they should not be needed-->
                <div id="bulletpoints">
                    <ul>
                        <li><strong>1914:</strong> Born in Cresco, Iowa</li>
                        <li><strong>1933:</strong>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><strong>1935:</strong> 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><strong>1937:</strong> Finishes university and takes a job in the US Forestry Service</li>
                    </ul>
                    <div id="tribute-link"><em>
                        If you have time, you should read more about this incredible human being on
                        <a href="https://en.wikipedia.org/wiki/Norman_Borlaug"> his Wikipedia entry.
                        </a>
                    </em>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

Even more cleaned up and not bad for a first shot by the way.

<!doctype html>
<html>
    <head>
        <title>Dr. Norman Borlaug</title>
        <style>
            /*This was originally  #main, but I assume you actually want to target the tag main, not an element with the id of main*/
            main {
                background-color: #C5D4D1;
            }

            /* with this:
                margin: 50px 100px 50px 100px;
                margin: auto;
                the second margin definition competes with the first and would override it. Which one do you actually want?
                */
            #title {
                background-color: #EBF5F3;
                border-style: solid;
                font-family: monospace;
                height: 100px;
                margin: 50px 100px 50px 100px;
                margin: auto;
                text-align: center;
                width: 1025px;
            }

            #image {
                border-style: solid;
                border-width: 5px;
                height: 500px;
                margin: auto;
            }

            /*The unit of measure px is not needed when the value is 0*/
            #img-caption {
                font-size: 14px;
                margin: 0 50px 20px 50px;
                text-align: center;
            }

            /* again: the second margin definition competes with the first and would override it. Which one do you actually want?*/
            #tribute-title {
                font-family: monospace;
                margin: 10px;
                margin: auto;
                padding: 50px;
                text-align: center;
            }

            #tribute-info {
                background-color: #EBF5F3;
                border-style: solid;
                margin: auto;
                padding: 20px 100px 20px 100px;
            }

            #tribute-link {
                margin: 50px;
                text-align: center;
            }

            #bulletpoints {
                padding: 20px 250px 20px 250px;
            }

            /*This rule does not seem to match any elements on the page.
            The unit of measure px is not needed when the value is 0.
            */
            #quote {
                border-style: solid;
                margin: 0 150px 0 150px;
                padding: 10px 100px 10px 100px;
            }

            .strong {
                font-weight: bold;
            }

            .em {
                font-style: italic;
            }

            .centered {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="title">
            <!--h tags are usually bold by default anyway and you generally want to avoid using formatting tags like strong and em in favor of using CSS-->
            <h1>Dr. Norman Borlaug</h1>
            <h2 class="em">The man who saved a billion lives.</h2>
        </div>
        <!--wrapping div id not needed as no classes or other css were applied to it. the p tag is already a block element.-->
        <p class="centered"><img alt="Dr. Borlaug and others inspecting wheat in the field" id="image"
                                 src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
        </p>
        <div class="em" id="img-caption">
            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.
        </div>
        <!--Moved in line style to the existing definition you have for this id-->
        <div id="tribute-info">
            <main>
                <div id="tribute-title">
                    <h2>Here's a timeline of Dr. Borlaug's life:</h2>
                </div>
                <!--Removed br tags as they should not be needed-->
                <!--changed strong tags to use class instead.-->
                <div id="bulletpoints">
                    <ul>
                        <li><span class="strong">1914:</span> Born in Cresco, Iowa</li>
                        <li><span class="strong">1933:</span>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><span class="strong">1935:</span> 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><span class="strong">1937:</span> Finishes university and takes a job in the US Forestry
                            Service
                        </li>
                    </ul>
                    <div class="em" id="tribute-link">
                        If you have time, you should read more about this incredible human being on
                        <a href="https://en.wikipedia.org/wiki/Norman_Borlaug"> his Wikipedia entry.
                        </a>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

I would suggest you share a link to your Codepen (or wherever). Make sure you have added the test script to the page as well.


I’ve edited your post 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.

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

1 Like

Yeah, how do I do that? : /

Okay, I will figure out how to do that. Thanks.

Here is a link to my project:

Thank you very much for the feedback!

I’m going to go over what you fixed in detail later this afternoon…I’m off to grab the kiddo from daycare now.

Thanks again!

Here you go. I think this is how I post the link? Just copy/paste the url?

1 Like

Hi @bwl772,

Could you verify your email address to enable full page view? :slight_smile:

And you do not have to modify the existing pen, you can create a tribute page for anyone/anything you want, including your chosen photo(s) and text.

Link worked for me. So whatever you did worked.

You should add the test script to the page. Click the Settings button, go to the JS section and paste in the script link https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js


  1. The image and the caption elements both need to be inside the same container element with the id of img-div

  2. The tribute-info id should be on the link element, not the container div.

  3. The link should have a target attribute set to _blank.

  4. The CSS for the image is not correct. Look at the lower part of the error message it should guide you to what properties you need to set on the image.

@bwl772 Just to be clear. My feedback was just general feedback it was not specific to passing any of the challenges here on this site.

hello i need help i dont know how to make the alt not attribute to my HTML

Thank you everyone for the input.

I finally had time after the weekend to do some more work on this.

I have all 9 items finished except for the resizing of the image.

Could I get some help on that?

Thanks again, everyone. I really appreciate it.

I didn’t think I could even do a simple webpage like this a month ago.

Look at the lower error message:

Try using the "max-width" style property : expected 'none' to not equal 'none'

Fixing that, you will get a new error message. Keep fixing it by adding all the different properties the error messages are asking for.

At the end you will just have to center the image, you can use margin: auto for that.

Thank you everyone.

Finally got it done!

Couldn’t have done it without all your input.

Onto the next challenge.