3 column card with active state using css grid and Sass

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Alcandris,

  Congratulations 🎉 for completing this challenge, the CSS Grid component looks great and is responsive. There are some issues/suggestions I want to address:

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. You should also wrap the footer within the footer tag e.g. <footer class="attribution"></footer>
  3. The buttons have a hover effect that is shown in the design provided with the starter-pack. Also, the buttons are missing the type attribute.

  Overall, great work and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  0

  ---

  

  Alcandris•30

  @AlcandrisPosted about 2 years ago

  @romila2003 Thanks for your feedback, I modified the document accordingly. Concerning the hover effect, it remplaced by an :active state. I keep coding and now I learn JS

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Alcandris, congrats on completing this challenge!

  Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  Add the correct color for this background, the value is background-color: #F2F2F2

  Improve the card overall look adding the more rounded borders to the first and the third card using a value around border-radius: 14px.

  Improve your html markup using meaningful tags to wrap the content, you can replace the div you’ve used for each card with <article>. Remember to wrap big blocks of content with semantic tags and never divs, use divs for small blocks.

  ✌️ I hope this helps you and happy coding!

  0