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
1 Like
#10

ok thank you will do that.

#11

thank you :slight_smile: ok so how should i write that wikipedia entry link.

#12

but please can you like help me just correct the mistakes like a sample of the code that needs to be corrected.

#13

Did you read the links that were attached? Between reviewing the lesson and reading the other link you should get an idea of how to rewrite the link so it’s accessible to everyone.

Are you not understanding what needs to be corrected after running your code through the W3C validator? It’s telling you where the errors are.
What is it that you don’t understand?

1 Like
#14

thank you… but now the only error i have is this: Element p not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

#15

so what do i use to show that that line is a paragraph

#16

Have you saved your pen? I’m seeing a lot of errors but not that one.

Without seeing the error I can say that the only child element of ul is the li element. Why not pull the p element outside of the unordered list?

1 Like
#17

no i am still sorting out the errors

#18

You can save as you edit.

Other than that I can only guess. See my previous post.

#19

okay let me try it now

#20

ok thanks i will do that