responsive, css flex, css grid

Community feedback

• 

  Olena•190

  @helenhappPosted 3 months ago

  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!

  Marked as helpful

  1

  ---

  

  Nguyen Duc Tan•240

  @tannguyenk3Posted 3 months ago

  @helenhapp thank you, your feedback so help me more about html and css. I will refer to your opinion

  0
• 

  HenriettTipi•200

  @BlanchevalenPosted 3 months ago

  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

  0