Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive 3-column grid preview card component

#accessibility#bem
Konjeti Maruthiβ€’ 70

@MaruthiKo

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Which areas of this project can be changed or reviewed?
  • Any better approach to my existing solution?Glad to hear them

Community feedback

Kamasah-Dicksonβ€’ 5,610

@Kamasah-Dickson

Posted

Your solution looks great but i want to help you with some small tips.

1 . Do not specify any height in the grid items. This sometimes breaks layout and might stress you some other time when things are not working as expected. Instead allow the items to determine their own height. What i mean is that paddings and margins applied to the grid items will automatically determine the heights of the grid items. I hope you get me.

2 . To help you with the accessibility issues, remove the attribution class and change the div to a footer

Do not use a section tag if there won't be any direct head tag I mean h1....h6 always use a section tag if there would be a directed head tag in your page otherwise use a div instead.

Good job thereπŸ‘πŸŽ‰ Happy coding

Marked as helpful

1

Konjeti Maruthiβ€’ 70

@MaruthiKo

Posted

@Kamasah-Dickson, Thank you so much for your valuable info, will do the necessary changes

1

Please log in to post a comment

Log in with GitHub
Discord logo

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