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

P

@KatMahn

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


Please comment on how my code is structured and if there is a way I could have done it differently

Community feedback

@tburette

Posted

The result looks nice. It doesn't exactly match the given design and that's okay! (Adjusting a layout to closely match the given challenge is a lot of time for little payoff.)

In the HTML:

  • There is an unclosed HTML comment at the end
  • <div class="attribution"> could be a <footer
  • you used an <h3> for the link/button. Isn't there an HTML that would be a better fit?

In the CSS:

  • When the viewport is just above 830px part of the content is not visible and there is horizontal scrolling. There seems to be some kind of mixup in your media queries (@media).
  • You could implement the effect on the button when it is active (see design/active-states.jpg)

Marked as helpful

0

P

@KatMahn

Posted

@tburette Thank you very much for the feedback

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