Skip to content
Submitted almost 2 years ago

Clipboard landing page

Miguel Evangelista•520
@Miguelaeb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Any advice is welcome

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, Miguel!

    It is a good solution and can be better if you:

    • Add alternative text to all the logos.
    • For images containing text, make sure the alternative text includes the image's text. For example, the Google logo should have an alt value of “Google”. Reference — Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
    • Add download attribute to each download button.
    • Give an accessible name to each of the social media links. You can use aria-label to do that.
    • Remove min-width: 375px; and max-width: 1440px; from the <body> styling. Those stylings make the <body> element not responsive on some screen sizes.
    • Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.
    • Add * { box-sizing: border-box } as part of the initial or reset styling. This way, padding won't add more width to the element.
    • Adjust the media query breakpoint. 1440px is too late for desktop styling. Also, not all desktop devices have that screen size.
    • Remove max-width: 2000px; from the <body> styling. It should always fill the entire page. Treat it as the main element of the web page.
    • Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

    I hope this helps. Happy new year!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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