Responsive Product Preview Card WebPage

Community feedback

• 

  Tobenna•610

  @tobezhanabiPosted over 1 year ago

  Hi Godoi, You did a nice job working with an API. Congratulation on submitting a working task. 🎉🎉

  Short answer yes, There is a more standard way to switch between images instead of creating a <div class= "imagem"> you could have used the default picture tag.

  <picture>
    <source media="(min-width:850px)" srcset="img_pink.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
  </picture>
  

  You can even have 3 images for different screen size. You can use (max-width) for your own case

  Here are a few other suggestions to the issue with your solution.

  Work on HTML The landmark <div class="container"> should be replaced with <main> and also switch <div class="attribute"> with <footer>.

  Landmarks in HTML are structural elements that define the major sections of a webpage. They include semantic elements such as <header>, <nav>, <main>, <article>, <aside>, and <footer>

  Heading

  Headings must be in a valid logical order, meaning h1 through h6 element tags must appear in a sequentially-descending order.

  Hope you find this helpful

  Happy Coding😀

  Marked as helpful

  1

  ---

  

  Eduardo Godoi da Silveira•90

  @GodoiTheCreatorPosted over 1 year ago

  @tobezhanabi Thank you for the comment! I didn't know about this tag picture, it's very helpful. Also, thank you for the advice about name tags like main, etc, I'll try to improve my html in the next project! Thank you, again!

  0

  

  Tobenna•610

  @tobezhanabiPosted over 1 year ago

  @GodoiTheCreator you welcome and we all learning

  1