Responsive Blog preview card with HTML and CSS

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 23 days ago

  Hey Taofeek, nice job.

  You made it harder a bit for yourself. Max-width is all you need, which you already used. You don't need media query for this challenge.

  You can move flex, height, background color to body and remove width, margin, padding from container along with the media queries.

  body {
      font-family: 'figtree', sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(47, 88%, 63%);
  }
  
  .container {
      /* display: flex; */
      /* flex-direction: column; */
      /* justify-content: center; */
      /* align-items: center; */
      /* height: 100vh; */
      /* width: 100%; */
      /* background-color: hsl(47, 88%, 63%); */
      /* margin: 0; */
      /* padding: 0; */ 
      /* I tried something with this 2 line, don't look to them :D */ 
      /* width: 90%; */
      /* margin: 0 auto; */
      box-shadow: 5px 5px 10px 5px;
      border-radius: 20px;
  }
  

  I see you used rem on some places, i recommend you to use it especially for font sizes and media queries for better responsiveness.

  Also use a modern css reset for every project. It will make your life easier.

  Using landmarks and wrapping the content with main is a good practice. Every page needs one main.

  I think there was an active state for the "HTML & CSS Foundations", you can make it with hover pseudo class Also since it has an active state on the design, it is probably a link, so using an anchor tag might be better too.

  <h2><a href="#">HTML & CSS Foundations</a></h3>

  Marked as helpful

  0

  ---

  

  Taofeek Kassim•80

  @TaophyccPosted 23 days ago

  Thank you @KapteynUniverse this was really helpful 👍🏾

  1