3-Column Preview Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @WayneTasaki ,

  I have some suggestions regarding your solution:

  • There should be two landmark components as children of the body element - a main (which will be the component ) and a footer (which will be the attribution).<Footer> should not be in the <main >. HTML5 landmark elements are used to improve navigation .

  • To tackle the accessibility issues .you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).

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

  • 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 challenge , all the images are decorative.

  • The element button must not appear as a descendant of the a element . Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button., though, so it's a good idea to make a habit of specifying the type . So use <a> only.

  • width: 19.188rem;an explicit width is not a good way . consider using max-width to the container that wraps the three cards.(uncomment the one you did ).

  • In line-height: 25px;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

  • border-radius and overflow hidden to the container that wraps the three cards.

  • General point: The best way to style that is singleclass selectors Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Wayne Tasaki•130

  @WayneTasakiPosted almost 3 years ago

  @PhoenixDev22 Thank you so much! I implemented almost everything you suggested and fixed all my html validation and accessibility issues. On a future project I'm going to make sure I don't set an explicit width. This was the first time anyone has given me feedback on my code so I really appreciate it!

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @WayneTasaki , you are welcome.

  the fixed width makes it difficult to have a responsive site. Most of the time , you won't use an explicit width.

  • here is an article about The difference between CSS width, min-width, and max-width property

  hopefully it helps.

  Marked as helpful

  0