Product Preview Card // HTML & CSS

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,780

  @catherineisonlinePosted 9 days ago

  Hello, Kristian, the solution looks great.

  Here is what I have to share 👇

  1. First, I wonder why you need an extra div around the img tag because it's pretty self-manageable until you plan to add some overlay, for instance.
  2. For the old price, which has a line-through, you can actually use del tag, it would fit here perfectly: <del>$169.99</del>. So you won't need to add extra CSS plus it conveys the semantic meaning of the old price value. You did similar perfectly with <strong>$149.99</strong>.
  3. The cart image in the button doesn't need any alt because technically it's just a decoration. Decoration means that it's just there for the visuals but it doesn't bring any actual importance. If, let's say you had no text there and only an icon and the icon triggered the click, then it would be important. In this case, you can keep it as alt="" but because of this better to add aria-hidden="true" to make sure that screen readers also skip this.
  4. Finally, usually it's better to separate CSS reset into another file but in this scenario, it might not bring a huge difference. Simply, it's always better to separate the concerns.

  Hope any of this helps, nice job 😎

  Marked as helpful

  0

  ---

  

  P

  Kristian Haug•80

  @klhaugPosted 5 days ago

  @catherineisonline Thank you so much! These are really good recommendations. I appreciate it 🍀

  0
• 

  Saima Ahmed Sial•1,000

  @saimasial-bitPosted 9 days ago

  "Great job on the solution! The layout looks clean and responsive. However, I noticed that you haven't used semantic HTML elements like <article> and <section>. Adding them would improve accessibility and readability. Also, on smaller screens, the text alignment looks slightly off. Adjusting the padding/margins might help. Keep up the great work!"

  Marked as helpful

  0
• 

  P

  Kristian Haug•80

  @klhaugPosted 5 days ago

  Thank you! Fixed it now!

  0