Skip to content
Submitted 7 months ago

Clipboard landing page with SASS, BEM, Flexbox & CSS Grid

Ferdinando Geografo•370
@FerdinandoGeografo
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

What challenges did you encounter, and how did you overcome them?

In this challenge I focused a lot on:

  • The organization of partial Sass files according to the 7-1 pattern;
  • The use of BEM as a naming convention for style classes.
  • I also experimented a different approach to handle the responsiveness of the page using a mixin for a greater readability.

Any feedback is appreciated, happy coding everyone!! :)

What specific areas of your project would you like help with?

  • I would like to further improve on managing the responsiveness of the design, especially related to images.

  • In the end, there is always room for improvement regarding the organization and reusability of style classes, making full use of various patterns explored in depth during my studies.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    IMPROVE ARIA-LABELS FOR SOCIAL LINKS :

    • The <a> needs aria-label attribute with proper values instead of using Icon of or Image of. You currently added like "Icon to Facebook". We need to provide details more clearer and crisper.
    • Remember aria-label is important for social links in an <a> tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.
    • When a screen reader encounters an anchor tag with a social link, it may announce the link's text content, such as "Facebook" or "Twitter," by including an aria-label attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.
    • So instead of saying "Icon to Facebook" you can say like "Visit us on Facebook"
    • Example:
    <a href="#" aria-label="Visit us on Facebook" class="footer__icon">
    <svg>..Facebook svg...</svg>
</a>
    • If you have any questions or need further clarification then feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    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