responsive, css flex, css grid

Hi.

Congratulations on completing the challenge!

I see you added both images in your HTML file and used CSS to toggle between them with display: none;. This is not the best practice. I suggest that you read "The picture element" article on web.dev. Here's a code example from it that shows how to display different images for different screen sizes:

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image.">
</picture>

Also, instead of writing <span>P E R F U M E</span> like this in HTML, its better to write <span class="category">Perfume</span>, so that the screen reader reads it as a word and not separate letters (to keep your website accessible), and then style it with CSS like this (as an example):

category {
    text-transform: uppercase;
    letter-spacing: 5px;
}

Text-transform: uppercase; turns all letters to uppercase and letter-spacing adds some space between them.

I hope this is helpful. Happy coding!

Dear Nguyen Duc Tan,

You have a nice solution! Your HTML code is very simple and effective. Your CSS code is good, working well, but the many media query maybe makes sustainability difficult.

Thanks! Blanchevalen