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 Custom Card Component using CSS Flexbox

JJ Vega 110

@jjvega86

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


Feedback welcome on the following areas:

  • Semantic HTML. Did I structure my HTML well here? How can I improve the ways I chose to write my markup?
  • Usage of padding/margin throughout the component. I felt like some of my code here was "hacky" but maybe I'm overthinking it a smidge.

Community feedback

@CharlieeLuna23

Posted

Congrats and nice job!

One thing I can mention is that the you should not call the last div in the card "footer" as "footer" as it is actually the attribution at the bottom of the page which should be in the <footer> tag. I used "Creator" for that bit.

Regarding margin, I would not advise to use margin as a tool to center the card. For most of these projects I just used display: flex combined with other elements to center the content.

I'm no expert myself so take this with a grain of salt but it is what I was able to find.

0

JJ Vega 110

@jjvega86

Posted

@CharlieeLuna23 -- thank you so much for the feedback! Great idea to just use Flexbox to make the <main> element a flex container to center the component, and great catch on my misuse of the "footer" class there - makes sense and gives me some ideas on how I can improve naming of classes so they don't collide with the semantics reserved for other parts of the document. Cheers!

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