Luam Belay• 40
@LuamB
Posted
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-familyonce in the <body> element to avoid repetition and only definefont-weightfor 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
0
Mohamed-Oday• 190
@Mohamed-Oday
Posted
@LuamB thanks for your feedback, ill use semantic HTML5 in my next challenge
0
