Skip to content
Submitted 4 months ago

Product Preview Card // HTML & CSS

P
Kristian Haug•150
@klhaug
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Thinking through the entire structure before I even wrote a single line of code. And also keeping the code pretty clean, not using unnecessary class-names and id's.

What challenges did you encounter, and how did you overcome them?

Not having the proper images delivered. I solved it with using the proper one, and then cropping and scaling it with a container and transform.

What specific areas of your project would you like help with?

How could I make this card even more accessible?

Code

Please log in to post a comment

Log in

Community feedback

  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline

    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
  • Saima Ahmed Sial•1,220
    @saimasial-bit

    "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
  • P
    Kristian Haug•150
    @klhaug

    Thank you! Fixed it now!

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