FlexBox SCSS

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅ Button states are important, not just button styling (focus, focus-within)! If you are only toggling classes to visually manage state of your components, you are likely not appropriately conveying that state to users of assistive technologies.

  ✅ Use relative units for font size, such as ems or rems. While modern browsers can smoothly zoom pixel-based layouts, sizing type in relative units ensures an entire layout can be scaled up or down by simply updating the font-size of the body element.

  ✅ Use labels for every input and make the for="" and id="" values match. IDs must be unique on each page, only one label can be associated to each unique form element.

  ✅ Fields with error validation should have aria-describedby to insure that the associated field level error message is read by assistive technology. If the error message has an id="my-error-message", then the input should have aria-describedby="my-error-message".

  ✅ If a button contains an <img> element, make sure to set its alt attribute. If it contains an icon, use aria-label to describe the icon instead.

  ✅ Stop using ID selectors in CSS. In everyday work, already set ID selectors require the use of inline styles and !important rules. But afterwards there are no more doors open for further refactoring.

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  1