Published on

Portfolio Project: Create a Compelling Tribute Page for Your Hero [HTML & CSS Guide]

Authors

'Portfolio Project: Create a Compelling Tribute Page for Your Hero [HTML & CSS Guide]

Learn how to build a beautiful, responsive tribute page from scratch using HTML and CSS. This step-by-step guide is the perfect portfolio project for aspiring web developers.

Table of Contents

So, you're starting your journey into web development. You've learned the basics of HTML and CSS, and now you're itching to build something real—something you can show off. Where do you begin? My answer is always the same: build a tribute page.

Why? Because it’s the perfect first project. It’s small enough to be manageable but complex enough to teach you the essentials of structuring a web page, styling it, and even making it look good on different devices. It’s a project that consolidates your foundational knowledge and gives you a tangible, shareable result.

In this comprehensive guide, we'll walk through every step of creating a compelling tribute page for a hero of your choice. We'll cover planning, structuring with semantic HTML, styling with modern CSS, and ensuring it's responsive. For our example, we'll be paying tribute to Dr. Norman Borlaug, a man credited with saving over a billion people from starvation.

Ready to build something meaningful? Let's get started.

Why a Tribute Page is the Perfect Starter Project

Before we jump into the code, let's understand why this project is such a valuable learning experience for new developers.

  • It Covers the Fundamentals: You'll use the most important HTML tags and CSS properties, reinforcing what you've learned in a practical context.
  • Focus on Content and Structure: It forces you to think about how to organize information logically using semantic HTML, which is a crucial skill for building accessible and SEO-friendly websites.
  • A Playground for CSS: From typography and color to layout with Flexbox or Grid, a tribute page offers countless opportunities to get creative with your stylesheet.
  • Introduces Responsive Design: You can't just build for your laptop screen. This project is an excellent introduction to using media queries to make your page look great on phones, tablets, and desktops.
  • It's a Complete, Self-Contained Project: From <!DOCTYPE html> to the final CSS tweak, you own the entire process. Finishing it gives you a huge confidence boost and a polished piece for your portfolio.

Step 1: Planning Your Tribute – The Blueprint for Success

Great websites aren't built on a whim; they're planned. A few minutes of planning now will save you hours of frustration later.

Choose Your Hero

This is the fun part! Pick someone who inspires you. It could be a scientist, an artist, a historical figure, an activist, or even a family member. Having a personal connection to your subject will make the project more engaging. For our guide, we've chosen Dr. Norman Borlaug, the agronomist and Nobel laureate.

Gather Your Content

Every website needs content. For a tribute page, you'll typically need:

  1. A Main Title: The name of your hero.
  2. A Subtitle or Tagline: A short, impactful description (e.g., "The Man Who Saved a Billion Lives").
  3. An Image: A high-quality, striking photo of your hero.
  4. A Brief Biography: A few paragraphs summarizing their life and work.
  5. A Timeline of Key Achievements: A list of significant dates and accomplishments. This is a great feature to showcase your CSS skills.
  6. An Inspiring Quote: A powerful quote from or about your hero.
  7. A Link for More Information: A link to a Wikipedia page or official biography for visitors who want to learn more.

Sketch a Simple Wireframe

You don't need to be an artist. Grab a pen and paper (or a simple digital tool) and sketch a basic layout. This helps you visualize the structure before writing a single line of code.

Here’s a classic, effective layout:

  • Header: Contains the main title and subtitle.
  • Main Section:
    • An image of your hero with a caption.
    • A brief introduction or biography section.
  • Timeline Section: A dedicated area for their key accomplishments.
  • Quote Section: A blockquote to highlight a powerful saying.
  • Footer: Contains a link for more information and your own credit.

This simple structure is our roadmap. Now, let's start building.

Step 2: Laying the Foundation with Semantic HTML

Semantic HTML means using tags for their meaning, not just their appearance. This is crucial for accessibility (screen readers) and SEO (search engines). It also makes your code much easier to read and maintain.

Let's create our index.html file and build out the structure based on our wireframe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute to Dr. Norman Borlaug</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main id="main">
        <header id="title-container">
            <h1 id="title">Dr. Norman Borlaug</h1>
            <p id="subtitle">The Man Who Saved a Billion Lives</p>
        </header>

        <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 standing in a wheat field.">
            <figcaption 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.
            </figcaption>
        </figure>

        <section id="tribute-info">
            <h2 id="timeline-title">Here's a time line of Dr. Borlaug's life:</h2>
            <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>
                <li><strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology</li>
                <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.</li>
                <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>
                <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>
                <li><strong>1970</strong> - receives the Nobel Peace Prize</li>
                <li><strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields</li>
                <li><strong>1984</strong> - becomes a distinguished professor at Texas A&M University</li>
                <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>
                <li><strong>2009</strong> - dies at the age of 95.</li>
            </ul>
        </section>

        <blockquote id="quote">
            <p>"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."</p>
            <cite>-- Indian Prime Minister Manmohan Singh</cite>
        </blockquote>

        <footer id="footer">
            <h3>If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry</a>.</h3>
        </footer>
    </main>
</body>
</html>

Deconstructing the HTML

  • <main>: This is the main container for our page content.
  • <header>: Used for the title and subtitle. It's more semantic than a plain <div>.
  • <figure> and <figcaption>: The standard way to encapsulate an image and its caption. The alt attribute on the <img> tag is vital for accessibility.
  • <section>: We use this to group the timeline, giving it its own distinct section.
  • <ul> and <li>: An unordered list is perfect for the timeline items.
  • <blockquote> and <cite>: The correct semantic tags for a quotation and its source.
  • <footer>: A fitting container for the final call to action and link.

Step 3: Bringing it to Life with CSS

Right now, our page is structured but looks plain. This is where CSS (Cascading Style Sheets) comes in. Let's create a styles.css file and start adding some style.

Basic Setup and Typography

First, let's set up some global styles for the body, including a background color and a more readable font.

/* styles.css */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

main {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1, h2, h3 {
    text-align: center;
}

Here, we've set a clean, modern font stack, improved line spacing for readability, and centered our main content block with a subtle background and shadow to make it pop.

Styling the Header and Image

Let's make the title and image section visually appealing.

/* Header Styles */
#title-container {
    text-align: center;
    padding-bottom: 20px;
}

#title {
    font-size: 2.5rem;
    margin-bottom: 0;
}

#subtitle {
    margin-top: 5px;
    font-style: italic;
    color: #666;
}

/* Image Styles */
#img-div {
    margin: 0;
    padding: 10px;
    background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#image {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom space under the image */
    margin: 0 auto;
}

#img-caption {
    margin-top: 15px;
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}

We've centered the header text and given the image a nice container. Setting max-width: 100% on the image is a key responsive design technique—it ensures the image never overflows its container.

Designing the Timeline

This is where we can get a bit more creative. A simple unordered list can be styled to look like a professional timeline.

/* Timeline Section Styles */
#tribute-info {
    margin: 40px auto;
    padding: 0 20px;
}

#timeline-title {
    margin-bottom: 30px;
}

#tribute-info ul {
    max-width: 600px;
    margin: 0 auto; /* Center the list */
    padding-left: 0; /* Remove default padding */
    list-style: none; /* Remove default bullets */
}

#tribute-info li {
    margin-bottom: 20px;
    padding-left: 25px;
    position: relative; /* Needed for the custom bullet */
}

/* Custom bullet for the timeline */
#tribute-info li::before {
    content: '•';
    color: #007bff; /* A nice blue color */
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    line-height: 1; /* Align with the text */
}

By removing the default list styles and using a ::before pseudo-element, we've created a clean, custom-styled timeline. The position: relative on the <li> and position: absolute on the ::before element is a classic CSS trick for precise positioning.

Finally, let's style the concluding elements to give them proper emphasis.

/* Quote Styles */
#quote {
    margin: 40px auto;
    padding: 20px;
    max-width: 700px;
    background-color: #eef7ff;
    border-left: 5px solid #007bff;
    font-style: italic;
}

#quote p {
    margin: 0;
}

#quote cite {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
}

/* Footer Styles */
#footer {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#tribute-link {
    color: #007bff;
    text-decoration: none;
}

#tribute-link:hover {
    text-decoration: underline;
}

Our <blockquote> now looks distinct and professional, and the footer is clean and functional. We're almost there!

Step 4: Making it Responsive for All Screens

A modern website must be responsive. This means it should adapt its layout to fit the screen size, from a small mobile phone to a large desktop monitor.

Our current design is already quite responsive thanks to max-width: 100% on the image and using rem units. This is a "mobile-first" approach—it looks good on small screens by default. Now, let's add a media query to refine the layout for larger screens.

For instance, we can increase the font size of the main title on bigger displays.

Add this to the bottom of your styles.css file:

/* Media Query for larger screens */
@media (min-width: 768px) {
    #title {
        font-size: 3.5rem;
    }

    #tribute-info {
        padding: 0 40px;
    }
}

This code says: "When the viewport width is 768 pixels or more, apply these styles." Here, we're simply making the main heading larger. You could use media queries for more complex changes, like creating a two-column layout using Flexbox or Grid.

Step 5: Best Practices and Next Steps

You've built a functional and beautiful tribute page! Before you deploy it, let's review some best practices and consider what you could do next.

Accessibility (a11y)

  • Semantic HTML: We've already done this! Using tags like <main>, <figure>, and <footer> helps screen readers understand your page.
  • Alt Text: The alt attribute on your <img> is crucial for visually impaired users. Make it descriptive.
  • Color Contrast: Ensure your text color has enough contrast with its background color. Tools like the WebAIM Contrast Checker can help.

Code Quality

  • Formatting: Keep your HTML and CSS well-formatted and indented. It makes your code a pleasure to read.
  • Comments: Add comments to your CSS to explain complex parts (like our ::before pseudo-element). This is helpful for you and anyone else who looks at your code.

Deployment

Now it's time to show the world! You can easily host your project for free on services like:

  • GitHub Pages: Perfect if your code is already in a GitHub repository.
  • Netlify: Offers a simple drag-and-drop interface to deploy your site.
  • Vercel: Another excellent, user-friendly hosting platform.

Next Steps to Enhance Your Project

Want to take it further? Here are some ideas:

  1. Add CSS Animations: Make the timeline items or the title fade in on page load.
  2. Incorporate JavaScript: Add a button that reveals more information or an image gallery with multiple pictures.
  3. Refactor with a CSS Preprocessor: Try rewriting your CSS using Sass or Less to learn about variables and mixins.
  4. Create a More Complex Layout: Experiment with CSS Grid to create a more magazine-like layout for the biography and timeline.

Conclusion

Congratulations! You've gone from an idea to a fully realized, responsive web page. By building this tribute page, you've practiced the core skills of a front-end developer: structuring content with HTML, styling with CSS, and thinking about the user experience across different devices.

This project is more than just a technical exercise; it's a piece of your personal story as a developer. It's the first entry in your portfolio, a testament to your ability to build something from scratch.

Now, take what you've learned, choose your own hero, and build your own tribute page. Share it, be proud of it, and keep building.

Discuss on Twitter • View on GitHub