Skip to content
Submitted 6 months ago

CSS Flex, HTML5

astro, tailwind-css
stephenlit•50
@stephenlit
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?

This was an interesting project where I got to set things up in astrojs. It was really my first dip into the Tailwind waters and I found it not that bad.

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

My hovers where not working, I thought it was a Tailwind thing but it turned out that I have to turn off touch screen feather in my browser. I set up custom colors in Tailwind, this was a great learning effort of googling and asking questions on discord.

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

"This project was straightforward, so I don’t think I need much help with it. That said, I’d like to improve my systematic coding skills and would appreciate any suggestions you might have."

Let me know if you'd like any additional tweaks! 😊

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Adriano•42,890
    @AdrianoEscarabote

    Hi stephenlit, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

    Use the THE PICTURE TAG that is a shortcut to deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the tag picture is more practical and easy. Note that for SEO / search engine reasons isn’t a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device desktop + mobile.

    Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp

    See the example below:

    <picture>
  <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;">
</picture>

    The rest is fantastic.

    Hopefully, you'll find it helpful. 👍

    Marked as helpful

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