News Homepage using CSS Flexbox and Javascript
Design comparison
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The logo should be outside ⚠️ the
nav
and itsalt 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 anaria-label
,aria-expanded
andaria-control
. It should also be inside thenav
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 anh2
heading ✅ and there should be a visibly hiddenh1
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:📚
- 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@azhar1038Posted almost 2 years agoHi 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@VCaramesPosted almost 2 years ago@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 differenth1
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 - The logo should be outside ⚠️ the
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