3-column preview card component solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Mansour!

  🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

  • Accessibility
    • Every page should contain only one h1. In this case, you make the h1 to h2 and if you want, you can have a hidden h1 with sr-only styling (screen-reader only or visually hidden).
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
    • The Learn More buttons should be link elements. They commonly will navigate the user to the different web pages.
    • Keep in mind that anchor tags are for navigation - moving to different pages or content on the same screen, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc.
    • Next time if you are going to use button tag, always specify the type of the button. In this case, you can set the type of them as type="button". By doing that, you prevent the button from behaving unexpectedly (like submitting).
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • Some resources to learn about the alternative text.
      • Axess Lab | Alt-texts: The Ultimate Guide
      • Images Concepts • WAI Web Accessibility Tutorials
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Styling
    • I would recommend using rem or em units for padding. % can cause a lot of issues when the screen is too small or too large (since there's no max-padding property, it will keep growing).
  • BEM
    • Why don't make the <button class="btn btn__orange">Learn More</button> the same as the <div class="card card--orange">?
    • You can make the below markup to be the elements of the card.

  <div class="content">
    <p class="text">
      Choose a sedan for its affordability and excellent fuel economy.
      Ideal for cruising in the city or on your next road trip.
    </p>
  </div>
  

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  Mansour•220

  @Mansour0007Posted almost 3 years ago

  @vanzasetia could you explain more this part BEM Why don't make the <button class="btn btn__orange">Learn More</button> the same as the <div class="card card--orange">?

  You can make the below markup to be the elements of the card.

  <div class="content"> <p class="text"> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip. </p> </div>

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @Mansour0007 About the first point, I meant you could make the btn as the block element and btn--orange as the modifier class (instead of btn__orange).

  The second point, I was talking about, I would recommend making the content and text element as the children element of the card. So, the class name should be card__content and card__text.

  Marked as helpful

  1

  

  Mansour•220

  @Mansour0007Posted almost 3 years ago

  @vanzasetia okay i get it now thank you very much

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @Mansour0007 You're welcome! 👍

  0
• 

  Mansour•220

  @Mansour0007Posted almost 3 years ago

  Thank you Vanza Setia, I'm really grateful that you highlighted all of these points so i can learn from them. very helpful feedback and i will be working to improve in all of these areas Thank you

  0