Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML,CSS

oshaxgio 60

@oshaxgio

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


new to web development appreciate every comment

Community feedback

@VCarames

Posted

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

  • The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.
  • Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a del element and inside it you will add a span element with an sr-only class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.

More Info:📚

Del Element

  • The image’s alt tag description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • This component requires the use of two images 🎑 at 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

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Marked as helpful

1

oshaxgio 60

@oshaxgio

Posted

@vcarames thank you very much for help and advice it's very helpful.))

1

@Kitketovsky

Posted

Hey! Seems ok expect for a few moments:

  1. No mobile version (try using CSS Flexbox for changing layout on particular media query)
  2. Button's font is incorrect (it is 'Montserrat')
  3. Don't forget about such property as 'line-height' in paragraph and main title

Marked as helpful

0

oshaxgio 60

@oshaxgio

Posted

@Kitketovsky thank you very much

0

Please log in to post a comment

Log in with GitHub
Discord logo

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