nft preview card component using html5 markup and CSS
Design comparison
Solution retrospective
Difficulties faced:
- Adjusting list item horizontally, got it fixed by taking help from 'stack overflow' community.
- Using floats and clears
Community feedback
- @denieldenPosted over 2 years ago
Hey ShyamCanCode, congratulations on completing the challenge! You did a great job π
Let me give you some little tips for optimizing your code:
- add
main
tag and wrap the card for improve the Accessibility - centering a
div
withabsolute
positioning is now deprecated, it uses modern css likeflexbox or grid
- use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - use
h1
for the title of card instead ofh3
- instead of using
px
use relative units of measurement likerem
-> read here
Hope this help! Happy coding π
Marked as helpful1@ItachidorriPosted over 2 years ago@denielden Thanks for reviewing my work, I appreciate your valuable time. Hare Krishna!
1 - add
- @grace-snowPosted over 2 years ago
Hi
There are a lot of problems on this Iβm afraid
- youβve removed an essential meta tag from the head that controls scaling on mobile. This is teeny as a result. It was in your original starter files
- the html is missing interactive elements. Anywhere there is a hover in a design it means something is interactive. That means you have to use elements like anchor tags or buttons (there are others, and all depends what you expect to happen on click as to which element you need to use). Using the correct elements will make them work for keyboard users and screenreader users etc
- center the card on the page using grid/flex not position absolute with transform/translate. That removes the card from the document effectively and will result in overflow for some users (content going off screen). It is a technique you very rarely have to use these days
- similarly, floats are not recommended and very rarely needed in modern frontend work. Use flexbox for a much more robust solution
- the card needs no height or width, just a max-width. This will make it properly responsive
- look into rem units more than px
Overall, I recommend you learn from some more modern tutorials. There are lots of recommendations on the resources page here, but off the top of my head I recommend: Kevin Powell videos, Stephanie Eckles site modern css, Josh Comeau, Andy Bell, Inclusive components, Every Layout, Rachel Andrew. There are loads of others but thatβs a good overview of people/resources that share modern resources
Good luck
Marked as helpful1@ItachidorriPosted over 2 years ago@grace-snow Thanks for reviewing my work, I appreciate your valuable time. Hare Krishna!
0 - @msunjiPosted over 2 years ago
Hiya! The finished product looks great by the way, so well done! π
I do have one suggestion for you though. Instead of using float and clear, I recommend you use flexbox instead. I think for the smaller parts of this project that you've used float on, it's fine. But as you start working on larger projects, you may want to learn more about things like flexbox and/or CSS Grid. Hope this was helpful!
0@ItachidorriPosted over 2 years ago@msunji Thanks for reviewing my work, I appreciate your valuable time. Hare Krishna!
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