@brukmg
Posted
You’ve done a great job! I love that you used semantic HTML elements it’s awesome for both readability and SEO optimization.
In the HTML section, the main element is used as a card, but there should be an additional div to act as the product container. For images, it's better to use a single img element and apply styling for various screen sizes as needed. Also, the 'Add to cart' element should be a button, not a div. Additionally, it would be more appropriate to wrap the container div with the class attribution in a footer element.
For CSS, using 62% for the font size is too large, it’s recommended to use units like px for better control. The property display: flex on the body element is unnecessary. Instead, apply flex to the main element if you're centering the product card. To make the code more maintainable, consider using CSS variables for colors instead of hard coding them multiple times, which will make updates easier. Lastly, you've only implemented a media query for one screen size, but it would enhance responsiveness if you added queries for screen sizes like 768px, 1024px, 1140px, and more.
Lastly, it's not best practice to place the CSS file in the assets folder, as it's a core part of your web app's program files and not just an asset.
@Ejiro-Frances
Posted
@brukmg Thank you for taking the time to look at my code.
- I will add an additional container for the product container.
- The images provided for the mobile view is different from the one provided for the desktop view. That is why I used both images. I would appreciate a better way to present them in my code.
- I have corrected the attribution container.
- I used % instead of px for font flexibility.
- The display on the main is to center the main container because I built mobile first and I wanted it centered.
- I would work on avoiding repetitions when coding for the colors.
- I used only one media query because the project should look the same on all screen sizes that is not a mobile device.
- Thank you for correcting my CSS folder placement. I will remove it and take note moving forward,
Thank you for your feedback.
