I just did my first Tribute Page. Reviews please:)

Project Feedback
#1

Hello Everyone, I just did my first tribute page… can i get some reviews please :slight_smile:
https://codepen.io/Olamide977/pen/RwGYqvB

1 Like
#2

Hello @divineolamide977
Welcome from the freecodecamp forum.

Your webpage design is great and look soo amazing.
But there is something that you should change.
Your #img-div the figure element is a little bit wide. If you decease the width it would look better.
And in your css file you write the @media under each selector.
You can write only one in the bottom of all the code. It will be more tidy

1 Like
#3

Hey there @divineolamide977! Welcome to the FCC forums!

Your page looks great but there are a few issues:

  • Make sure you run your Html through the W3 code checker, there are multiple html errors to fix, although you can ignore the first few errors. Other errors such as the use of multiple use Id’s are errors that need to be fixed, in this case turning those id’s into classes. Just an example, here’s the link

Overall the page looks great and I can’t wait to see your next projects :smile:
Best,
Cy499_Studios

1 Like
#4

ok thank you! but please can you like give me a sample of it?

#5

thank you very much! but please can i get a sample of what you said i should correct?

#6 
<li>
  Musk Ranked No.1 on Businessperson of the Year 2020 List by Fortune Magazine.
        </li>
<li>
  On January 7, 2021, Musk was ranked as the wealthiest person in the world according to Bloomberg.
        </li>
        <ul>

That last

    element needed a / to complete it.

    Another would be the duplicate id’s

 <h3 id="headline">Here's a time line of Elon Reeve Musk's life:</h3>↩
    <ul>

<h4 id="headline">

You put the ID of “headline” on multiple elements, only classes can be applied to more than one element. Those are just some examples but there are many more, please go ahead and copy the entire html code and then place it into W3 for more errors you need to fix.

Hope this helped :smile:
Best,
Cy499_Studios

1 Like
#7

oh yeh… thanks i will do that right away!

#8

@divineolamide977 Sorry for late response. I am from different time zone.

The first one #img-div is a bit wide. Here look

image
image938×459 76.1 KB

You can’t see clearly with the background with white color so I changed to red.
If you decrease the width of it, it will look better.
You didn’t set the width in your CSS code. If you didn’t write the css will set the width value to auto by default.

And the second one here a sample from your code:

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

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

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

You can see that you add @media under each selector.
If you combine them it will be tidy.

And I saw a few more now.
Here you add <html> tag and <head> tag on the top of the html code.
image
The codepen has added the <html> tag, <head>tag and <body> tag for you in the iframe.
image

I think you add it after checking with w3c html checker.
If you are copying and pasting your code from codepen you must ignore the first three error. Because the first three errors are the errors about the html tag, head tag and body tag.

image
image1234×468 31.3 KB

Hope this make you understand more about my feedback

1 Like
#9

Welcome to the forums @divineolamide977. Your page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia entry” is not accessible