Finished this ANNOYING PROJECT, FOUR Card feature section project

Community feedback

• 

  Isabela Fernanda•170

  @Isabela-FernandaPosted 6 months ago

  Hello, I took a look at your code and some tips I can give you are:

  1. Create a separate file just for styling (style.css, for example);
  2. In HTML, the <div class="head"> can be replaced by the <header> tag and placed outside the main, this would make your HTML more semantic and make it easier to style the <main> (you wouldn't need the < div class="grid-container">, you could simply make the div of the cards);
  3. I recommend you take a look at the grid-template-areas property, it makes it much easier to work with the grid in this type of design. I'll put below a code example on this property that would solve this design with just a few space changes between items.

  main {
          display: grid;
          grid-template-areas: "card1 card2 card4" "card1 card3 card4";
        }   
  .card1 {
      grid-area: card1;
    }
  .card2 {
      grid-area: card2;
    }
  .card3 {
      grid-area: card3;
    }
  .card4 {
      grid-area: card4;
    }
  

  0