Skip to content
Submitted 8 months ago

Responsive and accessible Grid Layout made with CUBE CSS methodology

accessibility, cube-css, next, typescript
P
David Pokrajac•560
@DavidPokrajac
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This project was created using CUBE CSS methodology. I tried to separate CSS styles into Composition, Utilities, and Exceptions folders. Also, I worked on making it more accessible.

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

1.) When menu sidebar appears for mobile devices, I would like to know how the Menu Close icon, in the upper right corner, gets focus first. Also I would like to get some tips on how to improve accessibility even more. 2.) Should I give role attributes to every div and span? Also, do the nav and ul tags also need role attributes?

Code

Please log in to post a comment

Log in

Community feedback

  • Yacoub AlDweik•3,450
    @YacoubDweik

    Hey! Good job!

    In screens less than 700px I scroll to see the rest of the content bcuz of The overflow hidden for the body.

    Also the effect of that black shadow when you click on the menu is not the best tbh you can achieve it in a better way.

    Try to get more comfortable with responsive designs, try using mobile-first approach

    Marked as helpful
  • xNyfPtx•1,260
    @xNyfPtx

    No, you rarely only need to use the role="" attribute. Navs and uls are already semantic but I've heard about of using role="list" on ul and ol because Safari do some wild stuff. Divs and spans are only there for presentation but there are some cases where you would need to use a role attribute for it like a tablist. Check this and this

    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