A Product Card using HTML and CSS

Community feedback

• 

  Abhishek Gulab Bhikule•200

  @Bhikule19Posted almost 2 years ago

  Hey there, Congratulations on your work. I just looked at your code and got some things to suggest for you as a fresher developer I myself made such mistakes.

  1. Wrap the "Gabrielle Essence Eau De Parfum" inside the <h1> tag as it will show the browser that this is the page's title. p.s:- Never leave a page without a title.
  2. <p class="normal-price">$169.99</p> Don't wrap inline items with "p" tag let it be used only for paragraph stuff. Instead use <span> tag like this:- <span> <del> $169.99 </del></span> Also, the <del> tag defines the text that has been deleted from a document. Browsers will usually strike a line through the deleted text.

  Check out this below link for more understanding:- https://www.w3schools.com/tags/tag_del.asp#:~:text=The%20tag%20defines%20text,a%20line%20through%20deleted%20text.

  If you find this insightful in any way you can give it marked as helpful.

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and <p class="subtitle"> with <h1></h1> to fix the accessibility issues.

  To center a content on a page, add min-height:100vh; to the body and remove the height value. Give img a max-width of 100% instead of width:250px.

  There is no need to give .container a background color, and a height value. increase the width of .container to 600px Give .textarea a padding value and background-color of white.

  you forgot to add a media query for the mobile design, in the media query give .container a percentage width of 80 or 90 and flex-direction: column.

  Hope am helpful HAPPY CODING

  Marked as helpful

  0