Skip to content
Submitted 6 days ago

Blog Preview Card

Mayen•160
@Mayen007
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 am proud of how fast I was able to complete the challenge.

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

Any feedback is gladly welcomed!

Community feedback

  • Natali 👻 Grimm•1,150
    @Grimm-NPosted 6 days ago

    Absolutely love what you've done here! 🚀 Your creativity shines through, and the effort you’ve put in is crystal clear.

    One tip though — consider adding a new screenshot of your work. 💡 Remember, screenshots are like the face of your project; they give the first impression. Right now, the system preview isn’t showcasing your card as intended, so a fresh screenshot would really help it stand out and do justice to your awesome work. 😊 Keep it up!

    Marked as helpful
    1
  • Dylan Heslop•1,570
    @dylan-dot-cPosted 6 days ago

    This solution is perfect! The HTML semantic structure and css classes was all well done. Great job.

    There are a few small issues

    • I see you used the section as a container for the card and article for the card content. Normally for me I used sections to separate other sections meaning another topic from others. Like I normally use it for like a grid container of related blog post/articles. So If I want to use the section I would make it as a container for all blog posts not just one. Also the article could have been the container of the blog as that sounds more accurate instead of the content, which feels weird to me. So you could put be like
    <body>
<main>
<section>{optional but useful for more than 1 blog}
<article>
    • I see you used an h2 tag for the learning category, I also find that weird as I think the HTML and CSS foundation would be the h2 and not just a link. So you can wrap the link in an h2 so it's important to screen readers and they can also click on it. Also the learning is like a tag/category for the blog post, so what would that sound like to a screen reader? Or how would it look on the accessibility tree? Learning?? Most people would be confused, especially if you had more than 1 category/tags. So you can make that text less important, maybe p,span, ul(if there were more) but yh. You even give it the class of title but it's not really a title here in your code.
    • it's good to have alta on images, especially if there is content that screen readers would find important to know if they can't see the image. So I think in this case, you could leave it empty as it's just there for styling and doesn't offer any insights about the blog so screen readers users can't do much with that info.

    Only thing left is to generate a new screenshot from what you have now.

    Take care, clean code btw!

    Marked as helpful
    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