Skip to content
Submitted over 2 years ago

💯 Perfect Clipboard landing page challenge hub using #SCSS

AFIQUE•115
@AF1QUE
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

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.

Community feedback

  • Fluffy Kas•7,715
    @FluffyKasPosted over 2 years ago

    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 ^^

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    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😀

    0
    AFIQUE•115
    @AF1QUEPosted over 2 years ago

    @Crazimonk Thanks for leaving your valuable feedback.

    Answer to your question: div defines a section in your HTML

    About the card content idea, can you be more specific why I should use the main tag instead of a div for cards? An elaborate answer would be really appreciated.

    0
    Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    @AF1QUE Main tag is to contain the whole card or the website. in main tag you will have multiple sections aside footer nav etc

    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