NFT Card Design

Solution retrospective
Ran into some sizing issues that took me way too long to solve, but at last....
Please log in to post a comment
Log in with GitHubCommunity feedback
- @rohitd99
Hi Jan van Ierssel
Congrats on completing the challenge.
I just wanted to point out a few things, which can improve the solution.
- I noticed you've used
h3
for the title, but anh1
heading would be more suited. For each page a singleh1
heading is always expected and all the headings must be in order fromh1
throughh6
.h1
generally goes for the title,h2
for subtitle and so on. - Also on you've put
height: 100vh
on body , main butmin-height : 100vh
should be used if you want them to stretch as per content. Although on this challenge it wouldn't make much difference.
Hope it helps
Marked as helpful - I noticed you've used
- @solracss
Also this image that have
hover
action on this suggest that it's clickable element. So it should be link or button.For making horizontal line good practice is to use
<hr>
or just useborder-top/bottom
of adequate container.Images used as icons do not need
alt
text (ether, clock).Overall very nice job! Really like it!
- @bccpadge
Hello @Janvampierssel. Congratulations on completing the challenge!! 🎉
Your solution looks great. I have few suggestions to improve your solution.
HEADING TAGS
It is best practice not to skip heading tags in HTML. In future projects just make sure to use headings tags in chronological order.
- Equilibrium #3429 needs to be wrapped in a h1 tag
<h1>Equilibrium #3429</h1>
CSS
Font size should always be in rem units because pixels is an absolute unit that remains constant regardless of the screen size.
More info 📚
Hope this helps you and don't hesitate to reach out to me if you have any questions
- @mikej321
Hey there,
Something that I learned that may be of value to you that I got from a book about Tailwind...when it comes to sizing, just attempt to get it as close as you can and go from there. As long as it's close enough, it's fine and not to worry about being 'pixel perfect'. I remember I would do the same, constantly changing values to get it to be exactly the same. It is headache inducing, haha! Hope this is of some value to you and happy coding!
Michael
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