Skip to content
Submitted almost 3 years ago

Desktop-first solution using CSS Grid (grid areas)

juanmfretes•90
@juanmfretes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! Any suggestions for improvement would be very appreciated.

Community feedback

  • idukpaye alex•725
    @Esesosa-maxPosted almost 3 years ago

    cool transitions on the button that was nice. First of all, you do not need CSS grid to make the card responsive. The simplest to do this challenge is to use flexbox you give the card container a display: flex then flex-wrap: wrap. The flex-wrap property is a handy property that will adjust the element based on the viewport try it.

    Marked as helpful
    1
    juanmfretes•90
    @juanmfretesPosted almost 3 years ago

    @Esesosa-max Thank you for your feedback! I use CSS Grid just to practice,but I will try another version with your suggestion.

    0
  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To get rid of the accessibility/HTML issues shown in your Report:

    • wrap everything in your body in <main> OR use semantic tags OR give role="" to the direct children of your <body> ... Click here to read more
    • have at least one <h1> in your code

    Good job! :)

    Marked as helpful
    0
    juanmfretes•90
    @juanmfretesPosted almost 3 years ago

    @anoshaahmed I will keep this in mind from now on. Thank you very much!

    1
  • Ben•770
    @BenConfigPosted almost 3 years ago

    Try to use the semantically correct HTML elements.

    For the .container you could use a <main> element instead of a <div> and your .cards could all be <section> elements instead of <div>s.

    Also you have used <p> elements for your .card-headings, but these are headings, so why not use <h2>?

    Marked as helpful
    0
    juanmfretes•90
    @juanmfretesPosted almost 3 years ago

    @BenConfig I didn't think of doing it that way. Very interesting. Thank you very much!

    0
  • David Emad•925
    @DavidEmad01Posted almost 3 years ago

    Perfect Job

    Just continue coding more and more ✌

    0
    juanmfretes•90
    @juanmfretesPosted almost 3 years ago

    @DavidEmad01 Thanks for the comment!

    1

Please log in to post a comment

Log in with GitHub

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