Skip to content
Submitted about 4 years ago

HTML, CSS, Flex, media query

Charissa Ramirez•30
@chawissa
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! It took me longer than I thought. It took me a while to figure out why justify-content wasn't working as expected. It finally worked when I put the height and the width on .card instead of on .container.

Please give feedback on the quality of my codes and the class names and whatever else you can think. It tried to make it as clean as I can and use the DRY method.

Thanks.

Charissa

Code

Please log in to post a comment

Log in

Community feedback

  • Charissa Ramirez•30
    @chawissa

    Thanks Janne for calling me out on the pseudo classes and media queries. I actually avoided those because I'm not comfortable yet. :) I'll do better and try harder.

    Regarding line 25, I remember seeing the border when I was trying to get it centered so I just put it there.

  • Janne Tielinen•90
    @Tielinen

    Good work Charissa,

    "It took me longer than I thought." That happen to me too, a much longer on my first solution. On second one, things got easier/faster.

    To my beginner eye your code looks great, well organized, easy to read effective code.

    Few minor things got my attention, In style.css; line 25, do you need 'border: none;' declaration?

    I would consider pseudo classes first- and last-of-type to cards border radius declarations, so you can stack more cards later if you need to. And I think code is a little bit more readable this way. ''' .card:first-of-type { border-radius: 1rem 0 0 1rem; } .card:last-of-type { border-radius: 0 1rem 1rem 0; } '''

    I would make sure that the layout looks good in middle screen sizes, like tablets. Now on 768PX view-port "Learn more" buttons come out of their containers. It might help to just set break-point 768 PX and then make sure that the mobile layout looks good until break-point.

    Like mentioned before, good work, in any case, and especially for the first solution.

    Best wishes Janne

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