BLog-Preview

Community feedback

• 

  P

  ElonCosta•60

  @ElonCostaPosted 3 months ago

  The solution really differs from the original design, the component is not centered, there is no shadow or border.

  You can use grid to center the component both vertically and horizontally this way

  body {
      display: grid;
      min-height: 100vh; 
  }
  
  .card {
      place-self: center;
  }
  

  It's not really recommended to use heading tags just for different text sizes since screen readers can get confused.

  Marked as helpful

  1
• 

  eros77sc•160

  @eros77scPosted 3 months ago

  Hello, Mohamed! It's great that you're also on the Frontend Mentor journey. I liked your solution, and I'd like to give you some tips, if that's okay with you?

  • It would be helpful if you could review Semantic HTML, as it helps developers, browsers, and assistive technologies to function better. For example, replacing <div> with <main> or <footer>, and also checking the importance of the order of <h1> to <h6>.
  • The color of the "Learning" label is the same as the background!
  • There are other details like borders and box-shadow, and the border-radius could be larger, but I don't want to be too picky with you. You have your own learning journey ahead!

  Marked as helpful

  1