Design comparison
Solution retrospective
For the bottom articles, I have set overflow: hidden; because it would go out of the box on mobile. Would that be considered good enough, or is there a better way to deal with paragraph overflow?
Community feedback
- @grace-snowPosted almost 2 years ago
This is a BIG challenge to have taken on so early. There are a lot of issues here I’m afraid, too many to go through in one go. So I’ll just feedback on a few of the html ones for now. I recommend you focus on smaller newbie single component challenges and come back to this later. I’d expect this to maybe be a 10th challenge after lots of earlier feedback. There is a suggested order in the slack already.
So, html
- use landmark elements - header and main on this challenge, and footer if you include attribution. All content should be in landmarks.
- only one nav, not two. Don’t repeat html for different screen sizes, just change existing markups layout with css
- you cannot have event listeners on non interactive elements. For a mobile nav toggle, there must be an accessibly named button with aria-expanded attribute on it directly before the list you are toggling. Often there will only be one button used for both open and close but you could have two buttons if you prefer
- don’t have an empty div. Create an overlay with a pseudo element and disable scroll when the nav is open on mobile
- this challenge needs a visually hidden h1
- the featured article should be in an article element and have a h2
- new section should ideally be in a section or aside with aria-labelledby pointing to the id of the New heading
- inside each of the h3s you need to have anchor links. Think about how people would actually access these articles - they need to be able to click on them and navigate to the articles
- ideally the new section should have each of the articles in an unordered list
- the section at the bottom should have a visually hidden h2 eg other articles or recommended articles or popular articles, something like that
- I recommend that is also a section with aria-labelledby that heading ID
- the design shows each of the articles at the bottom are numbered. This gives a clear indication this section should include an ordered list to list these articles
- as with the other articles, these also need anchor links so there is a way to click through to the articles
- the numbers like 01 02 03 cannot be heading elements. That would make no sense semantically on a contents list for this page. Instead make them paragraphs. They could even be aria-hidden once you’ve added in the ordered list as each list item would be numbered already
- do not change inline styles with javascript. That’s not what it’s for. Use JavaScript to toggle attributes like aria-expanded and classes or other attributes of you like. Let css handle ALL styling
Marked as helpful0
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