Tribute Page - Feedback Request

Just finished the tribute page certification project. I would love some feedback on the project and specifically areas for improvement.

The page is hosted on github at the following link.

here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute: Alexander the Great</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <header id="header">
        <nav id="page-links">
            <a href="#tribute-info" class="nav-link">Bio</a>
            <a href="#timeline" class="nav-link">Timeline</a>
            <a href="#additional-info" class="nav-link">Additional Info</a>
        </nav>
    </header>
    <main id="main">
        <h1 id="title">Alexander the Great</h1>
        <figure id="img-div">
            <img id="image" src="/alexander-img.jpg" alt="Partial Mosaic of Alexander the Great">
            <figcaption id="img-caption">Fragmented mosaic of Alexander the Great (found in the ruins of Pompeii)</figcaption>
        </figure>
        <section class="tibute-info" aria-labelledby="tribute-info">
            <h2 id="tribute-info">Biography</h2>
            <p>Alexander the Great (356-323 BC) was the king of Macedonia who conquered an empire that stretched from the Balkans to modern-day Pakistan. The son of King Philip II of Macedon and Queen Olympias, Alexander was educated by the philosopher Aristotle. He ascended to the throne in 336 BC and spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa. By the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to Egypt and into the northwest Indian subcontinent.</p>
            <p>Alexander is celebrated as one of history's most successful military commanders. His tactics and strategies are still studied in military academies around the world. Despite his early death at the age of 32 in Babylon under mysterious circumstances, Alexander's legacy as a powerful ruler and a brilliant strategist endures. His empire fragmented shortly after his death, but his conquests spread Greek culture throughout the known world, marking the beginning of the Hellenistic period which featured a blend of Greek, Middle Eastern, and Asian cultures.</p>
        </section>
        <div id="section-separator"><img class="banner" src="/banner-1.jpeg" alt=""></div>
        <section class="timeline" aria-labelledby="timeline">
            <h2 id="timeline">Timeline</h2>
            <ul id="ul-timeline">
                <li>356 BC: Alexander the Great is born in Pella, Macedonia, to King Philip II and Queen Olympias.</li>
                <li>343 BC: Aristotle begins tutoring the young Alexander, instilling in him a love for knowledge and the arts.</li>
                <li>336 BC: Alexander ascends to the throne of Macedonia after the assassination of his father, Philip II.</li>
                <li>334 BC: Begins his conquest of the Persian Empire with a victory at the Battle of Granicus.</li>
                <li>333 BC: Defeats Persian King Darius III at the Battle of Issus.</li>
                <li>332 BC: Captures Tyre after a seven-month siege and then Egypt, where he is proclaimed a pharaoh and founds the city of Alexandria.</li>
                <li>331 BC: Achieves a decisive victory at the Battle of Gaugamela, leading to the fall of the Persian Empire.</li>
                <li>326 BC: Wins the Battle of the Hydaspes River against King Porus in India; his troops refuse to march further east, prompting their return.</li>
                <li>324 BC: Holds a mass wedding at Susa to unify his Macedonian and Persian elites; begins planning further campaigns.</li>
                <li>323 BC: Dies in Babylon at the age of 32 under mysterious circumstances, leaving his empire without a clear successor, which eventually leads to its division among his generals.</li>
            </ul>
        </section>
        <div id="section-separator"><img class="banner" src="/banner-2.jpeg" alt=""></div>
        <section class="additional-info" aria-labelledby="additional-info">
            <h2 id="additional-info">Additional Resources</h2>
            <p>Don't forget to checkout Arrian of Nicomedia's <a href="https://www.gutenberg.org/files/46976/46976-h/46976-h.htm" target="_blank" id="tribute-link">work</a> on Alexander the Great</p>
        </section>
    </main>
</body>
</html>

here is the CSS:

@media (prefers-reduced-motion: no-preference) {
    * {
      scroll-behavior: smooth;

    }
  }

body {
    font-family: 'Open Sans', sans-serif;    
    margin: 0;
}

nav {
    position: fixed;
    display: flex;
    justify-content: space-around;
    height: 35px;
    width: 100%;
    background-color: #B4B4B8;
    top: 0;
    margin: 0;
    align-items: center;
    gap: 100px;
}

main {
    width: 80%;
    margin: 0 auto;
}

#title {
    margin-top: 50px;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-size: 24px;
}

.nav-link:hover {
    background-color: white;
    color: #B4B4B8;
    cursor: pointer;
}

#image {
    height: auto;
    width: 90%;
    max-width: 100%;
    display: block;
    margin: 5px auto;
}

li {
   list-style-type: none;
   margin: 5px 0; 
}

h1, h2 {
    text-align: center;
}

.banner {
    width: 100%;
    height: auto;
    padding-top: 20px;
}

Looking forward to hearing what people think! :slight_smile:

Thanks,
David Bentley

Hi David, I’ve looked over your code and checked out the live site. It’s really good. You’ve written some really clean code. I particularly like how you’ve opted for using semantic elements instead of just using div tags.
Keep up the good work!

Your tribute page for Alexander the Great looks well-structured and informative. Here are some feedback and suggestions for improvement:

  1. Semantic HTML: You’ve used semantic HTML elements like <header>, <nav>, <main>, <section>, <h1>, <h2>, <figure>, and <figcaption>, which is great for accessibility and SEO. Consider using <article> for each section of content if they can stand alone.

  2. Navigation: The navigation links are clear and provide easy access to different sections of the tribute. Consider adding smooth scrolling functionality for better user experience.

  3. Image Sources: Make sure to provide correct image sources (src) for the images (alexander-img.jpg, banner-1.jpeg, banner-2.jpeg). Currently, the src attribute is pointing to local paths (/alexander-img.jpg, /banner-1.jpeg, /banner-2.jpeg). Ensure that these images are accessible to users.

  4. Alt Attributes: You’ve added descriptive alt attributes for the images, which is good for accessibility. Ensure that the alt text accurately describes the images for users who cannot see them.

  5. Styling: Your CSS file (styles.css) seems to be linked correctly, but there are no styles provided in the code you shared. Ensure that the styles are applied appropriately to enhance the visual appeal of your tribute page.

  6. Link Target: You’ve used target="_blank" for the link to Arrian of Nicomedia’s work on Alexander the Great, which opens the link in a new tab. This is good for external links to prevent users from leaving your page entirely.

  7. Grammar and Spelling: Double-check the text content for any grammar or spelling errors to ensure professionalism and clarity.

Overall, your tribute page provides a good overview of Alexander the Great’s life and achievements. Implementing the suggested improvements will further enhance the user experience and overall quality of your project. Keep up the good work!

For CSS!
Your CSS looks well-organized and effectively styled. Here are a few suggestions for improvement:

  1. Consistency in Commenting: While your CSS is concise and easy to understand, consider adding comments to explain more complex or specific sections of your code, especially if you plan to revisit or share it with others.

  2. Responsive Design: Ensure that your styles are responsive across different screen sizes and devices. Test your page on various devices and screen sizes to ensure optimal display and functionality.

  3. Accessibility Considerations: While your styles are visually appealing, also consider accessibility. Ensure that the text has sufficient contrast against the background color for readability, and test your page with screen readers to ensure compatibility.

  4. Flexbox Alignment: You’ve used Flexbox for navigation alignment, which is great. However, consider using Flexbox or Grid for other layout components to maintain consistency and flexibility throughout your design.

  5. Typography: Your choice of font-family ('Open Sans', sans-serif) is suitable for readability. Ensure that font sizes and line heights are adjusted appropriately for different screen sizes to enhance readability.

  6. Margin and Padding: Pay attention to consistent spacing and margins throughout your design to maintain visual balance and alignment.

  7. CSS Specificity: Be mindful of CSS specificity to avoid unintended overrides and conflicts. Use classes and IDs appropriately, and consider using BEM (Block Element Modifier) or another naming convention for clarity and organization.

Overall, your CSS demonstrates good practices and effectively styles your tribute page. Keep refining and iterating on your design to enhance usability and visual appeal. Great job!

Thanks for the response! I greatly appreciate it!

2 Likes

Thank you for your responses!

1 Like

Your welcome! Keep it up.