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 Component made with HTML, CSS and a rare BEM hehe

JonhaDev 40

@JohnJaramillodev

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


Hello! in this project I tried to use BEM, please feel free to give feedback I want to improve, then it will be very helpful, nice day.

Community feedback

Vas 110

@VasJM

Posted

Hi, John! You've done an amazing job here! 🎉

There are a few issues I would like to address:

  • I noticed is that you have used the section element without having a heading element within it. HTML's section element is only to be used if there is a heading it can be identified with! Since your first section element has an h1 element within it, it does not throw an HTML validation error. Also, take for example, chapter titles in a book. Each chapter is a section with a heading, and this heading is the chapter title, which means you cannot have a chapter (section) without a title (heading)! I hope that makes more sense. Might I suggest using a regular div element instead?

  • Another thing is that you have used a lot of span elements in your HTML, and while this is not an issue, it is hard to know their purpose. What are they for exactly? While I might know the answer to this question, other people who are not familiar with this challenge might get confused. So I would suggest at least adding in a class attribute for specificity, and it would be much easier to select them when adding your CSS styles! Another tip of mine would be to add comments in your HTML as this can also help avoid confusion.

  • Lastly, a README file is very important! I don't know why you chose not to have one, but I would highly recommend you create one for all your projects. When downloading the challenge starter files, FEM gives you a README file template so please use it! A person viewing your code on GitHub would certainly want to know what it is you have created.

Good luck with your future challenges 😊

Marked as helpful

0

JonhaDev 40

@JohnJaramillodev

Posted

@VasJM Thank you very much. You helped me a lot, I will correct every point in this challenge and keep them in mind for the next ones. The READ.ME still gives me a hard time, but I will work on adding one to each project. again, I appreciate your feedback, thank you.

0
Vas 110

@VasJM

Posted

@JohnJaramillodev If you need help figuring out how to set up the README.md file, feel free to ask me! I'll be glad to help :)

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