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 preview card component

Tom 245

@tttinh

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 everyone,

Hope you have a good day. This is my second exercise. I would like to receive any feedback or comment to help me improve my skills.

Thanks so much.

Community feedback

@aUnicornDev

Posted

Few things to point out,

1.Don't go to mobile view so early, you can shrink to upto 1000px and then go mobile

2.You probably used outline property on hover because you didn't want the content to move the layout which would have happened in case you used border property.

But the outline does not create a rounded hover but a rectangular one.

A fix to that is.. use box-shadow: inset 0px 0px 0px 2px #fff; instead of a border or outline..

Marked as helpful

0

Tom 245

@tttinh

Posted

Hi @aUnicornDev,

Thanks so much for your comment.

  1. After watching some of tutorials on Youtube, I saw some of them recommend to use the Mobile-first approach. I am not sure which way is better. So I just take a try :).

  2. I tested on Firefox, and saw the outline is rounded. But after read your comment, I have tested with Edge and found that it is still a rectangle. I will try with your solution.

Hope you have a good day.

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