Skip to content
Submitted 2 months ago

Product-preview-card-component-main

Eleonora Stoyanova•70
@elistoyanova
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?

I'm my second time making this project. It's been a while since the first try and since then I see improvement. Back then I needed to google some stuff in order to code them, but now I managed to fully make it by myself

Code

Please log in to post a comment

Log in

Community feedback

  • Onyinyechi Viola Obika•240
    @Obikaviola

    Hi Elenora,

    Amazing work here 👏🏾👏🏾👏🏾

    You structured your code in a clean and precise way. I actually learned a few things from you. 😁

    I do have one suggestion though. It's concerning the images. It seems you put one in the HTML file and the other in CSS. It's not entirely wrong to put images in CSS but putting images in CSS is meant for images that are just there for decorative purpose and have no impact on the SEO.

    Placing images in HTML allows it to be accessible for indexing by not crawlers which adds to the SEO. In this case, being a product preview of a perfume, the SEO impact of the image is important as such the images ought to be placed in the HTML.

    If you're worried about how to place two images that changes depending on screen size, use the picture element. Here are helpful articles to help you understand it better:

    -mdn web doc -[W3school picture element] (https://www.w3schools.com/html/html_images_picture.asp)

    Great work overall 👍🏾👍🏾👍🏾

  • MhdSinanC•110
    @MhdSinanC

    Hello there,

    Looks so identical, But your mobile design is not yet responsive. The image is shrinking. It need to be on the top in mobiles.

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