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 using CSS Grid

Rohit Deshpandeβ€’ 870

@rohitd99

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


All feedback is appreciated !

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello ROHIT , congratulations for your new solution!

Your solution seems great, the design of the cards too. I've some tips for you:

A better tag for the cards is <article> instead of section. Here's an article explaining the difference betwen these two tags:

https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section-in-html5#:~:text=The%20tag%3A,independent%2C%20self%2Dcontained%20content.

You need to replace all width with max-width to make the cards responsive, the main difference between these two properties is that the first is fixed and the other gives the card a maximum size but can decrease the size to fit the screen.

πŸ‘‹ I hope this helps you and happy coding!

1

Rohit Deshpandeβ€’ 870

@rohitd99

Posted

@correlucas Thank you for the tips , I got the difference between article and section.

I didn't get the second one, as my cards are responsive. I do understand the difference between width and max-width but not the context you're referring to , can you please clarify?

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