Blog Preview Card

Community feedback

• 

  Natali Grimm•830

  @Grimm-NPosted 6 days ago

  Awesome work—you’re really putting in the effort, and it shows! 🌟 Keep going; you’re doing great!

  Here are a few tips to polish your code even further:

  1. Only use one <main> element per page. Having more than one <main> can confuse screen readers and make it harder for assistive technologies to understand the main content of your page.

  2. Add classes to all elements—it keeps your code flexible and easy to style later on. Giving each element a unique class name helps you target and style each part of your layout precisely, especially as your project grows.

  3. Try using rem, em, %, or vh units instead of pixels. These units adjust to different screen sizes, which makes your design more responsive and user-friendly.

  4. To center your card within the body, try using flexbox:

     body {
       display: flex;
       justify-content: center; /* centers horizontally */
       align-items: center; /* centers vertically */
       height: 100vh;
       width: 100vw;
     }
     

     This centers the card both vertically and horizontally within the body container.

  5. To prevent the card from sticking to the edges on smaller screens, try setting the card width to 90vw or 90%:

     .card {
       width: 90vw; /* or 90% */
     }
     

     This gives the card a little breathing room from the edges, making it look balanced at all screen sizes.

  Marked as helpful

  1
• 

  DoDoingDone•70

  @DoDoingDonePosted 5 days ago

  Hey there! You're doing a great job- keep coding! I'm new as well, but I have one small pointer. I found using display: inline-block;

  for the learning tag keeps it from spreading the full length of my card.

  Good luck and hope to swap code answers soon!

  Marked as helpful

  0
• 

  Abdulsalm Taiwo•70

  @SymplyteeziyPosted 6 days ago

  I think you should improve drastically in using width and border. The padding on both side is not that okay.

  Marked as helpful

  0