Product Preview Card Component

Hey there GGSWEngineer,

nicely done! To make the component behave more responsive you could use something like this on your .container class.

min-width: 343px;
width: 100%;
max-width: 600px;

or shorthand

width: clamp(343px, 100%, 600px)

The container will respect the size of its children if it is between 343px or 600px.

You can also use the HTML picture element instead of your Script.

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

Hope this helps!

Hello GGSWEngineer, how are you? I am a beginner, I think your work is very good, the more you practice, the better the skills.

Since 2015, Google had announced that the majority of traffic and searches on the internet were being done from mobile devices, which is why the so-called "Mobile First" approach was born, which is why it is currently customary to first design and develop sites for mobile and then the other sizes. for other devices, I usually use 3, mobile, tablet and desktop.

As for the colors, I have experienced some slight differences, but I use a chrome extension called "colorzilla" and it helps me have the colors much more similar when it is difficult for me to see them the same. In the case of the background the color was "- Cream: hsl(30, 38%, 92%)"

As for the mediaQueries, the properties that you must place are those that will really affect the design since many are already inherited from the 1st design, therefore there is no need to repeat them if they are not going to affect the new size

I hope it is useful to you, you can also take a look at my work and give me some suggestions to improve :) happy day

Dear GGSWENGINEER!

I learned a simple explanation why the mobile version is the first: what we see, we can read on mobile, even if it is not beautiful, it will be readable and understandable on the desktop version as well. But conversely, this is not necessarily true (too small letters, elements that have slipped apart, invisible scrollable elements, etc.).

Regarding the media requests, I just want to say (I'm a beginner too), if you use more relative units of measurement in the code (for example, em, rem), not absolute (pixel), then maybe less things need to be modified in another view.

I think you are on the right track, keep it up!