I completed the challenge using vanilla css and flex property

Congratulations on finishing this challenge! I have reviewed your code and here are a few suggestions for improvement:

1. Centering the Container

   • Instead of using margin on .container to center it vertically, a more effective method is to use min-height: 100vh; on the body and display: grid; place-items: center; to center .container. This approach ensures better responsiveness and alignment.

   body {
     min-height: 100vh;
     display: grid;
     place-items: center;
   }
   

2. Wrong use of Buttons

   • Avoid using buttons for the learning tag. Even though it looks like a button, it's not a button. If you use a button, the browser will consider it as a button and you may encounter accessibility problems later on. You can wrap that into a div element.

3. Card Shadow on Hover

   • In the card design challenge, it was stated that the shadow of the card should grow on hover. This is missing in your implementation. Observe the active state file in your design directory of the project and implement the hover effect.

   .card:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
   }
   

I hope you find my feedback helpful. Please mark it as helpful if you do!