Responsive page using Media Querry and CSS Grid

Community feedback

• 

  P

  Olha Sliusarenko•220

  @Oliko136Posted 2 months ago

  Hello!

  Your solution looks good, very similar to the design!

  A note regarding semantics - it's better to use unordered list to group the cards and treat every card as a list item, as they are basically the same entity and are all interconnected. The article tag should be used for content that can make sense by itself, outside of the context of the page.

  Also, it is best to give the cards a common class name and apply all the common rules to it, and then just add the border color to a specific card using its specific class name. It will remove repetition and make your code cleaner.

  As for the grid, you applied it well, but for the sake of your convenience you can use the grid-template-areas property (applied to a grid container) along with grid-area property (applied to each grid item) - https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas.

  I hope it helps and good luck in your future projects!

  Marked as helpful

  1