Three order card summary

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello Sergio Lopez

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

  • Within body sits main and footer.

  • The footer element would hold the FM attribution

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

  • A SVG that does not add important information to a document should be considered decorative. The following markup pattern uses aria-hidden="true" to hide the SVG from screen readers. focusable="false" is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG.

  
  <svg aria-hidden="true" focusable="false">
  :
  :
  </svg>
  
  

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

  To read more .

  • • you have misused section , Section is not meant to be used anywhere you feel tempted to use a div. A div is ok to use in lots of situations, section is for a bigger chunk of content to group it all together, often titled by a h2 (and aria-labelledby that h2).

  • Css:

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

  Marked as helpful

  1

  ---

  

  Sergio Lopez•110

  @lopezolidevPosted almost 3 years ago

  @PhoenixDev22 Thanks for your feedback! I'll implement this corrections right away in this one and upcoming projects.

  Again, appreciated for your feedback!

  1