Submitted about 1 month ago

Responsive Product Preview Card with vanilla CSS and HTML.

Vincent Dao•100

@Squ1nty

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am most proud of my problem solving skills, as I was able to format the image after a good hour or two of debugging. Next time I would probably spend more time planning out what to do first and how I would go about doing it before jumping straight into the code.

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

I encountered many challenges, first of which was formatting the image which proved extremely difficult as it was my first time having to work with 2 different images for different screen sizes. Another was definitely formatting the textContainer to fit properly. In the end the textContainer was not formatted properly.

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

I would love to hear some tips regarding making a fluid/responsive img as well as a textContainer. Although, for the textContainer I believe the formatting issue had something to do with the button component at the bottom.

Community feedback

Tempper•160

@TempperPosted about 1 month ago

Well done on your attempt, as you explore more and more html semantics you will find there as many cool solutions. A way that you could have handled the image is with a <picture> tag, i will show an example below.

<source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg">
<img src="./images/image-product-mobile.jpg" alt="">
</picture> ```


as you can see within a picture tag you are able to set breakpoints (screen sizes) at which the image source will change. I encourage you to explore this.

As for your text container, I think your biggest issue is accidentaly over complicating it with too many divs. An example of this is 
```<div class="itemPriceContainer">
          <div class="discountedPriceContainer">
            <p class="discountedPrice">$149.99</p>
          </div>
          <div class="originalPriceContainer">
            <p class="originalPrice">$169.99</p>
          </div>
        </div> ```
you could have just gotten away with item price container with the 2 x <p> .

Also remember buttons don't always have to be buttons, you could also use `<span> <img src="./images/icon-cart.svg" alt="Cart Icon"> <a href="#"> Add to Cart</a></span>`

Marked as helpful

Vincent Dao•100

@Squ1ntyPosted about 1 month ago

@Tempper Thanks so much! I will keep all of this in mind for my next projects. Very helpful, thanks again @Tempper!

Please log in to post a comment

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