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 preview card

@littygabby

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


I had a great time solving this but my only problem is the space between the ETH and 3 Days left, Also the tiny font.

Please help me solve it.. Thanks

Community feedback

@erickcuenca

Posted

This is some great work! I have some recommendations that will definitely improve your CSS and HTML on this project and for projects to come.

Dig into understanding semantic HTML...

<div class="eth"> <img class="ethlogo" src="./images/icon-ethereum.svg" alt=""> 0.041 ETH </div>

Each HTML element has a purpose and semantic meaning. <div> elements are used to create "division" on your web page (they are great to use as containers). For the most part, it's best practice not to have text content directly inside of a div. In this case, "0.041 ETH" was directly in this div.

Dig into understanding how to use flexbox... (this will really help you with formatting and placement of elements on a web-page)

Here are some amazing FREE resources to learn...

This resource is gold when it comes to learning. This covers IMPORTANT core concepts of CSS. Do me a favor and do this course! https://web.dev/learn/css/

This is a great resource to practice flex-box (it's a game) https://flexboxfroggy.com/

Marked as helpful

1

@littygabby

Posted

@erickcuenca thank you so much ... I will do well to use the resources provided, thank you once again

0

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