Responsive Blog preview card

Community feedback

• 

  hitmorecode•7,240

  @hitmorecode

  Posted 4 months ago

  Nice looks good. Just a few tips

  • When writing CSS avoid adding things to the body that will be applicable to the entire page.
  • If is letter-spacing: 0 you don't have to write this, by default letter-spacing is always 0.
  • Don't add line-height: 150% on the body, this will apply to the entire page. Only use line height where is necessary.
  • gap: 20 on the body, why did you add it here? I don't see the point adding this to the body.
  • You added line-height: 150% on the body and then repeated this in other places. Avoid repeating yourself. If you already added on the body, you don't need to add it elsewhere. If you want to use it on different places, just combined them into one.

  /* for example you want to use line height on different elements */ 
  h1,
  h2,
  p {
    line-height: 150%;
  }
  
  /* instead of doing this */
  h1 {
    line-height: 150%;
  }
  
  h2 {
    line-height: 150%;
  }
  
  p {
    line-height: 150%;
  }
  

  • The same goes for font-family if you add font-family: Figtree; on the body, you don't have to add it anywhere else.
  • The shadow that you created has a soft edge, make it harder. Remove the 2px and it should be fine.

  I hope you find this helpful. Keep it up👍👌

  01

  Marked as helpful
• 

  hitmorecode•7,240

  @hitmorecode

  Posted 4 months ago

  Nice looks really good. What's commented out, you can delete them. You don't need to add letter-spacing: 0px; this is the default setting.

  body {
      background-color: hsl(47, 88%, 63%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 20px;
      min-height: 100vh;
      /*! color: hsl(0, 0%, 7%); */
      font-family: 'Figtree';
      /*! line-height: 150%; */
      /*! letter-spacing: 0px; */
  }
  

  You don't have to repeat the border radius of the image inside the media query.

  For next exercises try to build it by using semantic html.

  00