Tribute Page (fCC) – feedback

Code Feedback
1

Hello!

I am relatively new to coding, 12 days into the # 100DaysOfCode challenge and working through fCC’s Responsive Web Design course. I’m a student with background in art, graphic design and philosophy.

I have finished the first project, Tribute Page, and I’m looking for feedback (criticism) – especially when it comes to my code! I’ve used HTML/CSS validators before posting to save you all time on the more obvious problems, but as I’m a newbie, I don’t quite know the best practices and the mistakes I may be making.

Some notes:

  • I don’t know why the validator gave me “Parsing Errors” so I was not able to fix those,
  • some choices are simply due to the task’s requirements (e.g. using IDs – some are unnecessary for my structure/styling).

Thanks so much in advance if anyone’s willing to look over it!

2

This is a great tribute page. Colors flow nicely and it’s responsive. Great work!

1 Like
3

Thank you! :slight_smile: This time I actually remembered to test the responsiveness on phone, too.

4

Great look, and I love the subject matter. I like the card-style sections. That said, I can’t really give the good without some suggestions for “better”. :wink:

First, you use the following for your images:

<div class="img-divs">
  <img class="images" src="https://i.ibb.co/dWf6rDt/Mucha-Dawn.jpg" alt="Mucha's painting called 'Dawn'.">
  <p class="img-captions"><em>Dawn</em>, 1899.</p>
</div>

And that works fine, but it could be a lot more meaningful, and semantic. Your content should tell you what it is, and what it is meant to do:

<figure class="img-divs">
  <img class="images" src="https://i.ibb.co/dWf6rDt/Mucha-Dawn.jpg" alt="Mucha's painting called 'Dawn'.">
  <figcaption class="img-captions"><em>Dawn</em>, 1899.</figcaption>
</figure>

The content is exactly the same, but it becomes more relevant. The figure is the combination of an image, and its caption. The same can be done with your divs all over the place. You could easily do something more like:

<main id="main">
  <header>
    <h1>Alphonse Mucha</h1>
    <h2>Something else</h2>
  </header>
  <article>
    <section class="card">
      ...
    </section>
    <figure class="img-divs">
      ...
    </figure>
    <section class="card" id="tribute-info">
      ...
    </section>
    ...
  </article>
  <footer>
    <p>Learn more at ... | design by Ynne Black</p>
  </footer>
</main>

While we still have div tags, there are less and less situations where they are the more “appropriate” solution.

2 Likes
5

Thank you so much for taking the time to go through my messy code and writing up your suggestions for improving it! If I understood your suggestion correctly, I should use specialized elements instead of general ones whenever possible, right? I am not familiar enough with the use of these elements yet (article, section, figure, …) so it’s definitely something I will be looking into now & trying to implement in future!

6

That’s exactly what I’m saying. HTML5 provides us with a lot of tags that are far more meaningful than a generic div tag. If you take a look on the MDN (Mozilla’s developer docs, and something I refer to dozens of times a day), there’s a great article on semantic tags.

They become far more meaningful when you’re viewing the text of the page. I can see at a glance what each piece is intended to do – articles contain sections, figures contain images and captions, headers and footers and asides oh my! rofl

Best of luck, Ynne, and feel free to message if there are further questions.

1 Like
7

You did a beautiful job.

I don’t have any suggestions since I am learning too.

I like the use of div’s even if it could be more semantic according to another camper.

Your background in design should be a big advantage for you.

1 Like