3-column preview card component

Community feedback

• 

  Ahmed Hany•220

  @ahmedhanyhPosted almost 2 years ago

  Hey @JoseEliasMorales! Great work!

  • Add a css reset to remove some of the default syles applied by the browser (user-agent stylesheet). You can use a small reset like this (by adding it to the very top of the stylesheet):

    * {
      margin: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }
    

    to remove all margins, paddings, borders, and to include the border size when setting elements' dimensions. Or you can use a larger one like this one. There are more resets out there, you can look them up.

  • Use gap instead of margins/paddings to space the contents inside of each .card element.

  • Change the .card__btn from a <button> to a <a href="#"> because a link is more suitable for this content. When we see 'Learn More` we expect to be redirected to another page, which is how a link behaves.

  • Add cursor: pointer; to .card__btn to change the cursor symbol when hovering over each card button.

  Hope the review was helpful! Wish you the best with your future challenges!

  Marked as helpful

  2

  ---

  

  Jose Elias Morales•70

  @JoseEliasMoralesPosted almost 2 years ago

  @ahmedhanyh Thank you very much for the tips! I fixed the padding using gap, for this I gave the __card element display:flex. As for the button, I investigated what you told me and put it like this: <a href="#"><button></button></a>. What do you think?

  1

  

  Ahmed Hany•220

  @ahmedhanyhPosted almost 2 years ago

  @JoseEliasMorales You're welcome! Glad the review was helpful!

  I think the content (the 'Learn More' button) is more a link that looks like a button, and that it's more semantically correct to use an anchor element instead of an actual button. Take a look at this answer on stackoverflow.

  I think it's better to style the anchor element to look like a button. We may have to make it function like a button using Javascript, like executing it when a user gives it focus and presses space/enter.

  Keep up the great work! Ask me any questions you have anytime.

  Marked as helpful

  0

  

  Jose Elias Morales•70

  @JoseEliasMoralesPosted almost 2 years ago

  @ahmedhanyh Thank you. Now I understand. Advice applied!

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.

  • As mentioned above, a lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Jose Elias Morales•70

  @JoseEliasMoralesPosted almost 2 years ago

  @vcarames Thanks a lot! As for the h1, I thought it worked independently from each card, I'll keep that in mind. I have implemented the reset, I have to get used to working with it, I see that I save a lot of code. Thanks as always for your help, it helps me to keep improving.😅

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @JoseEliasMorales

  Glad I could help!☃️

  The h1 is one per page.

  Keep it up!

  0