Design comparison
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
- @NElnourPosted almost 3 years ago
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 helpful0@mrobbins0422Posted almost 3 years ago@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@NElnourPosted almost 3 years ago@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 GitHubJoin 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