HTML, CSS, CSS Variables and Flexbox

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋 Hi David!

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

  • Accessibility
    • All page content should live inside a landmark (main, header, footer). In this case, you can wrap all the page content with main, except the attribution. For your attribution, you can swap the div with footer.
    • 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.
    • 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.
    • 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.
  • Other
    • Try to make the website looks closer to the design.
    • On mobile view (360px * 640px), the cards have full width. I would recommend adding padding on the body element to prevent it.
    • You can use flexbox or grid to make the cards perfectly on the center of the page.

  // ⚠ This is what I did, depending on your markup, yours might be different
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  • I would recommend using CSS Resets, like Normalize to make everything looks the same (similar) across browsers.

  That's it! 🔥 Keep going and 😉 happy coding!

  01

  Marked as helpful