HTML/CSS Card Component Challenge

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Greetings, Estèlle! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍

  In addition to RayaneBengaoui's helpful feedback, I'd like to suggest,

  • Using anchor tags (rather than <button> elements) for the "Learn More" links on the page since they will probably lead the user somewhere.
  • Taking a look at your solution report and trying to clear up some of the errors that are there (it looks like you might have to remove a duplicate ID or two and add the alt attribute to the images in this challenge).
  • Switching to a mobile-friendly layout sooner to prevent a horizontal scroll bar from appearing along the bottom of the page and to make your solution more responsive.

  Hope those tips help. 🙂

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Estèlle•40

  @meijerestellePosted over 3 years ago

  @ApplePieGiraffe Thanks for the feedback! Looks a lot better now :)

  0
• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Estèlle,

  Congrats for completing your first challenge ! 🙂

  For rounding the corners I think you could proceed this way :

  • Remove these margins and border-radiuses from the cards.

  • On your body, add min-height: 100vh, display: flex, flex-direction: column, justify-content: center and align-items: center. It will center your container in the middle and make sure your body covers the entire viewport.

  • On your container , remove min-height: 100vh because you want your body to cover the viewport, not the container. Also you can remove both width: 960px and min-width: 100vw because you declared a fixed width on your flex items (230px) so the container will be too wide and thus, we won't see the corners.

  • Last, add border-radius: 15px to your container and also overflow: hidden in order to see the border radius.

  Let me know if it helped and if you have any questions.

  Overall, well done for the challenge and happy coding ! 😃

  1

  ---

  

  Estèlle•40

  @meijerestellePosted over 3 years ago

  @RayaneBengaoui Thanks for the detailed feedback! Looks great now in combination with the feedback of @ApplePieGiraffe :)

  0
• 

  Rohit Purkait•460

  @codeswithrohPosted over 3 years ago

  Instead of using border-radius just use border-top-left-radius or border-top-right-radius. The same follows for the bottom radius as well. This will help you to get the rounded corners in the specific regions as required. For more clarity you can check out my solution as well (https://github.com/codeswithroh/Simple-Card-Layout)

  0