Design comparison
Solution retrospective
Please provide feedback Constructive criticism would help me improve.
Community feedback
- @Nipaaaa1Posted 10 months ago
Congratulations on completing your first Challenge!
I see your code and there's a bit things you could do to make it even better:
First, your using CSS Variables for
paragraph
and if you write it like this:--paragraph: 'Figtree';
and implement the font like this:
.date { font-family: sans-serif; /* This is the fallback font for older browser */ font-family: var(--paragraph); }
The fonts problem will go away. The reason you should use separate font family for fallback font is because it'll break at older browser if you're using CSS Variables, since it didn`t support for older browser.
Everything else is fine, Good Job!
Marked as helpful0 - @danielmrz-devPosted 10 months ago
Hello Julio!
Your solution looks excellent!
I have just one suggestion:
- Use only
main
to wrap the main content instead ofmain
andsection
. Unless you have a specific reason do use them both, it's not necessary. The tagsection
would make more sense if the card was part of a bigger website (in certainly would in real world), but here it is all we have on the screen.
This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
0 - Use only
- @RanitManikPosted 10 months ago
- In the card design challenge, it was stated that the shadow of the card should grow on hover, but in your case, that is missing.
- The fonts you used are not from the same family as the design.
0
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