Design comparison
SolutionDesign
Solution retrospective
I struggled to make the project responsive, I couldn't change the image div width to match the container div. What are some best practices? What better elements could I have used instead of the ones I've used in this project?
Community feedback
- @burrijwPosted over 1 year ago
Hi Isaac, this is a great start! There are a couple accessibility issues you should address.
- You need a
<main>tag and all content should be inside landmarks where possible. Landmarks on W3Schools - You should have the image in your markup. It's meaningful to the page content because it's showing the product described by the text. Try adding it with the
<picture>element to serve different images responsively and have analt=""attribute. - Use a
buttonfor the "Add to Cart" button. Never use a div as an interactive element.
Marked as helpful2 - You need a
- @cuonglyyPosted over 1 year ago
Hello Isaac!
Congrats on finishing this challenge! Here are some suggestions:
- Try using semantic HTML to convey the structure of your document. For instance, you can change
<div class="wrapper">to<main class="main-content">, and<div class="attribution">to<footer class="attribution"> - Instead of adding the
<svg>element into HTML, you can reference it by using the<img>element:<img src="./images/icon-cart.svg" alt="Shopping cart">(Remember to provide an alt for accessibility!)
Hope this helps! Happy coding! (-:
Marked as helpful1 - Try using semantic HTML to convey the structure of your document. For instance, you can change
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord