HTML/CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @krtksharma,

  I have some suggestions regarding your solution:

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

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech).than swap the <h1> for <h2>

  
  .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;            
  }
  
  

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

  • using widths in percentage. Not a great idea as you're losing control of the layout.

  • The learn more links are moved to the left on the cards .

  Hopefully this feedback helps

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! Kartik Sharma Good Job on challenge

  -> padding below the sedan and other title seems too much try to reduce it

  Keep up the good work!

  0