Triple-Column Card

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  Hello, Reza.

  Good effort on this one.

  Number 1. I believe you centered the three cards on the page correctly. There are other ways, but yours works just fine. However, for the content inside each card, you used a mix of margin and padding, which works, but can break easily.

  If you wanted to increase/decrease the space around all the items, you'd have to manually change them for the heading, image, text, etc.

  I'd recommend turning each card into a flexbox container and using align-items: center; and justify-content: center;.

  Here's an example of how the code would look.

  .left {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2em; // <- This padding is applied to the container, so this is the only place you'll need to change the padding for it to affect all elements inside it
  }
  

  Number 2. This is a fairly simple solution of just HTML and CSS, so I don't see much you can do to use less code.

  Number 3. You used a <p> tag for headings instead of an <h2> for each card, but you've been told this already in the previous comment.

  Number 4. I'd make the changes mentioned above and use more descriptive class names for the cards e.g. .left-card or .sedan-card instead of just .left which is ambiguous.

  I hope this helps.

  All the best with future solutions.

  Marked as helpful

  0

  ---

  

  Reza Jaber•200

  @rezajaberPosted almost 2 years ago

  @Victor-Nyagudi hey vicktor, thank you for such a detailed and perfectly explained feedback, everything you mentioned makes perfectly sense and I will do my best to adapt these changes :)

  Have a great day and happy coding!

  1
• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

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

  • Along with the blank alt tag, you also want to include the aria-hidden=“true” to your “car images/icons” to fully remove them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The “SEDANS”, “SUVS” and “LUXURY” are headings so they need be wrapped in a heading element. Since each heading in this card has the same level of importance an Hh2 heading will be the best choice.

  • Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

  More Info:📚

  MDN The Anchor element

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

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Reza Jaber•200

  @rezajaberPosted almost 2 years ago

  @vcarames hey バレンタイン 😈 :) I did not know about the aria-hidden="true" code, so thank you for that one :=) And thanks a lot for putting the effort of giving me the right links to learn from, this is a big help :)

  I really appreciate it and wish you a great day :)

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @rezajaber

  I am glad that I was able to help out!

  Keep it up!

  0