Submitted 4 months ago

Blog preview card

Mohamed-Oday•190

@Mohamed-Oday

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Luam Belay•40

@LuamBPosted 4 months ago

Hola 👋

congrats on your design, which is very close to the design!

Awesome aspects of your solution 🤩

Use of CSS custom properties (variables)
Use of transition

Stuff to improve 🤓

You can define font-family once in the <body> element to avoid repetition and only define font-weight for each <h1> and <p> element:

body {
    font-family: "Figtree", sans-serif;
    ...
}

h1.title {
    font-weight: 800;
    ...
}

p.description {
    font-weight: 500;
    ...
}

In order to improve accessibility, you can use semantic HTML5 and you can use the BEM naming convention for your CSS classes to improve reusablility and code-sharing, e.g.:

<body>
    <main class="container">
        <article class="blog-card">
            <img 
                class="blog-card__image"
                src="assets/images/illustration-article.svg" alt="#" 
            >
            <ul class="blog-card__category">
                <li>Learning</li>
            </ul>
            ...
            <figure class="author">
                <img 
                    class="author__image"
                    src="assets/images/image-avatar.webp" alt="#" 
                >
                <figcaption class="author__name">Greg Hooper</p>
            </figure>
        </article>
    </main>
</body>

You can remove the <div class="attribution"> element (included in the starter package of each challenge) from your final solution, because it's not included in the design.

I’m a beginner, but I hope my feedback is still valuable for you. I would appreciate if you could mark my comment as helpful if it was! 🙏

Let me know if you have feedback on my comment or any questions and I'll do my best to respond.

 Happy coding! 💻

Marked as helpful

Mohamed-Oday•190

@Mohamed-OdayPosted 4 months ago

@LuamB thanks for your feedback, ill use semantic HTML5 in my next challenge

Abdullah Zafar•180
@ei-abdullahPosted 4 months ago
Your work is outstanding, but I see you didn't work on proper README.md file as I think it serves a great purpose in explaining your project.
Marked as helpful
0

Please log in to post a comment

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