3 column preview card component with flexbox

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 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.

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

  • The button styling was applied incorrectly; it should be a solid white and when hovered the white border should appear.

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  1

  ---

  

  Anurag•100

  @gpt-anuragPosted about 2 years ago

  @vcarames Thank you for your feedback.

  One question, what should be the process for a mobile-first approach? How should I start? Give base styles first, and then start with mobile size media-queries. After styling for mobile, do styling for larger devices?

  I don't know if I made my question clear. I hope you understand my question.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @gpt-anurag

  The default styling and layout should be for small mobile devices and be adjusted for larger screens as the screen increases, using media queries and responsive properties.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Anurag, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  • Add the correct color for the background, that in this case is background-color: #F2F2F2
  • The icon doesn’t have an important role when you think about semantics and the html structure. So you can add aria-hidden=“true” to avoid it being found and read in the accessibility mode/screen readers. These are only decorative items.
  • Use max-width: 100% for the cards in the mobile version to allow the cards grow 100% of the width considering the paddings and avoid to have a lateral gap (limited by a fixed width).
  • Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Anurag•100

  @gpt-anuragPosted about 2 years ago

  @correlucas Thanks for the feedback. I'll redo it as per the suggestions given.

  0