Clipboard Landing Page (Grid CSS) ❤🧐

Community feedback

• 

  David Gichuru•360

  @dxiDavid

  Posted over 2 years ago

  Hi, Ezequiel Córdova Sotomayor! 👋

  This solution is awesome, congrats 🎉

  I have a few suggestions for you to improve the code

  You might want to set the breakpoint a little higher than 490px to allow

    .track__snippets {
      flex-direction: column;
    }
  

  to stack items in that section on top of each other starting at a larger screen size (somewhere around 900px)

  You could also try to put the sections inside <main> to avoid the warnings

  <main>
      <section class="track">
      <section class="access">
      <section class="workflow">
      <section class="clipboard">
  </main>
  

  I hope you find this helpful 😁

  12

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 2 years ago

  Hi, Ezequiel Córdova Sotomayor! 👋

  I have some suggestions to improve this solution.

  • Add download attribute for each download link. The value of the href attribute should point to a file instead of the external link. Also, remove the target="_blank".
  • Alternative text of the logo should be the name of the company—alt="Clipboard".
  • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
  • Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (<img>) so the screen reader will pronounce it as an image.
  • Wrap each social media icon with an anchor tag. Then, use the alternative text of the <img> to label the link.

  I hope you find this useful. 🙂

  12

  Marked as helpful