3 Col Preview Card using HTML/CSS

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

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! 🙂

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.