NFT Card Component Using React and Tailwindcss
Design comparison
Solution retrospective
Challenge #2 Difficulty : Newbie
Lesson: This is my 2nd Challenge Completed using React and Tailwindcss, this took me an hour especially the hover on the hero Image but thank God, I have solve it. I have used the event listener called onMouseEnter and onMouseLeave to change the state of hover that has conditional render if its true or false. this is fun challenge and I have learned a lot If there is something you can suggest or effecient way to solve it feel free to comment. I appreciate it a lot. lets grow together
Community feedback
- @NaveenGumastePosted over 2 years ago
Hello Criztian Jade M Tuplano ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
-
Always use
h1
first and thenh2
,h3
and so on -
Add font-weight to the "eth" and its number.
happy Coding😀
1@CriztiandevPosted over 2 years ago@Crazimonk Thank you haven't notice it appreciate it
1 - @Aadv1kPosted over 2 years ago
Great work! Hey! Here are some fixes I would suggest you apply on your project.
- Media query on mobile; You should add a media query for smaller screen sizes, maybe you can change the width or the spacing of the elements in the container element.
- Semantic html; Semtantic html makes your code easier to read for both you,
and someone looking at your code. semantic html is basically.
<article> <h2> Title </h2> <p> Blah blah </p> </article>
is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.
1@CriztiandevPosted over 2 years ago@Aadv1k Thank you very much for this tip, Im still struggling to structure my HTML tags, I will study this sematic topic to Improve , Really appreciate it Thank you <3
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