3-column-preview-card-component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hello Musa,

  Congratulation on finishing this challenge. Excellent work! I have few suggestions regarding your solution, if you don't mind:

  HTML

  • Use the <footer> landmark for the attribution, as using landmarks is important to improve navigation experience on your site for users of assistive technology.

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

  • Never use <div> and <span>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication.

  • In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only. Then use those <h2> for class=”title” and<p> for theclass=”text”

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

  Hopefully this feedback helps.

  0
• 

  Michael Waaler•230

  @10highPosted about 2 years ago

  Hey - it looks great. Good job.

  My only feedback would be that you're not using an semantic markup for accessibility. You've done pretty much all of it with <div> tags. Accessibility is important for people using, e.g., screenreaders, to navigate a page.

  Think about checking it out, because it's becoming increasingly important. Otherwise, great work.

  0