landing page using html css

Community feedback

• 

  Mennatallah Hesham•1,490

  @Mennatallah-HishamPosted 12 months ago

  Hi Praveen,

  You did great 👍

  Here are some suggestions to improve your code:

  Semantic HTML

  • you can improve your HTML markup by using semantic HTML, they are meaningful tags that convey the meaning (semantics) of the content within them.

  Headings

  • each page should have one h1 tag,h1 helps the web understand the content. also skipping h1 may confuse assistive technology users.

   <h1>Improving your front-end skills by building projects</h1>  
  

  IMAGE

  • you can use <picture> element to change the image. the browser will choose the best match and display it.

    <picture>
      <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg">
      <source media="(min-width:650px)" srcset="./images/image-product-desktop.jpg">
      <img src="./images/image-product-desktop.jpg" alt="Gabrielle Chanel perfume" class="product__img">
  
    </picture> 
  

  ALT

  • images should have descriptive alt text, which is important for SEO and screen reader users,alt="Gabrielle Chanel perfume"

  Accessibility

  • add aria-hidden="true" to the cart icon, it is used to hide decorative content/images/icons from screen readers which improves their experience
  • check how I made the price section more accessible here

  here are some helpful articles:

  • headings best practices
  • alt text
  • semantic html
  • Article vs Section
  • picture
  • aria-hidden

  Hope you find this helpful, Happy Coding

  Marked as helpful

  0

  ---

  

  Praveen Singh Mahra•340

  @PraveenMahraPosted 12 months ago

  @Mennatallah-Hisham "Thank you for your feedback. I will implement your suggestions."

  0