Melvin Aguilar ๐ง๐ปโ๐ปโข 61,220
@MelvinAguilar
Posted
Hi @OmarAdelAttia ๐, 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="product_card">
.
- Use
<footer>
instead of<div class="attribution">
. The<footer>
element contains authorship information.
- Use an h1 tag for your solution. The
<h1>
element is the main heading on a webpage, also, there should only be one<h1>
tag per page.
<h1 class="product_name">Gabrielle Essence Eau De Parfum</h1>
- Always avoid skipping heading levels; Always start from
<h1>
, followed by<h2>
, and so on up to <h6> (<h1>,<h2>,...,<h6>).
- You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.
Example:
<picture>
<source media="(max-width: 768px)" srcset="./assets/image-product-mobile.jpg">
<img src="./assets/image-product-desktop.jpg" alt="your_alt_text">
</picture>
Above all, the project is done well๐. I hope those tips will help you! ๐
Good job, and happy coding! ๐
1
Omar Adelโข 30
@OmarAdelAttia
Posted
@MelvinAguilar thanks a lot, Melvin, I really appreciate your suggestions and will try to consider them next time :D
1