Tribute page - All feedback is greatly appreciated!

Hi, everyone!

I’m finally done with my first project, and would greatly appreciate your feedback to help me keep improving :slight_smile:

2 Likes

Couple small points: You have h2 tags, which are great for secondary headings, but rather than using an h1, you’ve created a div with the id title. Why not make that an h1, as that is structurally what it is?

And speaking of structurally… I tend to hit on this a lot. There are a lot of new, semantic tags that we have in the HTML dictionary now: <nav>, <article>, <header>, <footer> and <section>, to name a few. They serve a real purpose – back in the day, our HTML was a wasteland of ugly div tags all over the place. Now, the HTML itself can, in many ways, be as readable and elegant as the actual presented page.

Here’s a possible skeleton page, that might illustrate the difference:

<nav id="nav-menu">
  <ul>...</ul> /* use your same ul/li structure here */
</nav>
<main id="main">
  <header>
    <h1 id="title">Name of Tributee</h1>
    <div id="subtitle">
        Something about them...
    </div>
    <figure id="img-div">
      <img src="..." alt="Picture..." id="image">
      <figcaption id="img-caption">Picture  of...</figcaption>
    </figure>
  <header>
  <article id="tribute-info">
    <section id="early-life">
      <h2>Early  Life</h2>
      ...
    </section>
    <section id="education">
      <h2>Education</h2>
      ...
    </section>
  </article>
  <footer>
    ... This could contain your 'find out more' section.
  </footer>
</main>

Now, rather than having a collection of div tags (and getting lost in your HTML), you have tags that are meaningful, and tell you their intent.

  • The tribute itself is an article.
  • Within that article there are a number of sections – early life, education, activism.
  • The main purpose of the article is in the header.
  • Any figures (images and captions) are contained in the ‘figure’ tag.
  • Information related to the article, like copyright or publish date, author info, or “further reading” might go well in a footer tag.

Not saying you NEED to, but at some point you may be using this in your portfolio – and you’re going to want to impress employers. I recommend doing so by making a page that really stands out, both in presentation and in code.

2 Likes

Thank you for taking the time to write this!

I was so focused on getting the ids right so the tests would pass, that I just dived my way through the whole thing.

I’ll definitely incorporate semantic tags so it’s more polished.

1 Like

I like the subject matter, and I think its a beautifully executed page. From a purely design perspective, it works nicely.

Largely, it’s a matter of replacing your div tags with semantic ones. And again, it is really not necessary – simply a forward-looking suggestion, and one I make often.

I will code to pass the challenge, but I usually can’t resist coming back to rewrite the code to make it more polished, more elegant. My code represents me, so I find it sensible to make it look as good as I intend to look.

Best regards! :smiley:

2 Likes

I’m bookmarking this page just for reference. You really explained this well! Thank you for you help on her project (and now on mine! haha)

Well, snowmonkey did a great job at helping you with your code. :clap:

I just have a small thing that would help while reading:

You have some run on sentences in your text. It’s not a coding thing and you might not have to write much in the future for clients (I think?), but you could break up a lot of your sentences. For example:

Enriqueta became a first-grade teacher at just 17 years of age and two years later she would complete her studies and graduate best of her class from Montevideo's Normal Institute for Young Women.

This could be broken up into:

Enriqueta became a first-grade teacher at just 17 years of age. Two years later, she would complete her studies and graduate best of her class from Montevideo's Normal Institute for Young Women.
1 Like

Glad I could help with an effective code sample.

And yeah, I tend to ramble. I generally try to stay on point, though. I’ve been writing and speaking publicly for years, and have to say that you aren’t the first to point that out.

That said, it’s sort of my style. :wink:

2 Likes

Just aesthetically, it looks wonderful! I like how you used the green bars to divide the page. And I like the sticky nav bar and the TOP element on the right side. Fabulous.

1 Like