Responsive 3 column card using Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi J-Correa! My name is Vanza!

  👍 Good job on finishing the first challenge! I have some feedback on this solution:

  • In my opinion, I don't think the rel="preload" is needed since the next line will you ask the browser to execute it. Use preload to loads a big files like video. In this case normalize.css is not a big file.

  <link rel="preload" href="./css/normalize.css" as="stylesheet">
  <link rel="stylesheet" href="./css/normalize.css">
  

  • Also, change the as="stylesheet" to as="style" since it's the right value.
  • The contents__button needs :hover effect, try to add that.
  • You can leave the alt="" to be empty, since the icons are just decorations only.

  <img class="contents__icon" src="./images/icon-suvs.svg" alt="">
  

  • To make the cards perfectly on the center of the page, you can center it using flexbox on the body

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  J-Correa•50

  @JuanLuisCorreaPosted over 3 years ago

  @vanzasetia Hi Vanza, thank you very much for the advice, I'm new to this and it will be quite useful to me

  0