Responsive 4 card page using HTMl,CSS

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @36atharva, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each card you use <article> instead of the <div>.

  ✌️ I hope this helps you and happy coding!

  11

  Marked as helpful
• Account deletedPosted almost 3 years ago

  Hey, some suggestions to improve you code:

  I noticed that you did one grid to to create three columns and did another grid to get the center two into position. An easier way to achieve this is by doing the following using Grid-Template-Areas:

    .card-container {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "supervisor team calculator"
        "supervisor karma calculator";
    }
  
    .karma-card {
      grid-area: karma;
    }
  
    .calculator-card {
      grid-area: calculator;
      align-self: center;
    }
  
    .team-card {
      grid-area: team;
    }
  
    .supervisor-card {
      grid-area: supervisor;
      align-self: center;
    }
  

  Happy Coding! 👻🎃

  11

  Marked as helpful