Responsive Newshomepage using CSS grid and Flexbox

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

• The logo should be outside ⚠️ the nav.

• The logo and nav should be wrapped inside ⚠️ a header element.

• The nav toggle button should be built ⚠️ using a button element and it should have an aria-label, aria-expanded and aria-control.

• The elements that are meant to be interactive are not⚠️. I suggest looking at the "active-states" design file to see which elements are meant to be interactive so that they can be built using the anchor element.

More Info:📚

MDN The Anchor element

• The main article should be wrapped ⚠️ in an article element.

• The main article requires the use of two illustrations 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

Here is how it looks like implemented: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:📚

https://www.w3schools.com/html/html_images_picture.asp

• 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

• The "new" section should be built using an unordered list element ⚠️ and have an aria-label.

• The bottom section should be built ⚠️ using an ordered list and have a visually hidden h2 heading.

• Numbers are never ❌ headings.

• ⚠️ Always use variables, at minimum, for you colors. As it help keep things organized and easier to maintain.

More Info: 📚

MDN CSS Variables

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

Happy Coding! 👾