Semantic HTML5 markup CSS custom properties Flexbox

👋 Hi Ajagun!

🎉 Congratulations on finishing this challenge! I notice that your solution is 2 times bigger than the design. It looks really big on my desktop view. I would recommend fixing this issue.

More feedback:

• Accessibility
  • In this case, use interactive elements (button, a) for any elements that have :hover or :active states.
  • Keep in mind that anchor tags are for navigation - moving to different pages or content on the same screen, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc.
  • 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.
• Styling
  • I would recommend using min-height instead of max-height to set the height for the body element. By using min-height, the body element is allowed to grow if needed. Now, on mobile landscape (640px * 360px) the card gets cut off (looks really big).
  • I would recommend adding padding (withrem unit) to the body element to prevent the card from having full width and full height rather than keep setting width and height for every viewport.
  • In addition to the previous point, I would recommend letting the element inside it dictate the height of the main element.
• Best Practice (Recommended)
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).

That's it! Hopefully, this is helpful!