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

3 column card component ussing CSS Grid and Flexbox

@Marialba16

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


Hello guys, how are you? This is my fourth challenge, as in the previous ones, I would like to read your comments on how I can improve or what I should avoid when coding. Thanks!!

Community feedback

dewslyse 3,025

@dewslyse

Posted

Hello Marialba! Congrats on completing your fourth challenge. Some things to note:

  • The page isn't quite fully responsive. It's not optimized for mid-sized devices. You could set the max-width on the current media query higher. Personally, I would lose the height: 50% on the .container since it's constraining the height of the card. I would then space the card elements with either padding/margin. E.g.: .section a { margin-top: 50px; }. I would also probably lose the width: 50% and then set a max-width rather (maybe 1110px).
  • The icons are decorative and as such should have alt="".
  • Remember to also wrap the content between the <body> in a main for improved accessibility <main class="container">.

All the best

Marked as helpful

1

@Marialba16

Posted

Thanks for your comment @dewslyse, I'll take it into account. I will check my code and correct. Thanks!

0

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