Semantic HTML5 markup CSS custom properties Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @SAAJEVES,

  Congratulation on completing another frontend mentor challenge.I have some suggestions:

  • Whenever you include interactive elements(links , buttons , inputs , textarea ), make sure you include clearly visible focus-visible styles .

  • For any decorative images, each imgtag 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 .

  • you can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). AND use <h2> instead of <h1>.

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

  This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers. You can simply wrap learn more in an anchor tag no need for a <p> and <div> tag .

  • instead of giving border-radius to the two cards, I would suggest to give overflow:hidden; and border-radius to the container that wraps all the cards .

  • Never use pixel for font-size.

  • Don't use nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors.

  • Never Style on ID'S. Try to put classes directly on anything you want to style.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px will not allow the users to control the size of the page based on their needs.Never use px for font-size

  I really hope this feedback helps . Happy and Keep coding

  Marked as helpful

  0
• 

  Dolapo•890

  @nofeesahdeePosted almost 3 years ago

  You have done well saajeves

  0