Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Clipboard landing page

@Tunde-webdev

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


feedbacks will be highly appreciated

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

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.

I hope this helps! Happy coding!

0

@aavv8931

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord