@MelvinAguilar
Posted
Hi @MauritzLM ๐, good job completing this challenge, and welcome to the Frontend Mentor Community! ๐
I have some suggestions you might consider to improve your code:
- Use the
<main>
tag to wrap all the main content in your solution instead of using<div class="card-container">
.
- Use
<footer>
instead of<div class="attribution">
. The<footer>
element contains authorship information.
- The image's proportions don't look good on my computer. To create two columns with flexbox, you can add the property
flex: 50%;
topicture
and.product-info
. More information.
.product-info, picture {
flex: 50%;
}
- You could use the <del> tag to display the old price:
<del class="normal-price">
<span class="sr-only">Old price: </span>$169.99
</del>
Note that I added the <span> with the sr-only
class to the del
element, this will provide more information about what your old price is about.
The sr-only
class is a class that you can add to hide content visually but is only visible to screen-readers.
Above all, the project is done well๐. I hope those tips will help you! ๐
Good job, and happy coding! ๐
Marked as helpful
@MauritzLM
Posted
Hi @MelvinAguilar, thank you very much for your feedback. I'll be looking into making these improvements.