3-column-grid

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello Ogunola Zainab Ololade,

  Congratulation on completing this challenge,

  Great work! I have some suggestions regarding your solution:

  HTML

  • About <h1> it is recommended not to have more than one h1 on the page . Multiple <h1>tags make using screen readers more difficult, decreasing your site’s accessibility. You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then you can use <h2> instead of those <h1>.

  • For any decorative images, each img tag should have empty alt="" as you did and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images . In this challenge , all the images are decorative.

  • Imagine what would happen when the user clicks on those learn more ? Clicking those "learn more" likely would trigger navigation not do an action so button elements would not be right.So you should have used <a>

  • And it is essential that interactive elements have focus-visible styles as well as hover styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page.

  CSS

  • To center the component on the middle of the page, You can use the flex or grid properties and Use min-height: 100vh to the body. will.

  • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

  • Really important to keep css specificity as low/flat as possible. The best way to style the html elements is single class selectors.

  Overall, your solution is good. Hopefully this feedback helps.

  Marked as helpful

  0