
Blog preview card with Flexbox and hover effect
Design comparison
Community feedback
- @aditya-alshiPosted 2 months ago
Hey @JuniorGodoyOrtega,
Great work on the projects! You've demonstrated excellent use of semantic elements, which truly enhances both readability and accessibility.
I had a few observations and suggestions to further refine your code:
-
Nesting Reduction: Would it be possible to simplify the nesting structure? For example, reducing:
<main> <article> ...content </article> </main>
to just:
<main> ...content </main>
This could help keep the markup cleaner while still maintaining semantic clarity.
-
Figure Element Usage: Have you considered whether the
<figure>
element might be redundant in your current setup? Since youralt
attribute already provides clear image descriptions, removing<figure>
could simplify the structure without losing accessibility benefits. -
SEO Considerations: A great suggestion I recently received from a senior developer at Frontend Mentor was to start incorporating SEO best practices in projects. This can include using:
- Meta descriptions and title tags.
- Descriptive
alt
text (which you're already doing well!).
Overall, fantastic work!
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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