Skip to content
Submitted 5 months ago

padding, margin, font-size, flex ,border-box, border-radius,align-item

Mohamedibrahim0419•100
@Mohamedibrahim0419
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•7,490
    @MarziaJalili

    Hey there!

    Here's a simple suggestion:

    • set the code below in the body selector to center the card:
    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
    • Make sure that the card is the only child element of the <body>.

    If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

    <body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

    Keep up the grind🫡

    Marked as helpful
  • Aakash Verma•9,500
    @skyv26

    Hi @Mohamedibrahim0419 👋,

    Here are a few suggestions for improving your project:

    1. Use <div> instead of <section>: The <section> tag is meant for grouping related content that could stand alone, like sections of a webpage. For this small card layout, it's better to use <div> since it's a more generic container that suits the layout needs better. Here's an updated snippet for reference:
    <div class="container">
  <div class="card">
    <img src="assets/images/illustration-article.svg" alt="illustration-article.svg">
  </div>
  <div class="text">
    <h2>Learning</h2>
    <p>Published 21 Dec 2023</p>
    <h1>HTML & CSS foundations</h1>
    <p class="end">These languages are the backbone of every website, defining structure, content, and presentation.</p>
  </div>

  <div class="avatar">
    <img src="assets/images/image-avatar.webp" alt="avatar">
    <span>Greg Hooper</span>
  </div>
</div>
    1. Follow heading hierarchy: It's important to maintain a clear heading structure for accessibility and SEO. In your current markup, you're using an <h2> tag followed by an <h1> tag. Instead, you should have the <h1> as the main heading and use subsequent headings (<h2>, <h3>, etc.) as needed. This ensures better semantic structure. Here's an improved version:
    <h1>HTML & CSS foundations</h1>
<h2>Learning</h2>
    1. Fix spacing: I noticed an issue with the spacing around the headings and elements. Please check line 31-43 in your code and remove any unnecessary spaces to maintain consistency. You can check the exact section here: GitHub Link.

    Keep up the good work! 🎉 Let me know if you have any questions or need further assistance! 😊

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord