Design comparison
Solution retrospective
This was the first project of mine in which I used the BEM naming convention, checkout it possible and give you feedback
Community feedback
- @skyv26Posted almost 3 years ago
Hi! Dharmik, you checked you design and design responsivess and I have noticed some issues.
-
First of all, the most important work you left undone is, image hover effect. I would suggest you to implement the hover effect code, because it is the challenge's requirement, so always stick with the requirement.
-
You can clearly see that your small icon, etherium 0.041ETH text and time left text are not aligned with their respective icon. It seems perfect if we see it from really far distance or small laptop screen, but not on big screen or closer look.
Tip
Update your CSS rule
.nft__price { color: hsl(var(--clr-cyan)); font-weight: 700; display: flex; align-items: center; } .nft__time { font-weight: 400; display: flex; align-items: center; }
- As I figured out while checking your 2. issue and I found that you have used font-awesome icon rather that than images provided by FEM. It is totally ok, that you have just completed your work with ease but you also missed , great learning opportunity too. You can still work on this and change your code and use that images instead of Font-Awesome icons.
Overall Really nice work, your design is responsive too. I hope you you will soon update your code.
Best Wishes
Marked as helpful0@Dharmik48Posted almost 3 years ago@skyv26 thanks for the help, i totally forgot the image hover thing, i'll do it right now
1 -
- @anoshaahmedPosted almost 3 years ago
Hey good job on the challenge! In the future, to avoid accessibility issues, include at least one
<h1>
in your code. Also, remember that<section>
usually needs a heading, so if you don't need a heading in it, use some other element such as<div>
:)0@Dharmik48Posted almost 3 years ago@anoshaahmed Thank you😊, i'll keep that in mind.
1
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