@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
- To center you content to your page, add the following to your Body Element:
body {
min-height: 100vh;
display: grid;
place-content: center;
}
-
To identify the main content of you site you will want to encase your entire component inside a Main Element.
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
This challenges requires the use of two images 🎑 for different breakpoints. The Picture Element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.
-
The old price 🏷 is not being announced properly to screen readers. You want to wrap it in a Del Element and include span element with an sr-only text explaining that this is the old price.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
Marked as helpful
@Galope-Jhean
Posted
@vcarames Hi! thanks a lot for these suggestions, I was able to fix some of it but still have to try the picture thingy, I will learn it in the future. For now, I was able to apply most of your suggestions and I was very happy with the changes. Thanks again!
@VCarames
Posted
@JheanKhendrick
You can always look at how I did it in my challenge to how I implanted the images.
I'm glad that I was able to help! Keep it up!
@Galope-Jhean
Posted
@vcarames Hi again! I managed to add the picture element now, I had fun learning it. Thanks a lot!