Skip to content
Submitted almost 2 years ago

Clipboard Landing Page

Diego Pasaye•570
@DiegoPasaye
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

Hi guys, this is my solution, if you have suggestions i accept it, thanks!

Community feedback

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

    Hi, Diego Pasaye!

    Here are some suggestions for improvements.

    • Alternative text for images should not include any words that are related to the word "image". The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image.
    • Alternative text for each logo should be the name of the company. For example, images/logo.svg should have "Clipboard" as the alternative text.
    • Use <a> tags and download attributes for the download buttons.
    • "Clipboard for iOS and Mac OS" should be <h2>. It should not be the sub-title of the "Supercharge your workflow".
    • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset
    • Set font-family to the <body> element instead of on the <html> element.
    • Don't use viewport and percentage units as the main unit of the stylesheet. Those are relative units that often creates unexpected result. Instead, use rem as the main unit.
    • Remove width: max-content from the <main> styling. By doing this, you will make the website responsive.

    Next time, I recommend writing the CSS using the mobile-first approach (or using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

    If you use the desktop-first approach, then you need to write more CSS to simplify the layout (usually into a one-column layout).

    The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

    Read more — Responsive design ground rules | Polypane

    I hope this helps. Happy coding!

    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