Skip to content
Submitted over 2 years ago

Flexbox Mania - Clipboard Landing Page Project

sass/scss
Robert•170
@waffleflopper
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

On the first run through I got the mobile version looking great (without figma because I didn't pay for Premium, yet), however I made the mistake of not taking the desktop version into account when I got the layout set up. The result quickly became a complicated mess with special classes and cases all over the CSS document.

I learned that sometimes (read: a lot of the time) flex-boxes are a great tool to utilize for responsive layouts and there's not necessarily anything wrong with nesting them to get things working correctly.

Any feedback is always appreciated! I'm working on improving my self-taught skills in front-end development to set myself up for a career in web development when I leave the US Army in about a years time. So any tips, hints, resources, etc. that you feel like throwing my way will be greatly appreciated. Cheers!

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, Robert! 👋

    The alternative text of the logo should not be "logo". It should be the name of the company which in this case is "Clipboard". Also, you don't need to mention the size of the logo.

    Also, don't include the word "logo" for the alternative text of the images inside <section class="logos">. It is already an image element (<img>) so the screen reader will pronounce it as an image.

    For the download buttons, use <a> with download attribute instead.

    Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.

    For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

    Links must have accessible names. Right now, social media links do not have text content. So, I recommend usingaria-label for each anchor tag to provide an accessible name. This way, screen readers know how to pronounce the link.

    After that, you should hide the social media icons from assistive technologies. To do that, you need to use aria-hidden attribute to prevent them from getting pronounced by screen readers.

    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. Learn more — Why you should never use px to set font-size in CSS

    Remove font-weight: 400; from the <body> styling. It is already the default styling.

    Making the page layout into a desktop layout at 380px width is too early. I recommend adjusting the breakpoint. The site should only have the desktop layout when there is enough space.

    I hope this helps. Have fun coding! 😄

    Marked as helpful

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