Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Card Component Using React and Tailwindcss

@Criztiandev

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Naveen Gumaste 10,460

@NaveenGumaste

Posted

Hello Criztian Jade M Tuplano ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

happy Coding😀

1

@Criztiandev

Posted

@Crazimonk Thank you haven't notice it appreciate it

1
Aadvik 1,250

@Aadv1k

Posted

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

@Criztiandev

Posted

@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
Aadvik 1,250

@Aadv1k

Posted

@Criztiandev Anytime, mate.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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