HTML, CSS, CSS Variables and Flexbox

👋 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!