Three-column solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Lorentz! 👋

  Congratulations on finishing this challenge! 👏

  I have some feedback on this solution:

  • Accessibility
    • Good job on using landmarks correctly! 👍
    • Anchor tag should always have href attribute. In this case, you can have either a / or # as the value of the href attribute.
    • 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. 🙂
    • 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.
  • Styling
    • Currently on the desktop view the card elements are not centered vertically. My recommendation is to make the body element as a flexbox container. Also, remove the height: max-content; from the .container element, I guess it doesn't do anything.

  /**
   * 1. Make the card vertically center and
   *    allow the body element to grow if needed
   */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1
• 

  Hexer•3,660

  @EmmanuelHexerPosted over 2 years ago

  Great work overall man. Keep it up

  1

  ---

  

  P

  Lorentz Bloom•90

  @Lauro235Posted over 2 years ago

  @Phalcin Thanks Emmanuel. I appreciate that!

  1