@Dudeldups
Posted
Hello!
Here are some tips to improve your solution:
You should read through the basics of semantic HTML again, there are some errors that are covered in very basic beginner tutorials. For example, a website should only have one <h1> heading. The product name does not qualify for an h1 level heading. In this single component, you don't really have an h1 so either leave it away or add one outside of the card and hide it visually with CSS.
Headings should be in sequential, descending order. If you have a product category description like "Perfume" in this case, just wrap it in a <span> or <p>. In a real world application, the perfume's name would be a h3 or even lower, depending on the previous elements on the site. In this small example, you would probably choose an <h2>.
The description below does not need to be wrapped in an <article> element. <article> and <section> elements should always contain a heading.
Your choice of a <section> could rather be an <article> or just a simple <div> (or you change the section and the div.card, this would also make sense.
To show that one price is not the current price (or old price) and the text is struck through, you can use the <del> or <s> elements.
Please take the time to go through your solution and try to improve it. As a small tip, you can visit the challenge hub after you completed a challenge and look at other ppl's solutions. Look for some that have comments on them and see if someone gave feedback to that person, there's a high chance that you can also learn from that 🙂
Hope this helps, happy coding 👾
Marked as helpful
@i-prkr
Posted
@Dudeldups This is extremely helpful thank you so much! I appreciate your explanations and the time you put into your response. Being new to FE Mentor I also realise I haven't looked at the challenge hub yet so that is a great tip!! Thanks again!
