Tribute Page Feedback Please

Im in the very early stages of learning and any feedback would be most welcome. Especially on how to make it more fluid and less complicated. I feel like I over complicated the entire thing. Also not entirely sure how to post the code here so I will copy and paste from the files. Sorry!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a tribute Page to Miyamoto Musashi">
<meta name="author" content="Alex Hall">
<title>Miyamoto Musashi Tribute</title>
<link rel="stylesheet" href="main.css">
</head>
    <header id="header">    
        <h1 id="title">Miyamoto Musashi</h1>
 
    <nav id="page-links">
         <ul id="list-one">
        <li><a href="#tribute-info" class="nav-link">Bio</a></li>
        <li><a href="#timeline" class="nav-link">timeline</a></li>
        <li><a href="#additional-info" class="nav-link">Additional Info</a></li>
        </ul>
    </nav>
    </header>
 <main class="main">
    <h1><strong>Miyamoto Musashi</strong></h1>
   <p id="sub-heading">One of the greatest swordsman to ever live</p>

   <hr>


    <figure id="img-div"> 
        <img id="image" src="miyamoto.jpeg" alt="A painting of Miyamoto Musashi weilding his sword" width="500"> 
        <figcaption id="img-caption">
            <i>Here is a painting that depicts Miyamoto Musashi wielding his sword</i>
        </figcaption>
    </figure>

    <hr>

    <section class="bio" aria-label="bio" id="tribute-info" aria-labelledby="tribute-info">
        <h2>A Short Biography:</h2>
     <p>Miyamoto Musashi lived from 1584 to 1645. 
        From a very young age Miyamoto practiced martial arts at a Buddhist monestary with his uncle.
        He was well known as a philosopher, having written two novels that are still well known today. "Thirty-five instructions on strategy" and "The book of Five Rings". 
        His most notable quality however was his proficency with the sword. He even made his own style named nitō ichi-ryū which was a duel wielding technique.
        He fought in over 60 duels during his life and by his own words never lost a single one. Not only was he an accomplished duelist, he fought in wars, and worked as a foreman for construction.
        During his travels Miyamoto adopted two sons named Miyamoto Iori and Miyamoto Mikinosuke.
        He later died in Reigandō due to what is popularly believe to have been lung cancer. During his final moments he got those closest to him to help lift him out of bed.
         He then went on to take a kneeling position holding his sword in one hand and a cane in the other. 
         In this position Miyamoto took his final breaths.
    </p> 
    <div class="portrait">
     <img src="Miyamoto_Musashi_Self-Portrait.jpg" alt="self portrait" id="self-portrait" width="300" loading="lazy"></section>
    </div>
     <hr>

    <section id="timeline" aria-labelledby="timeline" class="timeline">
        <img src="Kanjisenki.jpg" alt="calligraphy" id="calligraphy" width="80" loading="lazy" class="calligraphy">
     <h2 id="ul-h2">Here is a brief timeline of Miyamoto Musashi's life:</h2>
        <ul>
            <li>1584 <strong>Miyamoto</strong> is born in Mimasaka or harima, Japan</li>
            <li>1591 Around this time his unlce took him to be raised by <strong>Buddhist</strong></li>
            <li>1597 He faces his first <strong>life/death</strong> duel against Arima Kihei</li>
            <li>1600 Is believed to have fought in the <a href="https://www.britannica.com/event/Battle-of-Sekigahara" target="_blank"> Battle of Sekigagara</a></li>
            <li>1605 He begins to travel and develop his own sword style known as <strong>nitō ichi-ryū</strong></li>
            <li>1611 He begins to practice zazen meditaion</li>
            <li>1612 On a small island off the coast of Japan his arguably most famous duel took place against <strong>Sasaki Kojirō</strong> using only a wooden sword </li>
            <li>1614 he participated in the war between the Touotomi and the Tokugawa</li>
            <li>1615 He enters the service of Lord Ogasawara Tadanao as a construction supervisor, and began to teach fencing. During this time he also adopted a son named <strong>Miyamoto Mikinosuke</strong></li>
            <li>1622 Miyamoto adopts another son named <strong>Miyamoto Iori</strong> during his travels in Yamagata</li>
            <li>1626 His adoptive son <strong>Mikinosuke</strong> follows the tradition of <strong>Junshi</strong> and commits Seppuku</li>
            <li>1630 Enters into the service of Lord Hosokawa Tadatoshi</li>
            <li>1637 Serves in the Shimabara Rebellion</li>
            <li>1641 He writes Hyoho Sanju-go ("Thirty-five instructions on Strategy")</li>
            <li>1642 He began to suffer attacks of <a href="https://en.wikipedia.org/wiki/Neuralgia">neuralgia</a></li>
            <li>1643 he retired to a cave named Reigandō as a hermit to write Go Rin No Sho ("The Book of Five Rings")</li>
            <li>1645 After fighting in over 60 duels and serving in multiple wars Miyamoto Musashi dies in Reigandō</li>
        </ul>
         
         
    </section>


    </main>

   

<footer>
<div id="additional-info" aria-labelledby="additional-info">
    <dl>
        <dt>If you would like to know more about Miyamoto here are a couple of links:
             <dd><a id="tribute-link" href="https://en.wikipedia.org/wiki/Miyamoto_Musashi#Bibliography">Wikipedia</a></dd> 
             <dd><a id="tribute-link2" href="https://www.newworldencyclopedia.org/entry/Miyamoto_Musashi"> New World Encyclopedia</a></dd> 
        </dl>
    </div>
</footer>
</html>


* {
      scroll-behavior: smooth;
    }

  
  main {
    background-color: #232222;
    color: #f1f1f5;
    font-family: Helvetica, sans-serif;
    margin: 0;
    text-align: center;
   
  }
  
  header {
    width: 100%;
    height: 50px;
    background-color: #5b0707;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
  }
  

  
  header > h1 {
    color: #f1be32;
    font-size: min(5vw, 1.2em);
    text-align: center;
  }
  
  nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
  }
  
  nav > ul {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
  }
  
  nav > ul > li {
    color: whitesmoke;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
  }
  
  nav > ul > li :hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
  }
  
  li > a {
    color: inherit;
    text-decoration: none;
  }
  
  main {
    padding-top: 50px;
    
  }
  h1, h2 {
    text-align: center;
    text-decoration: underline;
    
  }

  .bio {
    text-align: center;
  }

  p {
    display: inline-block;
    text-align: left;
    flex-wrap: wrap;
    max-width: 800px;
  }

  

  figure {
    background-color: #5b0707;
    color: #f1be32;
    text-align: center;
   }


  a {
    color: #f1be32;
  }

  a:visited {
    color: lightgray;
  } 

  .timeline{
    text-align: center;
  }

  ul {
    display: inline-block;
    flex-wrap: wrap;
    max-width: 500px;
    text-align: left;
  }

  #calligraphy {
    float: right;
    margin-right: 50px;
    vertical-align: middle;
    text-align: center;
  }

  #image {
    width: 100%;
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    display: inline-block;
  }
  
  div {
    text-align: center;
  }

  #self-portrait {
    display: inline-block;
 
  }
  
  footer {
    background-color: #5b0707;
    display: flex;
    justify-content: center;
  }
 
 dl {
    color: #f1be32;
 }

 dl > dd > a {
    color: whitesmoke;
 }

 dd :hover {
    background-color: #dfdfe2;
    color: #1b1b32;
    cursor: pointer;
 }
 

It looks like you’ve put together a solid tribute page for Miyamoto Musashi! Here are a few suggestions to make it even more fluid and less complicated:

  1. Consistency in Styling: Ensure consistent styling throughout the page. For example, you have different font sizes and styles for headings (<h1>, <h2>), so you might want to standardize them.

  2. Organize CSS: Consider organizing your CSS styles in a more structured way, such as grouping styles for similar elements together.

  3. Semantic HTML: Use semantic HTML elements where appropriate. For instance, you can replace <div class="portrait"> with a more semantic tag like <section> or <div class="bio">.

  4. Spacing and Alignment: Pay attention to spacing and alignment to make the content more visually appealing. For example, you might want to add some margin or padding to certain elements for better spacing.

  5. Accessibility: Ensure your page is accessible to all users, including those using screen readers. Check if your images have appropriate alt text and if all interactive elements are keyboard accessible.

  6. Mobile Responsiveness: Test your page on different screen sizes to ensure it looks good and functions well on various devices.

  7. Code Optimization: Look for opportunities to optimize your code for performance and readability. For example, you can combine multiple CSS rules into a single rule where applicable.

Overall, your page looks great, and these suggestions can help you refine it further! Feel free to ask if you need help with any specific aspect or if you want more detailed feedback on certain parts of your code.

Thank you! I was getting a little lost in the css I tried to make it got with the layout of the web page itself but failed.

With the ul and #calligraphy set to float right. How can I get the text back to center or is there a better way to make that look?

To bring the text back to the center while keeping the ul and #calligraphy floated right, you can use the text-align property on the parent container. Here’s how you can adjust your CSS:

.timeline {
  text-align: left; /* Align text to the left */
}

ul {
  display: inline-block;
  max-width: 500px;
  text-align: left; /* Align text to the left */
}

#calligraphy {
  float: right;
  margin-right: 50px;
  vertical-align: middle;
  text-align: center; /* Align text to the center */
}

By setting the text-align property to left for the .timeline and ul elements, you ensure that the text inside them aligns to the left. Meanwhile, for the #calligraphy element, you can keep it floated right while aligning the text inside it to the center.

Adjust the margin-right value of #calligraphy as needed to ensure proper spacing between the floated element and the text. This should help you achieve the desired layout while maintaining the floated elements on the right side.
@AHall56

thank you! sorry for late reply took a few days break now back to study time haha

1 Like