3-column preview card component (HTML & CSS)

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @LuisGonzH94!

  Your solution looks great!

  I have a couple of suggestions:

  • Setting a fixed width: 90% to the card can make it overgrow depending on the size of the screen. In this case, a better option is to set a max-width with a fixed value, for example 950px. By doing this, your card will grow until it reaches 950px and then it'll stop. As I said, this can prevent your card from turning bigger than it should.

  • Also, you can add background-color: #F2F2F2; to the body. It'll look even closer to the original design.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Luis H. Gonz.•20

  @LuisGonzH94Posted 11 months ago

  @danielmrz-dev I really appreciate your comments! I was recently reading something about max-width and when to apply it. I will surely consider this in my next challenge project. I will also implement your suggestions in my coding right away. I appreciate your comments.

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • You don't necessarily need to add border--radius to every column Instead, you can use set to the container parent and use overflow: hidden on the container to clip any excess from the image, achieving a similar effect.

  main {
    border-radius: .625rem;
    overflow: hidden;
  }
  

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here 📘.

  • Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by leaving its alt attribute empty. You can read more about this here 📘.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  0

  ---

  

  Luis H. Gonz.•20

  @LuisGonzH94Posted 11 months ago

  @MelvinAguilar I really appreciate your comments! About the h1 tag, it's great that you mention that it can only be used once per page so as not to confuse screen readers (accessibility). Thanks for letting me know about the overflow: hidden. I'll try it and see how it turns out. In addition to your comments about centering the content, I was thinking about using display flex, but my question is: should I use it inside the body selector?

  I will surely consider this in my next challenge project. I will also implement your suggestions in my coding right away. I truly appreciate your comments.

  0