Tribute Page - FreeCodeCamp first Project

So… This is my Tribute page about Freddie Mercury: https://codepen.io/eleonoralbasi/pen/bOGoeB
:musical_note:

Some feedback would be nice. Thanks in advance :smile:

1 Like

Front-end-wise, it’s a lovely page, and a great subject.

Behind the scenes, there are some things done that I might question. For example, you have:

<div id="main">
  <header>
    <h1 id="title"> Freddie Mercury</h1>
    <h2>The Legend</h2>
  </header>
</div>

Now, a header is a block-level element. And it’s the only one in the div id='main' tag – so you’re wrapping a box in a box. Why? I might look through your code and see if there are more needlessly nested elements. They won’t break in most modern browsers, but they are adding needless complexity to the code itself.

Second, you have an image, displayed like so:

<div id="img-div">
  <img id="image" src="https://i687.photobucket.com/albums/vv233/madebyfridah/Freddie%20Mercury/FreddieMercury14_zps51ca00df.jpg" alt="pic from photobucket">
   <div id="img-caption"> Freddie Mercury during a concert</div>
</div>

A similar way to present the same data might be:

<figure id="img-div">
  <img id="image" src="..." >
  <figcaption>Freddie Mercury during a concert</figcaption>
</figure>

figure is also a block-level element, will display exactly the same as a div, but is a more semantically meaningful tag. When using a text-based or alternately-accessible browser (for example, a screen-reader), it will know how to handle a figcaption, but probably not a div containing the caption.

As you move through building your portfolio projects, start looking at places where you use a lot of div tags. More and more, they are far less necessary. We have a new and more semantic version of HTML, which gives us tags like article, section, nav, header, footer and more. These tags are CSS accessible, and are far more readable and meaningful than divs within divs.

Not saying you NEED to use them, just saying, if you want to build a personal portfolio that both stands out and shows that you are a current-grade designer, they’re worth knowing.

Thank you very much for your suggestions! I appreciate.
I will try to fix the errors :slight_smile: