clipboard landing

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Congratulations on finishing this challenge! 🎉

  We need to get the HTML right first.

  • The alternative text of the logo should not be "logo". It should be the company name. The logo is one of the ways for screenreader users to know about the name of the site or project. If the alternative text is "logo" then the users can assume that it is a logo website instead of Clipboard website.
  • The download buttons should be anchor tags with download attribute.
  • Not all images need alternative text. Try to disable all the images. For example, if the logo of the website doesn't exist then the users might not know the name of the site. Another example is if the image-computer.png doesn't exist then there would not be any missing information. So, leave the alt="" for the image-computer.png.
  • All the headings inside the <div class="text-section__container"> should not be headings. It should be a list with three bullet points. You can use CSS to make the text bold.
  • Good job on having great alternative texts for the images inside the <section class="company-section">.
  • All the list items inside the <ul class="footer__list-option"> and <div class="footer__social-media">, there are all links. So, I would suggest having an anchor tag as a child element of each li.

  Now for the CSS.

  • I wouldn't recommend using percentage unit for the padding. A percentage unit is a relative unit. As a result, it can have an unexpected result on very large screens or on tiny screens. So, I recommend using rem unit instead.
  • There is no need to set height: 100% on the body element.
  • Rather than having this complex selector list, I recommend creating a new class called title and then adding it to each element that needs to use it.

  .header-section__title,.keep-section__title,.text-section__title,.access-section__title,.access-section__title-supercharger,.option-section__title,.clipboard-section__title
  

  • Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design. (Reference: MDN documentation of font-size).

  That's it! I hope this helps! 😊

  Marked as helpful

  0