My first project ever! Tribute Page. Feedback appreciated :)

Hey guys, I tried (and will keep trying) to be fancy and apply different things I’ve learned so far. I’m still overwhelmed by a lot of things, and I’m sure this page isn’t written as efficiently as can be, but for my first project I’m okay with this result.

I know this is supposed to be responsive, and hopefully it is. Though maybe I should be using percentages rather than fixed numbers with pixels?

Anyway, I did Read-Search-Ask my way through this whole project, and it was fun!

But I still have a few questions hopefully I could get help on understanding,

  • Why do we need to create id’s for things we don’t really use elsewhere. Like id=title or id=tribute info or id=image to name a few…
  • What is the difference between the elements div and figure?
  • Why do we need to id our main element with simply the same word, main?
  • Why do I need my display set to block to pass User Story #8?

EDIT: Yikes, I just checked it out on my phone and it is horrible. I am aware, and will learn how to fix this! Thanks guys.

1 Like

Hey there!

I poked around on your page both on mobile and desktop. I’m brand new with everything around here still, so sadly I can’t give you constructive criticism on your code. I did want to say though the phone layout doesn’t look bad! The only thing I noticed is where you have “The Milestones of a Legend,” it overlaps from the timeline background onto the page background a bit. Besides that though it looks great!

1 Like

Welcome to the forums @arm. Your page looks good.
I’ll try and answer your questions.

They could be used for styling. For instance, you styled the h1 element where you could just have easily used the id instead.

div is a non-semanic element whereas figure is semantic. Semantic elements are new and give meaning to the developer and the browser.
Google something like “html semantic tags”. There’s more to read than I could type.

Your main element didn’t have to be main. It could have been another semantic name like section or article depending on how you might have used it if this tribute page was part of something larger.
It could have also been something non-semantic like a div.

I’m not seeing the horrible part. Maybe in your #tribute-info you could use relative units (em, rem) for the border-radius rather than hardcoding a pixel value.

1 Like