Product preview card component solution

Hey there! 👋 Here are some suggestions to help improve your code:

• The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.

• 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! 👻🎃

Great job you did there but there are a few things you may need to work on. Especially the overflow. Its too much. Since your display is flex you can use the 'flex-basis' function. Also set flex to rows on main view and column on media query. Other than that you are good to go. I wish you all the best.

Hi Ammar yasser, how are you?

Welcome to the front-end mentor community!

I really liked the result of your project, but I have some tips that I think you will enjoy:

• every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
• images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.

The rest is great!

I hope it helps... 👍

add a footer tag and add some margin in footer for attribution part

Very good solution, congratulations!! But you should check on your report, a few details can be improve in your html like putting an ALT attribut for img, an lang to the html ect...