Completed the Tribute Page challenge. Any feedback is appreciated

Code Feedback
1

Please check my project. Here is the link : https://codepen.io/sbhakuni/full/XzNdMm/ for feedback.

1 Like
2

@nutanBhakuni This is pretty good work here! I like your use of HTML5 semantic elements. :slight_smile: I see that you’re also using HTML escape codes. I like your font choice as well and that you’re using heading elements correctly.

For valid HTML, you’ll want to look at the Doctype and the Head and Body sections of FCC Beta. All HTML markup should have these elements.

Instead of using <section id="main">, can you use <main>? Also, you have the page header nested within your main section. I wonder if that could be moved above the main section? There’s some debate about whether or not it’s possible to have multiple <main>'s on a page (1, 2). That second link is actually pretty good in describing how to structure semantic elements, giving multiple use-cases for using <main> in relation to <header> and <footer> elements.

You’re using a lot of presentation elements in your HTML. Some of them may be better in your CSS. See Separation of Concerns to learn more.

You may want to consider not using id selectors in CSS.

I like the idea of giving all elements a border-radius. How does that affect <p> or <h2> elements, for example? Will it only impact those elements if they have a border? It seems like it couldn’t hurt to do it this way but it feels strange to me for some reason that I can’t articulate.

You have border-sizing: box-border; in your CSS. However, I think you mean to have the following (Source):

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

You’ve done really well here so I hope the above information helps you improve even more. :sunny:

3

Hey, thank you for reviewing the code. I really appreciate that, and I will have a look at those links for improvement.