https://codepen.io/obong003/pen/RwroNWo?editors=1100

Hey guys, please I’ll really appreciate your feedback on this Tribute page. Criticisms, comments all welcome.

Thank you. I’m nervous though. First-ever project.

Let’s look at this code:

*{
  box-sizing: border-box;
   font-weight: normal;
  margin: 0 auto 0 auto;
  padding: 0;
  max-width: 900px;
  
}

#main{
  background-color: rgb(255, 253, 246);
  font-family: 'Roboto Slab', sans-serif;
  margin: 0;
}

I would personally split this into a couple of different CSS blocks.

* { margin: 0; padding: 0;  box-sizing: border-box; }

.container {   max-width: 900px;   margin: 0 auto 0 auto; }

Then the #main could become a body { }.

Sorry, I don’t really understand. Are you suggesting I create additional tags and classes please?

I’ll give you some feedback but please note I’m just a beginner just like you but a few things I found that could help you are:

  1. Adding an id="image" to your image after the source url lets you pass all 10 FCC tests

  2. At the very end of your html you are using an <h3> tag that you don’t close after the <a> tag. Instead of using <h3> you can use the footer tag and and just change the font size in CSS. There is also an id in the h3 tag in the end that you don’t seem to use in the CSS.

  3. If you resize the window to smaller sizes some of the text in the footer seems like it doesn’t fit very well because of the height you have in your footer’s CSS. Try resizing your window to a small size (<400px) to see what I’m talking about. You can fix this with height: auto in the footer.

1 Like

Okay, thank you so much. I’ll follow this through.

Page looks good @Obong. Some things to revisit;

  • Make a meaningful title and put the link to your project in your post so that people can click on it.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • You have elements out of order. Maybe research what the HTML boilerplate should look like even though you don’t need it in codepen.
  • Run your HTML code through the W3C validator.
    • If you clean up as above then since copy/paste from codepen you can ignore the first warning and first two errors. If you don’t clean up as noted above then clean up everything.
    • There are HTML coding errors you should address. Elements out of order cause a fatal error.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • Review the lesson about giving meaningful text to links.
  • Make the page responsive