Clipboard landing page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Tunde! 👋

  Good effort on this challenge! 👍

  Here are some suggestions for improvements.

  • Logo is an important content of the page. It's not decorative, and not the one with blank alt="" text. Without that information, a screen reader user or a search engine will not know what your site/project is called.
  • The download buttons should be anchor tags with download attribute.
  • There's should only one main landmark element in this case.
  • Make the b_quote as a list element. The content is not a quotation so it should not be wrapped by blockquote.
  • I recommend adding width and height attributes to each image element. This way, the browser knows how much space the image requires before it can be fully loaded. As a result, it will optimize CLS (Cumulative Layout Shift).
  • The exclusv_logos should be a section with a visually hidden h2.
  • The images inside exclusv_logos should have alternative text. This is a section where the product is being used by some big companies.
  • The FAQs, Contact Us, Privacy Policy, etc should be link elements.
  • Also, I recommend wrapping those links in a list element. Then, you can use CSS columns for the layout.
  • Each of the social media icons should be wrapped by an anchor tag. Then, use aria-label to give each link an accessible name.

  I have two recommended videos. The first one is about how hard HTML is (HTML is not easy). The second one is talking about HTML and modern CSS.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

  I hope this helps! Happy coding!

  0
• 

  Arturo Veintimilla•130

  @aavv8931Posted about 2 years ago

  I like what have you done! ✅ . Nevertheless, I might suggest to use just 1 <main> tag in the entire html. Because The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. Resource: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main"

  👌

  0