Published on

Portfolio Project: Create a Compelling Tribute Page for Your Hero [A Beginners Guide]

Authors

'Portfolio Project: Create a Compelling Tribute Page for Your Hero [A Beginners Guide]

Learn to build your very first web development portfolio project. This step-by-step guide shows you how to create a beautiful and responsive tribute page using just HTML and CSS.

Table of Contents

Your First Step into Web Development: The Tribute Page

Welcome, aspiring developer! You're standing at the starting line of an incredible journey into web development. It's exciting, a little intimidating, but immensely rewarding. And the best way to learn is by doing. That's why your first portfolio project is so important. It’s not just about writing code; it's about building something real, something you can be proud of.

Enter the Tribute Page.

This classic beginner project is the perfect entry point. Why? Because it’s personal, focused, and teaches you the absolute cornerstones of the web: HTML for structure and CSS for style. You'll take a blank canvas and turn it into a heartfelt homage to someone you admire. It's a project with a purpose, which is the best motivator there is.

In this comprehensive guide, we'll walk you through every step of creating a compelling tribute page. We'll cover:

  • Planning and Content Gathering: The essential prep work before you write a single line of code.
  • Structuring with Semantic HTML: Building a strong, meaningful foundation for your page.
  • Styling with Modern CSS: Bringing your page to life with colors, fonts, and layout.
  • Responsive Design & Best Practices: Ensuring your page looks great on any device and is accessible to everyone.

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

Section 1: The Blueprint - Planning Your Tribute

Before we dive into the code editor, let's talk strategy. A great final product starts with a great plan. Rushing into code without a clear vision is like trying to build a house without a blueprint.

Choosing Your Hero

This is the fun part! Your hero can be anyone: a scientist, an artist, a historical figure, a family member, or even a fictional character. The key is to choose someone who genuinely inspires you. Your passion for the subject will shine through in the final design.

For this guide, we'll create a tribute page for Dr. Norman Borlaug, the agronomist and Nobel laureate credited with saving over a billion people from starvation. He's a fantastic subject because his story is powerful and there's plenty of public information and imagery available.

Actionable Tip: Pick a subject with readily available high-quality photos and well-documented information (like a detailed Wikipedia page). This will make content gathering much easier.

Gathering Your Content

Once you've chosen your hero, it's time to become a researcher. Open up a document and start collecting the key pieces of your story:

  1. The Main Title: How will you introduce your hero? E.g., "Dr. Norman Borlaug".
  2. A Subtitle or Tagline: A short, impactful sentence that summarizes their legacy. E.g., "The Man Who Saved a Billion Lives".
  3. A Hero Image: A powerful, high-resolution photo of your subject. This will be the centerpiece of your page.
  4. A Timeline of Key Events: This is the core of your tribute. Collect 5-10 significant milestones from their life and career. For each, you'll want a date/year and a brief description.
  5. An Inspiring Quote: Find a powerful quote by or about your hero. This adds a personal touch.
  6. A Link for More Information: A link to a comprehensive source like a Wikipedia page or an official foundation website.

Spending 30 minutes on this step will save you hours of frustration later. With our content ready, we can now build its digital home.

Section 2: Laying the Foundation with Semantic HTML

HTML (HyperText Markup Language) is the skeleton of every webpage. It gives our content structure and meaning. We'll use semantic HTML, which means choosing tags that describe the content they hold. This is great for accessibility and SEO!

Let's start with the basic boilerplate. Create a file named index.html and add the following:

<!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>
    <!-- Our content will go here! -->
</body>
</html>

What's happening here?

  • <!DOCTYPE html>: Declares this is an HTML5 document.
  • <html lang="en">: The root element. lang="en" tells the browser the page is in English.
  • <head>: Contains meta-information about the page (not visible to the user).
  • <meta charset="UTF-8">: Ensures characters display correctly.
  • <meta name="viewport">: A crucial line for responsive design, making the page adapt to different screen sizes.
  • <title>: The text that appears in the browser tab.
  • <link rel="stylesheet" href="styles.css">: This connects our future CSS file to our HTML.
  • <body>: This is where all our visible content will live.

Building the Structure

Now, let's add the content we gathered into the <body>. We'll use semantic tags to define each section.

Here is the complete HTML structure for our tribute page. Replace the comment <!-- Our content will go here! --> with this code:

<main id="main">
    <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, third from the left, trains biologists in Mexico on how to increase wheat yields."
        />
        <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="headline">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. Over the next 16 years, his team breeds 6,000 different strains of disease-resistant wheat - including different varieties for each major climate on Earth.</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>2009</strong> - dies at the age of 95.</li>
        </ul>
        <blockquote cite="http://news.bbc.co.uk/2/hi/in_your_own_words/8255953.stm">
            <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>
    </section>

    <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>
</main>

A Quick Breakdown of Our Semantic Tags:

  • <main>: Wraps the primary content of the page.
  • <h1>: The main heading. You should only have one h1 per page.
  • <figure>: Used for wrapping a self-contained piece of content, like an image.
  • <img>: The image itself. The src is the source URL, and alt is critical for accessibility, describing the image for screen readers.
  • <figcaption>: A caption for the <figure>.
  • <section>: A thematic grouping of content, in this case, our timeline and quote.
  • <ul> & <li>: An unordered list and its list items, perfect for a timeline.
  • <blockquote>: Represents a section that is quoted from another source.
  • <a>: An anchor tag, or link. target="_blank" makes it open in a new tab.

If you open index.html in your browser now, it will look... plain. But that's good! The structure is solid. Now it's time to paint the house.

Section 3: Bringing it to Life with CSS

CSS (Cascading Style Sheets) is where the magic happens. It's how we control colors, fonts, spacing, and layout. Create a new file in the same folder as your HTML and name it styles.css.

Foundational Styles

Let's start with some general styles that will apply to the whole page. This helps create a consistent look and feel.

/* styles.css */

/* Apply a basic font and background to the whole page */
html {
    font-size: 10px; /* Base font size for easy rem calculations */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.6rem; /* 1.6 * 10px = 16px */
    line-height: 1.6;
    text-align: center;
    color: #333;
    margin: 0;
    background-color: #f4f4f4;
}

/* A 'rem' is a unit of measurement relative to the root (html) font size. It's great for scalability. */

Styling the Main Content Sections

Next, we'll style the main containers to create a clean, centered layout that's easy to read.

/* Center the main content and give it a nice background */
#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #ffffff;
}

/* Make headings look distinct */
h1 {
    font-size: 4rem;
    margin-bottom: 0;
}

p {
    font-size: 1.8rem;
}

@media (max-width: 460px) {
    h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

Here, we've introduced our first media query. @media (max-width: 460px) means "apply these styles only when the browser window is 460 pixels wide or less." This is the foundation of responsive design!

Styling the Image and Caption

The hero image is a key focal point. We need to make sure it scales properly and the caption is styled nicely.

/* Style the image container */
#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}

/* Make the image responsive */
#image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Style the image caption */
#img-caption {
    margin: 15px 0 5px 0;
    font-size: 1.4rem;
}

The max-width: 100% and height: auto on the #image is a powerful combination. It tells the image: "Never be wider than your container, and adjust your height proportionally." This single-handedly prevents horizontal scrolling on mobile devices.

Styling the Timeline and Quote

This section contains the most text, so readability is paramount. We'll use max-width and margin: 0 auto to create a comfortable reading width for the timeline.

/* Style the tribute information section */
#tribute-info {
    max-width: 600px;
    margin: 0 auto 50px auto;
    text-align: left;
}

#headline {
    margin: 50px 0;
    text-align: center;
    font-size: 2rem;
}

/* Style the timeline list */
ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    line-height: 1.8;
}

li {
    margin: 16px 0;
}

/* Style the blockquote */
blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
    border-left: 5px solid #ccc;
    padding-left: 20px;
}

cite {
    display: block;
    margin-top: 10px;
    font-size: 1.4rem;
}

Notice how we set text-align: left for the timeline and quote, overriding the text-align: center from the body. This is because long blocks of centered text are difficult to read.

Finally, let's style the link at the bottom.

/* Style the final link */
h3 {
    font-size: 1.6rem;
}

a {
    color: #477ca7;
}

a:visited {
    color: #74638f;
}

And that's it! If you refresh your index.html page, you should see a beautifully styled, responsive tribute to Dr. Norman Borlaug. You've successfully combined structured HTML with thoughtful CSS to create a complete webpage.

Section 4: Best Practices & Going the Extra Mile

Congratulations on building a functional and attractive webpage! Now, let's talk about a few things that separate good developers from great ones.

1. Accessibility (a11y)

Web accessibility means making sure your websites are usable by everyone, including people with disabilities. We've already taken some important steps:

  • Semantic HTML: Using tags like <main>, <figure>, and <h1> helps screen readers understand the page layout.
  • Alt Text: Our alt attribute on the <img> tag is crucial for visually impaired users.
  • Color Contrast: Ensure your text color has enough contrast against your background color. You can use a tool like the WebAIM Contrast Checker to verify your choices.

2. Responsive Design

We added one media query, but you can add more! A common practice is to have "breakpoints" for tablets and larger desktops. Try resizing your browser window from wide to narrow. Does everything look good? If not, you can add more media queries to fine-tune the layout.

Example for a tablet breakpoint:

@media (min-width: 768px) {
    /* Styles for tablets and up */
    body {
        font-size: 1.8rem;
    }
    #main {
        margin: 50px auto;
    }
}

3. Deploying Your Project

Your project isn't finished until you share it with the world! This is how you build a portfolio. There are many fantastic, free services to host simple static sites like this one:

  • GitHub Pages: Perfect if you're already using Git and GitHub. You can host a site directly from a repository.
  • Netlify: Offers a super-simple drag-and-drop interface. Just drop your project folder in, and it's live.
  • Vercel: Another excellent, developer-friendly hosting platform.

Getting your first project online is a massive confidence booster. Do it!

4. Ideas for Enhancement

Want to push this project further? Here are a few ideas:

  • Add a photo gallery: Use CSS Grid or Flexbox to create a responsive gallery of more images.
  • Embed a video: Find a YouTube documentary or interview and embed it on the page.
  • Advanced CSS: Experiment with hover effects on links, subtle animations on page load, or a more complex color palette.
  • Use a CSS Framework: As a next step, try rebuilding this page using a framework like Bootstrap or Tailwind CSS to see how they can speed up your workflow.

Conclusion: Your Journey Has Begun

You did it. You took an idea, gathered content, structured it with HTML, styled it with CSS, and learned about the best practices that power the modern web. This tribute page is more than just your first project; it's a testament to your ability to learn, build, and create.

Be proud of what you've accomplished. Share it with friends, family, and the developer community. Every developer, no matter how senior, started with a page just like this one.

So, what's next? Keep building. Keep learning. The web is your canvas. Go create something wonderful.

We'd love to see what you built! Share a link to your tribute page in the comments below.

Discuss on Twitter • View on GitHub