3 Column Preview Card Component Solution

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 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!

  Marked as helpful

  0

  ---

  

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  @PhoenixDev22 Thanks!

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 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

  Marked as helpful

  0

  ---

  

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  Hi @PhoenixDev22, Thanks for the thorough feedback. I appreciate your suggestions!

  "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..."

  — I am learning it right now because of you! Thanks!

  "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."

  — Actually, initially I wrapped the text of my buttons with an <a> tag, but then I find that messed up the hover effect, so I deleted them, and stuck to the plain text, although what you point out is exactly what I had in my mind...

  "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." 

  — This is another I am learning because of you, so once more thanks!

  Lastly... Would you please let me know how to use those nice bullet points and code text in my posts. That would be awesome...

  Regards! POTB

  0
• 

  POTB•330

  @PeteonthebeatPosted over 2 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!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 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!

  0