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

News Homepage using CSS Flexbox and Javascript

@AndreiPostolache

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • The logo should be outside ⚠️ the nav and its alt tag should state the company's name, " W News".
  • The nav menu items are meant to be interactive ⚠️ so they should each be wrapped in an anchor element.
  • The nav toggle button should be built ⚠️ with a button element and have an aria-label, aria-expanded and aria-control. It should also be inside the nav and be the first thing listed.
  • The "The Bright Future of Web 3.0?" Is **not an **h1 heading ❌, it is another article heading. It should be an h2 heading ✅ and there should be a visibly hidden h1 in the site.
  • The button was created with the incorrect element ❌. When users click on the button they should directed to a different part of your site; the anchor element will allow this to happen.

More Info:📚

MDN The Anchor element

  • Numbers are never ❌ headings.
  • The “image” / “illustrations in this component are purely decorative⚠️. Their alt tag should be left blank to hide them from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

  • This LINK should be built ⚠️ using an ordered list element.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 👾

0

Azhar 600

@azhar1038

Posted

Hi Valentine!

Just wondering why using H1 is not good for article heading? If there is only 1 main article in the page, then it should be okay to use h1 for that.

0

@VCarames

Posted

@azhar1038

h1 headings are the "title" of the site; think book tittles. "The Bright Future of Web 3.0" is just another article heading.

If you gave it the h1 heading, then you have a different h1 heading every time the article changed.

Since nothing visually can be a h1 heading, then that should tell you that it is visually hidden.

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