Frontend Mentor | Clipboard landing page with SASS, BEM, Flexbox & CSS Grid coding challenge solution

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

@0xabdulkhaliq

Posted 5 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

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