3 Column Preview Card Component Solution

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted almost 3 years ago

  Hi POTB,

  You're welcome and glad to help.

  /* In the markdown, you can type */
  - First item
  - Second item
  - Third item
  

  You can read more in here

  Happy coding!

  01

  Marked as helpful
• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted almost 3 years ago

  Hi POTB,

  First of all, awesome work again.

  I see you have finished another challenge. I have some suggestions, if you don't mind:

  • Page should contain a level-one heading. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only.

  • What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.

  • In this challenge, the images are much likely to be decorative. 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. For future use , the alternate text should not be hyphenated , it should be human readable.

  Hopefully this feedback helps

  01

  Marked as helpful
• 

  POTB•330

  @Peteonthebeat

  Posted almost 3 years ago

  Hey @correlucas, Thanks for commenting and taking the time to check this solution. I agree with what you say, but I thought that would make the container look odd at 700-800px width. I added the media queries to prevent that, but I'll definitely consider what you say to get things done with fewer lines of code.

  Regards!

  00
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Peter, congratulations for your new solution!

  I saw your solution and is just perfect. I have only one advice regarding the number of media queries you've add. In this challenge you need only one a media query to change the design mobile. You can let the container desktop contract since its flex until 700px and then change the flow without active 2 or 3 medias.

  For the mobile version since the media query gets active you can set max-width: 100% to let the container grow the maximum minus the margin/padding.

  👋 I hope this helps you and happy coding!

  00