Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Hello! I’ve checked all the requirements but this project seems very much unfinished. How can I improve this ? Looking forward to receiving all the constructive feedback.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="eng">
<head
  <meta charset="UTF-8" content="width=device-width, initial-scale=1.0" ></meta>
      <link rel="stylesheet" href="styles.css"></link>
      </head>
  <main id=main>
    <div id="main1">
    <section>
    <h1 id="title" value="Issa Rae">Issa Rae</h1>
    <p>The Awkward Black Girl</p>
    <div id="img-div">
      <img id="image" class="image" src="https://media-cldnry.s-nbcnews.com/image/upload/t_fit-1240w,f_auto,q_auto:best/newscms/2021_30/3494171/210726-issa-rae-jm-1409.jpg" alt="Issa Rae jpg">
      <figcaption>
    <div id="img-caption">Actress, writer, producer, and comedian.</div>
    </div></figcaption>
    </div>
    <div id="tribute-info">
      <h3> Here's a time line of Issa's accomplishments so far: </h3>
     <h4>
      <ul>
<li><strong>2011</strong> Released "Awkward black girl" on Youtube.</li>
<li><strong>2018</strong> Co-created, co-wrote and acted in the HBO television series Insecure. </li>
<li><strong>2018</strong> Rae was added to the annual Time 100 list of the most influential people in the world.</li>
<li><strong>2018-present</strong> Recieved or was part of several nominations for the Golden Globes Awards, NAACP to 5 Emmys.</li>
<li><strong></strong></li>
<i>"I found that every time asked permission the answer tended to be no,so had to make my own yeses."</i><br></br>
<i>-Issa Rae</i>
      </ul>
      </h4>
      <div>
        <h5>Click on this link for her <a id="tribute-link" href="https://en.m.wikipedia.org/wiki/Issa_Rae" value="wiki" target="_blank">wikipedia entry</a>.
      <h5></div></div>
    </div>
  </main>
  </html>


/* file: styles.css */

 #main { max-width: 1280px;
max-height: 100%;
margin: 30px auto;
padding: 15px;
background-color:#ce9dd9;
border-radius:5px;
font-family: sans-serif;}
#title {text-align: center;}
#main p{text-align: center}
#img-div {max-width: 600px;
margin: 0 auto;
padding: 15px;
background-color: #f5e1fd;
border-radius: 5px;}
#image {display: block;
max-width: 100%;
padding-bottom: 10px;
}
#tribute-info {max-width: 600px;
margin: 0 auto;}
#tribute-info > h3 {text-align: center;}
#tribute info > ul li {margin-bottom: 10px;
line-height: 30px;
}
h3{background-color:#ce9dd9;
}
h4 {background-color: #f5e1fd;}
h5 {text-align: center;
background-color:#ce9dd9;}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 12; SM-T875) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

1 Like
2

Hello! Although all the tests may pass on a Certification project, that doesn’t quite mean its done. If you take some more time to add your own creative flare to it and give it some finishing touches, that will help it look more complete. If I’m not mistaken, the tests that have to pass are just required for the project to be marked complete as you work toward getting your certification. Usually what I do is make sure most, if not all, the tests pass and then work from there to build the page into something that looks finished. You can also run your code through an html checker to make sure there are no errors: Ready to check - Nu Html Checker

1 Like
3

Hi @UmI

I think you should start cleaning your HTML a little bit, adding a <body> element too, and removing the <h4> element, because it is just holding more elements inside. Closing you section element. Correcting the meta syntax…:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Just check it, just in case I have missed something.

Also you could use <blockquote> element for her quote instead <i> element for more semanticly correct mark up. You can check how MDN does here: <blockquote>: The Block Quotation element - HTML: HyperText Markup Language | MDN

Apart of that, in your CSS, you could play with letter sizes and white space around sections or elements, and using margin-bottom, for example, for separate sections of your pages. For example:

h1 {
  font-size: 3em;
  font-weight: 900;
}

h3,
h4,
h5 {
   padding: .5em;
}

Also remember that any heading marks importance but not size or style, for example, you could have a h5 visually bigger than your h1, and the browser still would know the h1 is the most important heading of your site. In this case, it works fine this way, because she is the protagonist and the main subject of this project.

You could add your general line-height in your body, and you should use relative units not pixels (like 1.4, witch it means 140%).

 body {
   margin: 0;
   padding: 0;
   line-height: 1.5;
 }

You could use the follow CSS rule to actually see all your boxes, I think it helps. You can use border too instead outline, but remember that border property it is part of the box model so the box size and layout could change a bit.

 * {
   outline: 2px solid yellow;
 }

I hope this helps and does not discourage you. :sweat_smile: Remember that after have a good HTML structure you can keep going and always can back to your projects and use your knew skills to improve it if you find necessary. But don’t worry much about it, just keep building things, the practice makes all us better :sunglasses:, you are doing great!! :muscle:

Please don’t get discourage for this long post, it seems my feedback doesn’t sound good sometimes. My only intention is trying to help you. :blush: I hope it helps!

Keep the good work and happy coding Uml!!

1 Like
4

You’re absolutely right. Thank you for the great advice. I will take some time and work on it now and will continue to work on it afterwards. Cheers!

1 Like
5

Oh thank you so much! I feel the complete opposite, I was stuck and happy that you’ve taken the time to look at it and give me some pointers. Im very much grateful and will get straight to work. :wink:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.