News Home Page Using CSS Grid

Community feedback

• 

  T

  Grace•31,270

  @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 helpful

  0
• 

  Vladmidir3331•0

  @Vladmidir3331Posted over 1 year ago

  skill issue

  0
• 

  Vladmidir3331•0

  @Vladmidir3331Posted over 1 year ago

  Cringe bro

  0