Learning flex box

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Chapes!

  🎉 Congratulations on finishing your second challenge! I have some feedback that will improve this solution:

  • Accessibility
    • All page content should live inside a landmark (header, main, footer). In this case, you can wrap all page content except the attribution with main tag.
    • For the attribution, you can swap the div with footer tag.
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tabs) easily.
    • 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 case, all images are decorative only.
    • I would recommend setting your font-size on body element instead on the html (root) element. Setting font size on the root element will not allow the users to use their own font size setting on the browser.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Visual
    • Don't set any height or width on the card, let the content inside the card control the size of it for better responsiveness.
    • I would recommend setting a max-width instead of setting a width. This will allow the card to shrink but not to grow (becoming too wide).
    • The background image is repeating. Use CSS background-repeat to fix the issue.
  • Tips
    • Since you are using Sass, I would recommend creating a rem() function. Its job is converting px to rem unit.

  // DEMO
  
  // On Sass file
  body {
    font-size: rem(16);
  }
  
  // On CSS file
  body {
    font-size: 1rem;
  }
  

  • Another tip on using Sass is to avoid deep nesting. Deep nesting means high specificity since you keep adding the parent element. So, try to limit the nesting.
  • High specificity is hard to maintain, so it's best to keep it low.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  1

  ---

  

  chapes111•50

  @chapes111Posted almost 3 years ago

  @vanzasetia Thank you for the detailed feedback. I look forward to learning about and fixing each issue. This was very helpful, much appreciated.

  0