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 using flexbox

@mrobbins0422

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


Please review my project and provide feedback. I am interested in proper semantic HTML markup. Did I succeed? I am also interested in the image size, scale and placement. I've seen all kinds of elaborate code related to the image in other people's code but I didn't see the need for it since I was using flexbox. Did I miss something? Finally, I am new to markup and how to properly organize repositories in GitHub. Is my README.md file okay? This was a great first challenge. Just what I was looking for. I am looking forward to starting the next challenge.

Community feedback

@NElnour

Posted

Hi @mrobbins0422,

I really like how you approached structuring the elements and their styles. Overall, easy to follow. To handle the accessibility issue, I suggest promoting the name of the collection to h1 and tweaking its properties in the stylesheet.

Marked as helpful

0

@mrobbins0422

Posted

@NElnour Thank you for taking the time to view and comment. I was a little confused about how to handle the header. I think proper syntax says every page should have an h1 tag and every section should have an header tag also. My quandary is that the headers are supposed to describe the content. With the sections using h2 or lower, no problem. However there is no content that adequately describes the content of the page (ie. to be used as an h1). Shouldn't every page have an h1 tag? What is the best method to deal with that if none of the content describes the page? -Mark

0

@NElnour

Posted

@mrobbins0422 Ah I see your point. I guess from a single-page website/app perspective, you'd only worry about one h1 element. For this challenge, a good candidate is the "Equilibrium #3429" text since the whole page has only one card. If we were to generalize and add more cards, I wouldn't suggest wrapping the name of the collection with an h1 tag. Instead, it would make sense to have a parent container (carousel or grid/flex) called Collections and wrap its label with h1.

For websites/apps with multiple pages, having one h1 tag is in-line with the 1 page = 1 concern paradigm. Not sure if that answers your question so let me know if I've missed something.

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