Revisiting My FreeCodeCamp Project: A Tribute Page

As part of my FreeCodeCamp journey, I built a Tribute Page to honor Dr. Norman Borlaug, a scientist whose contributions revolutionized global agriculture. This project tested my foundational HTML and CSS skills while challenging me to create a structured, visually appealing webpage. Let me share the thought process behind this work.

---

The Goal

The purpose of this project was to create a responsive web page highlighting the life and achievements of Dr. Norman Borlaug. The page needed to include key sections like a title, image with caption, timeline of events, and a quote block, all styled to enhance readability and engagement.

---

The Structure

Here’s how the page was structured:

1. Header Section
   The page starts with a title and subtitle that introduces Dr. Borlaug.
   html

   <header class="title">
<h1><strong>Dr. Norman Borlaug</strong></h1>
<p>The man who saved a billion lives</p>
</header>

   • The <header> tag helps semantically define the topmost section of the page.
   • Styling ensures the title and subtitle stand out visually, with ample margin and padding for spacing:
     css

     .title {
margin-top: 30px;
padding-top: 20px;
text-align: center;
}


---

2. Image with Caption
   Below the header, an image with a detailed caption provides a visual element to the page.
   html

   <figure>
<img id="img" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Dr. Norman">
<figcaption class="fig-text">
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields.
</figcaption>
</figure>

   • The <figure> tag groups the image and caption together.
   • CSS ensures the image is centered and the caption is aligned for readability:
     css

     #img {
     display: block;
     margin-left: auto;
     margin-right: auto;
     }

     .fig-text {
text-align: center;
}


---

3. Timeline Section
   A structured timeline uses an unordered list to showcase significant milestones in Dr. Borlaug’s life.
   html

   <ul>
<li><strong>1914</strong> - Born in Cresco, Iowa.</li>
<li><strong>1941</strong> - Works on applied science projects during WWII.</li>
<li><strong>1970</strong> - Receives the Nobel Peace Prize.</li>
<li><strong>2009</strong> - Dies at the age of 95.</li>
</ul>

   • CSS styles the list for readability and proper alignment:
     css

     ul {
     max-width: 550px;
     margin: 0 auto;
     text-align: left;
     line-height: 1.6;
     }

     li {
margin: 16px 0;
}


---

4. Quote Block
   A blockquote highlights an inspiring statement about Dr. Borlaug.
   html

   <blockquote>
<p>"Borlaug's life and achievement are testimony to the far-reaching contribution of one man's intellect."</p>
<cite>-- Indian Prime Minister Manmohan Singh</cite>
</blockquote>

   • The <blockquote> and <cite> tags provide semantic meaning for quotes and attributions.
   • Styling adds an elegant, italicized look:
     css

     blockquote {
     font-style: italic;
     max-width: 545px;
     margin: 0 auto 50px auto;
     text-align: left;
     }

     cite {
font-style: italic;
}


---

5. Call-to-Action Link
   The page ends with a link encouraging further reading.
   html

   <h3>If you have time, you should read more about this incredible human being on his <a target="_blank" href="https://en.wikipedia.org/wiki/Norman_Borlaug"><u>Wikipedia entry</u></a>.</h3>

   • CSS styles the link for a clean and accessible look:
     css

     a {
     color: #336699;
     }

     a:visited {
color: #85a3e0;
}


---

What I Learned

This project taught me:

• How to use semantic HTML tags for better accessibility.
• The importance of responsive and clean design in improving user experience.
• Applying CSS flexbox to align and center elements effectively.

---

Future Enhancements

If I were to revisit this project, I would:

• Incorporate animations to make the timeline interactive.
• Add JavaScript to allow users to expand and collapse sections for better engagement.

Key Takeaway

This tribute page demonstrated how structured HTML and CSS combine to narrate a story effectively. It reinforced the significance of semantics, readability, and visual appeal in web design.