Tribute Page on Emma Watson

Hello fellow freecodecampers! I just finished my tribute page with html + css grid.
Id love to recieve any critics to get better!

Im really happy with the result, and i have some things I wanna improve, but this is it for today.
Ill read you :raised_hands:

2 Likes

Beautifully done, and with some elegant CSS going on. Like the column approach for wider views. Very well done, first effort or otherwise.

Now, for the niggling. Be careful of re-using id’s. They should be unique, only one element on a given page should have a given id. For example, the title id is being shared between the div, and the h1 it contains. An improvement for that might be:

<header>
  <h1 id='title'>...</h1>
  <h2 id='subtitle'>...</h2>
</header>

The header tag will do exactly the same thing as the div, but it identifies the block, both title and subtitle, as a header. Further, this groups the header elements in a logical way, rather than having a div containing a single h1 element.

There are ways of simplifying the HTML, which will in turn help simplify your CSS.

Again, this is not a huge thing, the page looks great cosmetically, and I’m absolutely impressed with the effort.

I want to like it TWICE! Maybe more! :wink:

1 Like

@snowmonkey I might understand something wrong, but it looks like 2 different IDs have been used :

<div id="title_">
      <h1 id="title">Emma.</h1>
</div>

“Title” and “Title_”. No offense if I’m wrong, just trying to learn from stuff like this too. Something I don’t get though is that there’s a

#title_{
}

but no

#title{
}

I’m fairly new, and still far I think from being able to produce this Tribute page, but it’s well designed, from a purely esthetic approach. I can’t really discuss about your code yet. I love it though! :slight_smile:

1 Like

Hi there! First of all, thanks for commenting!
You are right, I corrected it now. I think I was trying something and then I forgot to change it. :sweat_smile::sweat_smile:

Just like @shalvus said, it’s two different ID’s, I might have been trying something and then forgot to clean that haha, so silly.

As you suggested, I tried your approach first, using header would be a better practice IMO, but I had already started with the grid, and it seemed a bit easier to do it this way for now (just being a bit lazy:sweat_smile: )
I’ll make sure I take it into account in the future though!

Thanks so much @snowmonkey!

1 Like