Skip to content
Submitted over 3 years ago

💯 Perfect Clipboard landing page challenge hub using #SCSS

sass/scss, bem
AFIQUE•115
@AF1QUE
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was my second back-to-back submission. I tried to keep everything about the design as perfect as possible. Any suggestions & remarks would be really appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Fluffy Kas•7,655
    @FluffyKas

    Hey,

    Wow, it takes some confidence to call your own solution perfect ^^ Overall it looks good, but there's a few issues with it:

    1. As mentioned above by @Crazimonk, you need to wrap your content in a main tag. Your website should have certain landmarks, like header, main, footer, etc. Why? Because not everyone is able to use their eyesight to navigate through your website and for these users the lack of landmarks is going to cause problems. MDN is your friend, look up semantic HTML tags ^^ Divs are mainly used for grouping together content for styling, and thats about it. It conveys no additional meaning.

    2. Similarly, instead of calling a div footer, why not use a semantic HTML tag called footer?

    3. You forgot to wrap your footer menu items in a tags. Same goes for the social media links, they're not links at the moment. If you wrap them in a you should also give them an aria-label to describe where these links lead. Adding some hover states too would be great.

    4. Is there a reason to use px for paddings and margins while you used rems everywhere else?

    5. There's an unnecessary breakpoint at 320px which makes your design break on small screens. I guess it's not a big deal, I don't really know how many people have screens smaller than that but there's no reason to go out of your way to inconvenience them. :D

    6. Some inline padding would look nice in tablet view for the "partners-group" and the footer sections. At the moment, they're touching the sides of the screen which isn't the prettiest.

    7. There's a typo in the markup => div? (services__content__group).

    Overall you did good, it's just semantic HTML that perhaps you could look into. There are some great resources out there which could help (MDN, a11y, Scott O'Hara and a lot more) Happy coding ^^

  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hello AFIQUE ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • My first advice is that don't to it over, it is not good for you or your growth, I know the challenges of "FEM" are addictive. With that said

    • Warp your card content around the main tag Ex: 👇

    <body>
<main class="container">
*all you content here*
</main>
</body>
    • One question what is div?

    overall you did good

    happy Coding😀

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