Skip to content
Submitted 11 months ago

Responsive solution using CSS Grid

jl-stephenson•100
@jl-stephenson
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

It's tricky, not being too familiar with CSS Grid, to find the right combination of properties to keep the CSS succinct. I read general documentation and looked at specific uses of Grid to improve my first solution.

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

Semantic HTML. I chose to code the cards as `` elements with aria-label attributes. Is this a good choice for accessibility, or would a different HTML element be better for this?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Alex•3,130
    @Alex-Archer-I

    Hey!

    Congrats with first steps with grid! Your work looks neat =)

    There is no need for aria-label tags here. The cards contains text, which will be recognized by screen-readers. The aria-label is helpful when there is no clearly explanation about what this part of the page do. For example, if the button contains only the svg icon.

    Also the purpose of the top-level header element is to bear content which could be repeated on the different pages of the page (like, logo, navigation and stuff) so it shouldn't have the h1 tag. But you can put header inside main or article and it will have different role.

    By the way, why did you make five rows on the grid? I think four will be enough here =)

    Oh, and in the mobile version you can omit rows definition at all - grid creates additional rows when get new elements (it could be helpful when the content changes or generated dynamically =)).

    Overall you did great, keep doing =)

    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