3 Col Preview Card using HTML/CSS

Community feedback

• 

  Nurcholis•420

  @cholis04

  Posted almost 3 years ago

  Hi Gerald Nwa Ekezie,

  I see you give a border when the button hovers. So, it would help if you gave the button a transparent border. This keeps your element's height from extending

  .cars button{
     ...
     /* New Transparent Border */
     border:1px solid transparent;
    ...
  }
  
  .cars button:hover{
      ...
      color: white;
      border: solid 1px white;
  }
  

  #happycoding

  40

  Marked as helpful
• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hi, Gerald Nwanekezie! 👋

  Congratulations on completing this challenge! 🎉

  Some recommendations from me.

  • I would not recommend setting any width and height on the html and body elements.
    • There's no need to set width and height on the html element. I would recommend treating the body element as the page of the site instead.
    • There's no need to set width: 100% on the body element. By default, it is a block element so it will have full width. For the height, I would not recommend setting any height because it will make the body element not responsive. If you ever need to set a height then I recommend setting min-height instead. It's way more responsive because you are telling the body element, " hey, you need to at least this amount of height but you are allowed to grow if needed.".
  • I would recommend removing the body-wrap element. You can use body element instead.
  • I suggest using anchor tags for those "Learn more" buttons. As a user, I would expect if I click one of those buttons, it will navigate me to another webpage.
  • For the hover effect of those buttons, I would already include the border on the initial state. After that, when they get hovered, I will make the background-color of the button as transparent.
  • Lastly, fix all the accessibility issues that have been reported.

  That's it! I hope this helps. Let me know if you have any questions! 🙂

  20

  Marked as helpful
• 

  nerometa•280

  @nerometa

  Posted almost 3 years ago

  You're doing great, dude! No major problems. Only minor problems that I think you can fix it.

  • Headings. It should be a bit bigger like 2rem or 36px. You also need to make sure that it's in uppercase. Can be done by text-transform: uppercase if I remember correctly

  • Buttons. Text can be bolder and font size a bit bigger.

  • Responsive: I understand that the challenge requires you to make desktop and mobile responsive, not in between. If you can make tablet responsive that's a plus.

  You can check out my solution on this challenge. I wanna hear your feedback as much as you do.

  23

  Marked as helpful