@jonathan401
Posted
Hey there @winprn 👋🏽 congrats on completing this challenge 🎉🎉🎉. You did really well. Just a few things from me 😄.
- This isn't really a feedback but you should consider checking out the report on your solution. This has help me a lot 💪🏿. For example, you should wrap your whole card in
mainelement. - You could consider changing the
.card-titlewhich is currently apelement to anh1element. This is because it is required that every page contains at least oneh1element for easily navigation of the page by other users who may have some disabilities. - When I checked out your solution on my mobile phone, the card was stretched over the screen. To fix this, instead of adding a definite to the card, you could consider giving a
max-widthstyle rule to the card instead of awidthto the card. This will make sure that the card easily 'contracts' on mobile screens and then on larger screens you remove thismax-widthand adding a definite width of 37.5rem (which you defined in your CSS for larger screens). That is all from me 😄. Once again nice work 👏🏾. Happy Coding 🎉
Marked as helpful
@winprn
Posted
@jonathan401 Hi, thank you for your feedback. At first, I did make the .card-title as a class of the h2 element, but then I changed it to an a element to make it better for viewing its detail (like other shopping websites).
I wrapped all the content inside a main element as you said, and also changed the style. Thank you once again!
@jonathan401
Posted
@winprn You're welcome. You could also achieve the same effect when you make it as .card-title a h1 element since you could use CSS to style it to make it look like a link. But I trust your decision 💪🏿. So what works best for you but also try to make the sites you create accessible as well 😇.
