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

Responsive NFT preview page using Flexbox

@caio-alcantara

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Mario 180

@bembem33

Posted

Good job! I am not competent to give suggestions, but I wish you success and happiness while coding ... go ahead!

Cheers!

0

@caio-alcantara

Posted

@bembem33 Thank you sooo much. I had some struggles while coding, but managed to suceed. Before doing this challenge, I was feeling a little down about web-development, but now I'm feeling much better and ready to keep studying!

0
Mario 180

@bembem33

Posted

@caio-alcantara What kind of struggles did you have?

My struggle was the positioning of the elements and responsivities.

Since the main problem for me in the positioning of the elements lies in the visualization of the current position of the elements... I solved the problem with a simple trick, before any other property for parent and children elements I just firstly do border: 1px dotted red; , and then I can clearly see the path which I am going.

And responsivities thing, I solved with the simple approach... "resize the screen, start to adjusting existing properties of the key elements!"

0

@caio-alcantara

Posted

@bembem33 My major problem was making a good HTML structure, and figuring it out how many div's and "containers" I'd need. I had to basically delete all the HTML/CSS twice before getting it correctly lol

0
Mario 180

@bembem33

Posted

@caio-alcantara I recommend you to try BEM structuring (links: https://en.bem.info/methodology/html/ or http://getbem.com/introduction/). It will be a great help for bigger projects.

0

@caio-alcantara

Posted

@bembem33 Thanks, I will take a look in those later

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