Clipboard Landing Page using Flexbox

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hello, Nathasha! 👋

  Congratulations on finishing this challenge! 🎉 Also, you have written a nice blog post on how you finished the challenge. Great job! 👍

  Some suggestions from me.

  • I would recommend using the img element for the logo SVG. It will clean up the HTML a lot and then the logo image is not going to have :hover effect (it is much easier to use inline SVG when the color of the image needs to be changed).
  • Also, the logo is an important image. It needs to be accessible by the screenreader users as well. So, I would recommend having an alternative text. Just tell the company name, alt="Clipboard". This way, the screenreader users and potentially the search engine bots will know that it is the site of the Clipboard company.
  • Not all images need an alternative text. So, I recommend leaving the alt="" empty for all the images that don't add meaningful information or just for decorations. For example, if the image-computer.png doesn't exist on the site then there would be no missing information. But, the images inside the advertising section are meaningful images. If those images don't exist on the site then there are some missing information.
    • Some resources to learn about the alternative text.
      • Avoid these common alt-text mistakes - The Big Hack
      • Axess Lab | Alt-texts: The Ultimate Guide
      • Images Concepts • WAI Web Accessibility Tutorials
  • I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  I hope this helps! Keep up the good work! 👍

  01