Desktop solution using CSS Flexbox - Product preview card component

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  The design is not responsive for smsll screens so write a media query

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="both"> with the main tag, <h5> with <p></p> tag to fix the accessibility issues. Add lang= "en" to the html tag to fix the error issue with the html file . for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  To center .both on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body. instead of giving .both a margin value.

  Give .both a height value of auto instead of height: 430px; Increase the padding value for .btn and reduce the border-radius value.

  You forgot to add a media query for the mobile design, in the media query give the width of .both a percentage value of 80 or 90.

  Hope am helpful Well done fir completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there!👋

  Good job on finishing the challenge.

  • The image alt attribute shouldn't be empty due to accessibility reasons. It should describe the image.

  More info on MDN.

  Good luck on your future projects.

  Marked as helpful

  0
• 

  AbdelRahman Elrefai•190

  @ar-refaiPosted almost 2 years ago

  Hello There Nice Work Fathima

  • I recommend that you consider adding <!DOCTYPE> declaration at the start of your HTML Document read about it from Click Here

  • also you should use css to change background color instead of using bgcolor attribute ,read HTML validation above.

  • I noticed that you use only <div> element in your HTML page , I Strongly recommend to wrap all the main content in a <main> element. Read More About Semantic Elements From Click Here

  • this is my solution for this challenge feel free to look at it and other solutions as well : Solution Link

  Keep Up The Good Work. I hope the comment was helpful

  Marked as helpful

  0

  ---

  

  Fathima Nuha•30

  @Fathima-NuhaPosted almost 2 years ago

  @Abdelrahman-Elrefai could you help me with not using div and wrapping. how it is done, and hat is the difference.

  1

  

  AbdelRahman Elrefai•190

  @ar-refaiPosted almost 2 years ago

  @Fathima-Nuha you can read more about sementic elements from W3Schools Semantic Elements as I mentioned before , for more declaration:

  • it lets you define an element’s content purpose on your site. it's like you use <main> tag to let the browser and who ever reads the code to know this is the main part of the page, use the <header> tag to let it know this is the header , use the <footer> tag to let it know it is the footer section of the page and so on..

  • it makes your website efficient and it's performance in search engines much better.

  and for how it is used it is the same as using <div> tag nothing different but the relation between the content and the tag itself and the meaning of the content that the tag holds..

  Marked as helpful

  1