Project Feedback

[vincentmaule]

Create a "Products" page for a fake online store

@egillespie Can you take a look at this? It's hosted here and meets the following criteria:

• [x] Place a nav element at the top of the page that includes (fake) links to other pages
• [x] Use the main element appropriately
• [x] Include three products your store sells, all listed on the same Products page
• [x] For each product, correctly use an article, header, and footer element
• [x] Use figure and figcaption to show what each product looks like
• [x] Each product includes a nav element with one or more links to related products (the links don't have to go anywhere)
• [x] Use an aside in one or more products to advertise a promotion or discount for that product

[egillespie]

Your page looks nice and I like the notes in the README file as well! 👏 There are also plenty of uses of semantic elements and I have some recommendations to use them even more. Can you try these out?

Put each product in a separate article

Since the content of each product on your page can stand entirely on its own without the other products, I think it makes sense to put each product in a separate article element.

Separating information in this way helps both search engines and assistive listening software like screen readers, giving you both SEO and accessibility boosts.

When you do this, I also recommend replacing your current article element on line 47 with a section element.

Replace the div elements in each product with semantic elements

Looking at the style classes on your div elements for each product, I see some opportunities to replace them with semantic elements. Here are some lines that stand out to me:

<div class="card-header bg-dark text-light">

<div class="card-body">

<div class="card-footer bg-dark text-light">

The div with card-header could be replaced with a header element, the card-body can be replaced with a section, and the card-footer could use a footer element. Making these changes will make it much easier for screen readers and scrapers to organize your page and make it easier to navigate.

Can you replace these div elements with semantically-fitting elements?

---

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! ☎️

[vincentmaule]

Made changed to the <main> element and fixed up some semantics.

[egillespie]

Nailed it! 🔨 This is a good demonstration of using main to wrap many article elements as well as applying styles directly to semantic elements without intermediate div tags. Awesome job! 🎉 :shipit: