Submitted about 1 year ago

Blog preview card

Mohamed-Oday•190

@Mohamed-Oday

A solution to the Blog preview card challenge

Preview Code

Code

Please log in to post a comment

Community feedback

Luam Belay•40

@LuamB

Posted about 1 year 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

Abdullah Zafar•180
@ei-abdullah
Posted about 1 year 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

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