3-column preview card component challenge

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @TejaswiniLabade ,

  I have some suggestions:

  • Body within the body sit:

  • <main>(which is the container of the three cards) instead of the <section>

  • <footer>(which is the FM attribution).

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

  • In this case, you can have hidden< h1> with <sr-only> styling and make the other heading tags to <h2>.

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important;  /* 2 */
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            /* 3 */
  } 
  

  • Swap the buttons for anchor tags. Clicking those"learn more"buttons would trigger navigation not do an action so button elements would not be right.

  • Instead of setting width in %, consider using max-width. That will let the component grow up to a point and be limited.

  • border-radiusand overflow hidden to the main container(that wraps the three cards.) so you don't have to set it to individual corners.

  Hopefully this feedback helps.

  Marked as helpful

  1
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Awesome job with this one. You did well on the design and viewing your code I would suggest the following for you...

  • Instead of wrapping the main-container with section you use main tag for readability
  • Clean the whitespaces in your code
  • Use a validator to check your solution

  Once again, Great job and Keep up the good work!

  Marked as helpful

  1