3 Col Preview Card using HTML/CSS

Community feedback

• 

  Nurcholis•420

  @cholis04Posted over 2 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

  Marked as helpful

  4
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 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! 🙂

  Marked as helpful

  2
• 

  nerometa•280

  @nerometaPosted over 2 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.

  Marked as helpful

  2

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @nerometa Hi there! 👋

  For responsiveness, we as frontend developer needs to make the site fully responsive regardless of the user screen size. Even though the design images only provide the desktop and the mobile version, we have to make our own judgment on how the site should look in between and above 1440px.

  If the site only looks good at certain breakpoints then it's not responsive yet. 🙂

  2

  

  nerometa•280

  @nerometaPosted over 2 years ago

  @vanzasetia First of all, thanks for the reminder! I get what you are trying to say. I always think it's odd not to include tablet breakpoints, but I proceeded to do responsive design on all devices including tablet anyway.

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @nerometa I think if we work for the company as a frontend developer, we might not get the tablet design. There's no guarantee that we will get it even in a professional environment. But, if we can get it then that's good. 🙂

  1