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 Component

@ekremilkan

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 everybody. Here is my solution for this challenge. I hope you have some advices for me :) Thank you so much :)

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Ekrem,

Really good solution - well done!

Minor things you could consider:

  • adding cursor: pointer; to your button styles
  • adding max-width: 400px; (px just a guide here) margin: 0 auto; to .card when your design changes to a column for the mobile layout so it doesn't stretch all the across the viewport
  • swapping <div class="main"> <main class="main"> to clear your accessibility report. Using descriptive mark up is really important

All the best!

Marked as helpful

1

@ekremilkan

Posted

@darryncodes Thank you very much Darryn. I will be more careful to write clean code. That was really good feedback for me.

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