Skip to content
Submitted 2 months ago

Responsive blog preview card using flexbox

Anderson Moreira Silva•70
@anderjackie
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I spent way less time this time around because already have a much better understading of flexbox so it was way easier.

What challenges did you encounter, and how did you overcome them?

The image size of the avatar. At first I thought I could scale it down setting the `` tag width and height to auto and object-fit to scale-down but the image despite smaller was still to big for the challenge. To overcome that I just set the width and height: to 16px which was perfect since it is static design.

What specific areas of your project would you like help with?

Maybe another ways of scale down an ima would be great.

Community feedback

  • Steven Stroud•11,910
    @StroudyPosted 2 months ago

    Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

    • Avoid using the role attribute when native HTML tags (e.g., <main>, <body>) already provide meaning, as this is redundant and unnecessary for proper accessibility.

    • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

    • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.<div>Learning</div>

    • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

    • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

    • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    Marked as helpful
    0
  • MikDra1•6,980
    @MikDra1Posted 2 months ago

    If you want to make your card responsive with ease you can use this technique:

    .card {
width: 90%;
max-width: 37.5rem;
}

    On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

    Also to put the card in the center I advise you to use this code snippet:

    .container {
display: grid;
place-items: center;
}

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful
    0
    Anderson Moreira Silva•70
    @anderjackiePosted 2 months ago

    @MikDra1

    Thank you very much.

    I'm trying to use flexbox as much as I can now so that's why the grid tip will be useful for future projects, but this one I will keep as it is.

    i updated my solution wit your max-width in rem tip. Thank you very much.

    0
    MikDra1•6,980
    @MikDra1Posted 2 months ago

    @anderjackie

    I'm happy I could help 😀

    0

Please log in to post a comment

Log in with GitHub

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