Product Preview Simple Html Css FLEXBOX

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hi McMuffin1022, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  I noticed that you made your entire code using divs! this is not a good practice since div has no meaning, to improve the structure of your code we can use semantic elements that have meanings, not only for us who are developers, but also for screen readers, that is, a person who uses tools to browse the web, can better understand the content if our code is well written with semantic tags and some other features to improve accessibility!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  McMuffin1022•30

  @McMuffin1022Posted almost 2 years ago

  @AdrianoEscarabote Hi Adriano! I am very good! It's true that I use the div every time. Usually I use Flutter, so this is an easy way to work for me. I'm going to check to understand the semantic tags.

  You know, I think clean code is the big challenge when you're doing code! We are kind of artists

  1
• 

  Taner•190

  @tanererenPosted almost 2 years ago

  Hey, the project looks great - well done!

  In order to optimise the image and make it mobile responsive the first step would be to use the <picture> element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

  You would replace your <div class="card__image"></div> with:

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

  The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

  The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

  Let me know how you get on!

  Marked as helpful

  0

  ---

  

  McMuffin1022•30

  @McMuffin1022Posted almost 2 years ago

  @tanereren

  Ohh thanks for the info! I have search 1 or 2 hours just for find that but with no result... Thanks for the answer ! :) I will check for update my project with your modif. I will come back with an update!

  1

  

  McMuffin1022•30

  @McMuffin1022Posted almost 2 years ago

  @tanereren Hi, i have try it. Thanks for the advice ! :)

  0