Clipboard Landing Page (Grid CSS) ❤🧐

Community feedback

• 

  David Gichuru•360

  @dxiDavidPosted almost 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 😁

  Marked as helpful

  1

  ---

  

  ezecoder•870

  @3eze3Posted almost 2 years ago

  @dxiDavid Hey thanks a lot for taking the time to improve my code ✔, I really appreciate it and I will keep it in mind for this and future projects.

  0

  

  David Gichuru•360

  @dxiDavidPosted almost 2 years ago

  @3eze3 You are welcome. Happy coding 🥂

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 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. 🙂

  Marked as helpful

  1

  ---

  

  ezecoder•870

  @3eze3Posted almost 2 years ago

  @vanzasetia Thanks for the recommendations, they were really helpful for my code and to understand how to improve performance (Regarding images and alt attributes), also thanks for taking the time to help me improve my code.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @3eze3

  No problem! I am glad I could help. 😄

  0